Cara Paling Mudah Membuat Menu Navigasi Transparan

Setelah sebelumnya kita belajar mengenai Cara Membuat Menu Navigasi yang dapat di Drag and Drop dan Cara Mudah Membuat Menu Dropdown, pada kesempata kali ini Point Website akan memberikan tutorial Cara Paling Mudah Membuat Menu Navigasi Transparan, dalam sebuah website menu merupakan point paling penting yang harus diperhatikan, sebab menu navigasi yang bagus memudahkan pengunjung untuk melihat, menelusuri dan mengakses website teman-teman, oleh sebab itu ada baiknya jika teman-teman ingin membuat menu, maka buatalah menu tersebut dengan sangat teliti, dimulai dari model menu, pilihan kategori dan pilihan warna sehingga nantiya membuat pengujung betah dengan tampilan nya.

Hubungan Menu Navigasi dan SEO

Menu navigasi salah satu komponen penting dalam meningkatkan SEO, dimana Menu navigasi digunakan pengguna internet untuk memudahkan mereka mengakses bagian yang mereka inginkan dari website teman-teman dengan cepat. Teman-teman dapat membuat menu navigasi berdasarkan kategori tulisan atau jenis halaman. Untuk meningkatkan SEO dengan Merancang Menu Navigasi , teman-teman bisa menambahkan animasi naik turun (dropdown) pada menu.

Cara Membuat Menu Navigasi Transparat

Dari penjelasan diatas kita dapat mengambil kesimpulan menu yang bagus itu menu yang simple, enak untuk dilihat dan yang dapat membuat pengunjung mudah mengakses website dan betah berkunjung pada website teman-teman. Maka dari itu, untuk lebih memudahkan teman-teman untuk memahami cara membuat menu navigasi transparan teman-teman dapat menulis code dibawah ini pada text editor kesayangan teman-teman, simpan dengan nama file index.html atau dengan nama lain yang penting extensinya harus html.

<!DOCTYPE html>
<html>
<head>
 <title>Point Website</title>
 <style type="text/css">
 body {
   margin: 0px;
   padding: 0px;
   background-image: url(46.jpg);
   background-size: cover;
   opacity: 0.7;
  }
  .logo {
   float: left;
      background-color: #238e00;
      width: 20%;
      box-shadow: 3px 2px 10px black;
  }
  nav {
   height: 53px;
   overflow: hidden;
      background-color: #04863e;
      float: left;
      width: 80%;
      box-shadow: 0px 2px 10px black;
  }

  nav ul {
   display: inline;
  }
  nav ul li {
   display: inline-block;
      cursor: pointer;
      padding: 15px;
      transition: background-color 0.3s;
  }
  nav li a {
   text-transform: uppercase;
      text-decoration: none;
      color: #ffffff;
      font-size: 20px;
      font-weight: 300;
      padding: 20px;
  }
  nav > ul >li ul {
   background-color: #04863e;
      position: absolute;
      margin-top: 11px;
      z-index: -1;
      margin-left: -46px;
      border-radius: 0px 0px 15px 15px;
      text-align: center;
      width: 226px;
      padding: 4px;
      visibility: hidden;
      transition: visibility 0.3s;
  }
  nav > ul >li ul> li {
   margin: 10px;
   display: inline-block;
   cursor: pointer;
  }
  nav ul li:hover ul{
  visibility:visible; //menampilkan menu saat pointerr di atasnya
  }
  nav ul li:hover {
   background-color: red;
  }
 </style>
</head>
<body>
<div class="logo">
 <img src="aslilogo.png" alt="logo">
</div>
<nav>
 <ul>
  <li><a href="">HTML</a></li>
  <li><a href="">CSS</a></li>
  <li><a href="">Javascript</a></li>
  <li><a href="">Php</a></li>
  <li>
  <a href="">Database</a>
   <ul>
    <li><a href="">Bootstrap</a></li>
    <li><a href="">node JS</a></li>
    <li><a href="">AngularjS</a></li>
    <li><a href="">CodeIgniter</a></li>
   </ul>
  </li>
 </ul>
</nav>
</body>
</html>

Sebelum saya jelaskan point penting dari code diatas, silahkan teman-teman buka file html yang sudah teman-teman buat pada web browser, maka hasilnya akan seperti berikut ini.

Sedikit penjelasan dari code diatas, pembuatan menu navigasi transparan ini sama seperti pembuatan menu pada umumnya, akan tetapi pada tutorial Cara Paling Mudah Membuat Menu Navigasi Transparan ada sedikit manipulasi dimana kita menggunakan property opacity untuk membuat warna pada menu menjadi transparan dan sedikit manipulasi pada submenu dengan memberikan property z-index agar submenunya berada dibawah menu dan memberikan sedikit bayangan dengan property box-shadow. Sekian tutorial dari Point Website tentang Cara Paling Mudah Membuat Menu Navigasi Transparan, semoga dapat berguna dan membantu teman-teman dalam membuat website.