Alternatif Navigasi menu murni CSS dengan dropdown

adelina sofyan

Diposting Oleh: konstributor

CSS itu ringan, dan karena itu ia tidak melukai kecepatan loading sebuah blog. Salah atu kendala menambahkan menu navigasi adalah ia selalu melibatkan Javascript jika ingin fiturnya terlihat lengkap dan menawan. Atau dengan cara memasang navigasi menu menggunakan bootstrap dengan mengorbankan kecepatan loading akibat harus meng'embed' link eksternal pemanggil material dan elemen elemen library-nya.

Tetapi sebenarnya hal tersebut sedikit teratasi melalui trik CSS sederhana dengan cara pemasangan yang juga sangat sederhana, tidak ada javascript, tidak harus melukai performa halaman dengan link eksternal. 

CSS bisa membuat segala sesuatu tampil menjadi sangat cantik atau sangat sederhana.

Dan pemasangan ke blog sangat sederhana.

• Masuk pengaturan/dasbor blog
• Pilih tema
• Pilih Edit HTML

Di dalam halaman editor HTML blogger cari kode </head> dan letakan kode CSS berikut tepat di atasnya:

    <style>  /* mulai menu dropdown */
.my-menu ul {
  display: none;
  position: absolute;
      left: 0;
  top: 100%;
  margin-bottom:10px;
}

/* Position submenus relative to parent list item */
.my-menu li {
      font-size: auto;
      padding: 2px 2 2 2px;
  position: relative;
      background:white;
      border-bottom: blue;
      z-index:999;
}

/* Look, Ma! No onclick handler! */
.my-menu li:hover &gt; ul {
  display: block;
}


/* Modern Browsers only */
.my-menu li:focus-within &gt; ul {
  display: block;
}

/* Style Demo */
ul {
  list-style: none;
  padding: 0;
}
.my-menu {
  display: flex;
  justify-content: center;
  margin: 10px auto;
    max-width: 600px;
  width: 80%;
  }

.my-menu a {
  display: block;
  padding: .3em 0;
  white-space: nowrap;
}

.my-menu a:hover {
      background: white;
  text-decoration: block;
}

.my-menu a:focus {
  outline: 2px dotted currentColor;
  outline-offset: 3px;
}

.my-menu &gt; li + li {
  margin-left: 2em;
}
        header{
font-family: &#39;Times&#39;, Calibri;
font-weight: 500;
font-size: 7vw;
line-height: 1;
color: #f0f0f0;
text-align: center;
-webkit-text-stroke: 2px #777;
text-stroke: 2px #fff;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}
    </style>

Lalu masih di dalam halaman editor HTML blogger letakan kode HTML berikut di bawah kode </head> tadi:

<ul class='my-menu'>
  <li>
    <a href='/'>Beranda</a>
                                  </li>
  <li>
    <a href='#'>
      HTML blog
      <svg aria-hidden='true' height='16' width='16'>
        <use xlink:href='#arrow'/>
      </svg>
    </a>
    <ul>
      <li><a href='#'>HTML Basic blogger</a></li>
      <li><a href='#'>Atribute blogger</a></li>
      <li><a href='#'>Element blogger</a></li>
      <li><a href='#'>Links blogger</a></li>
      <li><a href='#'>Image blogger</a></li>
      <li><a href='#'>Lanjutan</a></li>
    </ul>
  </li>
  <li>
    <a href='#'>
      CSS Blog
      <svg aria-hidden='true' height='16' width='16'>
        <use xlink:href='#arrow'/>
      </svg>
    </a>
    <ul>
      <li><a href='#'>edit warna</a></li>
      <li><a href='#'>buat animasi</a></li>
      <li><a href='#'>Tombol menu</a></li>
      <li><a href='#'>Lanjutan</a></li>
    </ul>
  </li>
  <li>
    <a href='#'>
      Javascript
      <svg aria-hidden='true' height='16' width='16'>
        <use xlink:href='#arrow'/>
      </svg>
    </a>
    <ul>
      <li><a href='#'>React - blogger</a></li>
      <li><a href='#'>Angular - blogger</a></li>
      <li><a href='#'>jQuery - blogger</a></li>
      <li><a href='#'>Jason - blogger</a></li>
      <li><a href='#'>Lanjutan</a></li>
    </ul>
  </li>
</ul>

Save template sekali lagi lihat  DEMO

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Baca Juga: