Tutorial membuat menu dengan HTML5

Assalamu'alaikum , teman-teman disini saya akan sharing tentang bagaimana cara membuat menu pada HTML5 dan css.

berikut ini adalah langkah-langkah untuk membuat menunya:

1. tahap pertama untuk membuat programnya adalah menyiapkan text editornya, pada tutorial kali ini saya menggunakan text editor Sublime Text. teman-teman bisa mendownload Sublime Textnya di link berikut: https://filehippo.com/download_sublime_text/

2. ketika Sublime Text nya sudah di persiapkan maka langsung saja ketikkan script seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat Menu Pada HTML5</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<ul class="navbar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
  <li class="dropdown">
    <a href="#" class="btndown">Dropdown</a>
    <ul class="itemdown">
      <li><a href="#">Item #1</a></li>
      <li><a href="#">Item #2</a></li>
      <li><a href="#">Item #3</a></li>
      <li><a href="#">Item #4</a></li>
    </ul>
  </li>
  <li class="right"><a href="#">Sign Up</a></li>
  <li class="right active"><a href="#">Sign In</a></li>
</ul>
</div>
</body>
</html>

jika sudah lalu save script tersebut dengan nama index.html, jika sudah maka jalankan file tersebut dengan cara di Open di browsernya. jika sudah maka akan tampilan seperti di bawah ini:
3. untuk mempercatik tampilan pada tersebut, saya menggunakan css. untuk membuat css-nya silahkan di klik file pada Sublime Textnya lalu pilih new file, kemudian simpan file tersebut dengan nama style.css.

4. jika sudah selesai menyimpan file css tadi, kemudian ketikan script berikut didalam file style.css tersebut.

ul.navbar{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  background-color:#7FFF00;
  font-family:sans-serif;
  border:1px solid #ccc;
  overflow:hidden;
}
ul.navbar li{
  float:left;
}
ul.navbar li a, .btndown{
  display:inline-block;
  text-decoration:none;
  color:#000;
  padding:14px 16px;
  text-align:center;
}
ul.navbar li a:hover, .dropdown:hover .btndown{
  background-color:#555;
  color:#fff;
}
ul.navbar li.active a{
  background:#4169e1;
  color:#fff;
}
ul.navbar li.right{
  float:right;
}
ul.navbar li.dropdown{
  display:inline-block;
}
.itemdown{
  display:none;
  position:absolute;
  bacground-color:#f9f9f9;
  margin:0;
  padding:0;
  box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  list-style-type:none;
}
.itemdown li{
  clear:both;
  float:none;
}
.itemdown li a{
  color:black;
  padding:12px 86px;
  display:inline-block;
  min-width: 100px;
  text-decoration:none;
}
.itemdown li a:hover{
  background-color:#f1f1f1;
}
.dropdown:hover .itemdown{
  display:block;
}

5. jika sudah ketikkan script berikut di dalam file index.html nya.

<link rel="stylesheet" type="text/css" href="style.css">

letakkan script script tersebut di tengah tag head atau <head></head>

6. lalu setelah selesai maka tampilan menu akan berubah menjadi seperti ini

7. sekian tutorial kali ini, maaf kalau ada salah-salah kata dari saya. semoga bermanfaat, Wassalamu'alaikum.

Komentar

Posting Komentar