menu navigasi horizonta

Menu Horisontal Incentria, sudah lumyan lama tidak ada sobat request, akhirnya ada pertanyaan juga untuk dibuat posting dan berbgai lagi. Artikel pada kali ini yaitu menu navigasi horizontal situs PTC incentria. Langsung saja ke tutorialnya. Saya membuat menu ini asli tanpa dropdown menu dan dengan dropdown menu.

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(http://4.bp.blogspot.com/-vYKZCzR2260/TqITMJK_UtI/AAAAAAAACyE/0WpeR-pH-00/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(http://4.bp.blogspot.com/-vYKZCzR2260/TqITMJK_UtI/AAAAAAAACyE/0WpeR-pH-00/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.

0 komentar:

Post a Comment

terima kasih sob..