Tanpa Dropdwon :
Demo
Kode CSS :
.nav_menu, .nav_menu .lc, .nav_menu .rc, .nav_menu ul li, #ht_e, #ht_e .lc, #ht_e .rc {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5j6ZsiTT6awEy0Wu4Zn0I_PyAori0qt0U16BiraXvSgpCtLnQ5ZWrKoaltRQxTH87HIEuy3u_MaO4SzXhn72i0LTatrplLf-_6NHfgXEpX6csa4SthyHiTsO8X7LAMm2ko5PecZvV_eOV/s1600/nav_m.png);margin: 0 auto;}
.nav_menu {position: relative;margin-top: 36px;float: right;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -62px;background-repeat: x-repeat;}
.nav_menu .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
.nav_menu .lc {left: 0px;background-position: 0px 0px;}
.nav_menu .rc {right: 0px;background-position: 0px -31px;}
.nav_menu ul {height: 31px;list-style: none;padding:0;margin:0;}
.nav_menu ul li {float: left;padding: 0px;background-position: right -93px;background-repeat: no-repeat;}
.nav_menu ul li.ls {background: none !important;}
.nav_menu ul li a {height: 25px;color: #ffffff;text-decoration: none;text-shadow: #212121 1px 1px 1px;position: relative;z-index: 7;float: left;font-weight: bold;font-size: 14px;display: block;padding: 6px 13px 0px 13px;}
.nav_menu ul li a:hover {color: #f7941d;}
#ht_e {display: none;z-index: 6;position: absolute;width: 100px;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -186px;background-repeat: x-repeat;}
#ht_e .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
#ht_e .lc {left: 0px;background-position: 0px -124px;}
#ht_e .rc {right: 0px;background-position: 0px -155px;}Contoh HTML Kode :
<div class="nav_menu"> <div id="ht_e"> <div class="lc"> </div> <div class="rc"> </div> </div> <div class="lc"> </div> <div class="rc"> </div> <ul> <li><a href="/">Home</a></li> <li><a href="/">Store</a></li> <li><a href="/">View Ads</a></li> <li><a href="/">Complete Offers</a></li> <li><a href="/">Register</a></li> <li><a href="/">Login</a></li> <li class="ls"><a href="/">Support</a></li> </ul> </div> <div class="clear"> </div>
JavaScript, jQuery.
note: jika sudah ada JS jQuery pada template Anda tidak usah di copy file JS jQuery ini bawah ini, jquery-v1-4.js
<script type="text/javascript" src="http://dl.dropbox.com/u/34111559/jquery-v1-4.js"></script> <script type="text/javascript">var atHome=true;</script> <script type="text/javascript" src="http://dl.dropbox.com/u/34111559/incentria.js"></script>
Untuk Penambahan Dropdown
Demo
Kode CSS'nya
.nav_menu, .nav_menu .lc, .nav_menu .rc, .nav_menu ul li, #ht_e, #ht_e .lc, #ht_e .rc {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5j6ZsiTT6awEy0Wu4Zn0I_PyAori0qt0U16BiraXvSgpCtLnQ5ZWrKoaltRQxTH87HIEuy3u_MaO4SzXhn72i0LTatrplLf-_6NHfgXEpX6csa4SthyHiTsO8X7LAMm2ko5PecZvV_eOV/s1600/nav_m.png);margin: 0 auto;}
.nav_menu {position: relative;margin-top: 36px;float: right;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -62px;background-repeat: x-repeat;}
.nav_menu .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
.nav_menu .lc {left: 0px;background-position: 0px 0px;}
.nav_menu .rc {right: 0px;background-position: 0px -31px;}
.nav_menu ul {height: 31px;list-style: none;padding:0;margin:0;}
.nav_menu ul li {float: left;padding: 0px;background-position: right -93px;background-repeat: no-repeat;}
.nav_menu ul li.ls {background: none !important;}
.nav_menu ul li a {height: 25px;color: #ffffff;text-decoration: none;text-shadow: #212121 1px 1px 1px;position: relative;z-index: 7;float: left;font-weight: bold;font-size: 14px;display: block;padding: 6px 13px 0px 13px;}
.nav_menu ul li a:hover {color: #f7941d;}
.nav_menu ul ul{position:absolute;z-index:500; top:auto;display:none;width: 100px;height:auto;margin-top: 11px;background: #C9C9C9;-webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-bottomright: 8px;-moz-border-radius-bottomleft: 8px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}
.nav_menu ul li ul li{background: none !important;}
.nav_menu ul ul ul{top:0;left:100%;}
div.nav_menu li:hover ul ul,
div.nav_menu li li:hover ul ul,
div.nav_menu li li li:hover ul ul,
div.nav_menu li li li li:hover ul ul
{display:none;}
div.nav_menu li:hover ul,
div.nav_menu li li:hover ul,
div.nav_menu li li li:hover ul,
div.nav_menu li li li li:hover ul
{display:block;}
#ht_e {display: none;z-index: 6;position: absolute;width: 100px;height: 31px;padding: 0px 13px 0px 13px;background-position: 0px -186px;background-repeat: x-repeat;}
#ht_e .lc, .nav_menu .rc {position: absolute;background-repeat: no-repeat;top: 0px;width: 13px; height: 31px;}
#ht_e .lc {left: 0px;background-position: 0px -124px;}
#ht_e .rc {right: 0px;background-position: 0px -155px;}Contoh HTML kode :
<div class="nav_menu"> <div id="ht_e"> <div class="lc"> </div> <div class="rc"> </div> </div> <div class="lc"> </div> <div class="rc"> </div> <ul> <li><a href="http://www.blogger.com/">Home</a></li> <li><a href="http://www.blogger.com/store.php">Store</a></li> <li><a href="http://www.blogger.com/ptc_ads.php">View Ads</a> <ul> <li><a href="http://www.blogger.com/">1234</a></li> <li><a href="http://www.blogger.com/">3456</a></li> <li><a href="http://www.blogger.com/">5678</a> </ul> </li> <li><a href="http://www.blogger.com/signup_offers.php">Complete Offers</a></li> <li><a href="http://www.blogger.com/join.php">Register</a></li> <li><a href="http://www.blogger.com/login.php">Login</a></li> <li class="ls"><a href="http://www.blogger.com/support.php">Support</a></li> </ul> </div> <div class="clear"> </div>
Javascript seperti diatas.
Oke sampai disini, jika kurang jelas silahkan berikan kritik dan saran atau sebuah pertanyaan memalui komantar. Terimakasih semoga bermanfaat.
.jpg)
No comments:
Write komentar