Menu Navigasi Fixed

Pada artikel sebelumnya telah dibahas Menu Navigasi Drop Down Biru menggunakan CSS dan JQuery, artikel kali ini akan sedikit membahas mengenai cara memasang menu navigasi Pure CSS. Menu navigasi ini murni menggunakan CSS, jadi tidak perlu plugin JQuery lagi dan efeknya pun cukup bagus seperti menu navigasi yang menggunakan  CSS dan JQuery. Menu Navigasi ini sedikit berbeda dari menu navigasi lainnya, karena menu navigasi ini letaknya fixed/menempel di bawah blog. Memang terlihat sedikit aneh, dan dari segi Interface pun menu ini kurang begitu baik. Namun tidak ada salahnya kan berbagi :D

Pertama di bawah ini kode CSSnya letakkan di atas kode 
]]></b:skin> atau  </style>
#navi {
background:-webkit-radial-gradient(left top, circle, #afdefa, #331faa);
background:-moz-radial-gradient(left top, circle, #afdefa, #331faa); 
background:-o-radial-gradient(left top, circle, #afdefa, #331faa);
background:radial-gradient(left top, circle, #afdefa, #331faa);
border:1px ridge #131faa;
color:white;
font:normal 10px Arial,Sans-Serif;
text-transform:uppercase;
position:fixed;
bottom:0px;
left:0px;
width:100%;
z-index:999;
}

#navi ul {
margin:0px 0px;
padding:0px 0px;
height:30px;
}

#navi li {
margin:0px 0px;
padding:0px 0px;
float:left;
display:inline;
list-style:none;
position:relative;
}

#navi a {
display:block;
padding:0px 15px;
line-height:30px;
text-decoration:none;
background:-webkit-radial-gradient(left top, circle, #afdefa, #331faa);
background:-moz-radial-gradient(left top, circle, #afdefa, #331faa); 
background:-o-radial-gradient(left top, circle, #afdefa, #331faa);
background:radial-gradient(left top, circle, #afdefa, #331faa);
color:white;
text-shadow:0px 1px 3px rgba(0,0,0,0.5);
font-family:"Sans Serif", arial;
}

#navi a:hover {
  background:#10a;
}

#navi li ul {
width:170px;
height:auto;
position:absolute;
bottom:100%;
left:0px;
z-index:10;
display:none;
-webkit-transition:all 0.26s ease-out 0.2s;
-moz-transition:all 0.26s ease-out 0.2s;
-ms-transition:all 0.26s ease-out 0.2s;
-o-transition:all 0.26s ease-out 0.2s;
transition:all 0.26s ease-out 0.2s;
}

#navi li li {
display:block;
float:none;
border-top:1px ridge #531faa;
border-bottom:1px ridge #231faa;
-webkit-animation: aniload 2s;
-moz-animation: aniload 2s;
-ms-animation: aniload 2s;
animation: aniload 2s;
border-left:1px ridge #531faa;
border-right:1px ridge #231faa;
}

#navi li:hover > ul {
  display:block;
}

#navi li ul ul {
  left:100%;
  bottom:0px;
}

@-webkit-keyframes aniload {
from{opacity:0;height:0%;}
to{opacity:1;height:100%;}
}

@-moz-keyframes aniload {
from{opacity:0;heigtht:0%;}
to{opacity:1;height:100%;}
}

@-ms-keyframes aniload {
from{opacity:0;height:0%;}
to{opacity:1;height:100%;}
}
@keyframes aniload {
from{opacity:0;height:0%;}
to{opacity:1;height:100%;}
}
Lalu pemanggilannya
<nav id="navi">
 <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#">Tools</a>
   <ul>
    <li><a href="#">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a></li>
    <li><a href="#">Submenu 3</a></li>
    <li><a href="#">Submenu 4</a></li>
   </ul>
  </li>
  <li><a href="#">&#9993; Kontak</a>
   <ul>
    <li><a href="#">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a></li>
    <li><a href="#">Submenu 3</a></li>
    <li><a href="#">Submenu 4</a></li>
   </ul>
  </li>
  <li><a href="#">Sitemap</a>
   <ul>
    <li><a href="#">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a>
     <ul>
      <li><a href="#">Submenu 2.1</a></li>
      <li><a href="#">Submenu 2.2</a></li>
      <li><a href="#">Submenu 2.3</a></li>
      <li><a href="#">Submenu 2.4</a></li>
     </ul>
    </li>
    <li><a href="#">Submenu 3</a></li>
    <li><a href="#">Submenu 4</a></li>
   </ul>
  </li>
 </ul>
</navi>

Menu ini saya kembangkan yang saya dapatkan di DTE :], apabila ada yang mau ditambahkan silahkan di form komentar saja :)


Sumber: DTE:]

7 komentar:

Silahkan berkomentar dengan bahasa yang baik sesuai dengan isi artikel :)