Posted by Aak
Aak-share.com Updated at: 12:24:00 AM

Membuat Menu Navigasi Responsive CSS

3 comments:
Membuat Menu Navigasi Responsive CSS - Halo sobat, kali ini tentunya saya menulisakan ide yang berbeda dengan sebelumnya, sebelumnya saya menampilkan ide membuat nav menu dropdown dengan berbagai warna pada kali ini saya membuat nav menu menggunakan CSS. Nav menu ini akan terlihat lebih cantik dan menarik, nav menu ini sering di gunakan pada template Responsive.


Untuk pemasangannya, kamu bisa mengikuti panduannya di bawah ini :

Terapkan sebelum kode ]]></b:skin>

/* Responsive Nav Menu */
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#242425; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#242425; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#1465B6; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#1465B6; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}

Terapkan sebelum kode <div id=header-wrapper>

<div class='menu'>
  <ul>
   <li class='current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'><img border='0' src='http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/home-icon.png' style='padding:0px;'/></a></li>
    <li><a href='#url'>Arcive</a>
    <ul>
      <li>
        <span><a href='#'>Printing &amp; Framing</a>
        <span><a href='#'>Photo Editing</a>
        <span><a class='last' href='#'>Storage &amp; Backup</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href='#url'>Contacts</a>
    <ul>
      <li>
        <span><a href='#'>Support</a>
        <span><a href='#'>Sales</a>
        <span><a href='#'>Buying</a>
        <span><a href='#'>Photographers</a>
        <span><a href='#'>Stockist</a>
        <span><a class='last' href='#'>General</a>
        </span></span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href='#url'>Stores Location</a>
    <ul>
      <li>
        <span><a href='#'>South West Region</a>
        <span><a href='#'>North East Region</a>
        <span><a class='last' href='#'>Central Region</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href='#url'>Contact Us</a>
    <ul>
      <li>
        <span><a href='#'>Email Addresses</a>
        <span><a href='#'>By Post</a>
        <span><a class='last' href='#'>Telephone Numbers</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href='#url'> Gallery </a>
    <ul>
      <li>
        <span><a href='#'>Digital SLR Cameras</a>
        <span><a href='#'>Interchangeable Lenses</a>
        <span><a href='#'>Flash Guns &amp; Accessories</a>
        <span><a href='#'>Professional Tripods</a>
        <span><a class='last' href='#'>Filters &amp; Lens Hoods</a>
        </span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href='#'>Privacy</a></li>
  </ul>
</div>

Terimakasih sobat sudah membaca artikel saya tentang Membuat Menu Navigasi Responsive CSS, Jika ada pertanyaan, silahkan bertanya melalui kotak komentar.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

3 comments