Navigation Horizontal/Menyamping Template N2y Berjalan

Home > JavaScript Blogger > Navigation Horizontal/Menyamping Template N2y Berjalan

Kode JQuery Library

Kalau sudah ada tidak diperlukan lagi...

Kode JQuery

Kode CSS

#nav {
width:96%;
background:#F0C86C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnLbwWV1hVtWES9piSXZeUKnP5u8_Z9YWgvLbiB-X9QgKmuW2UhZYQwdpLqDwmSnv-ZESjy-GpARmQ8yKeAsx0ku0Hp9PryH5pXc-_COUtyI3Km4utZbNlinPKr5WD8R-46jnRcnVsoTZz/s104/classic-box-head.png);
text-align:right;
font-family:arial;
font-weight:bold;
font-size:15px;
padding:0;
margin:0 auto;
overflow:hidden;
border:1px solid #ddd;
border-bottom:2px solid #ddd;
}
#nav ul {
list-style:none;
padding:0;
margin:0px;
overflow:hidden;
}
#nav li {
list-style: none;
margin:0;
padding:0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color:#444;
display:block;
margin:0 0 0 2px;
padding:3px 7px;
}
#nav li a:hover, #nav li a:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcDXXFDlcTp4-re2e2d8z3T6nGjSMZDXfN0EFinKNOe9UDRxB0EvUkBZTlJ6FITCghLvJWpEEjtT8BadFXAdpfVQVz9NOxOoucacnVVdrwF6DdM6RkKw54sSqDSjSyUIoc_fl3av69-lk1/s104/classic-arrow1.gif)no-repeat left;
color:#444;
margin:0 0 0 2px;
padding:3px 7px 3px 11px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
color:#444;
font-weight:bold;
float:none;
margin:0 0 0 0;
padding:5px;
text-align:left;
}
#nav li li a:hover, #nav li li a:active {
background:#F0C86C;
color:#444;
padding:5px;
}
#nav li {
float:left;
padding:0;
}
#nav li ul {
background:#FEEAB8;
z-index:9999;
position:absolute;
left: -999em;
height: auto;
width: 140px;
margin: 0;
padding: 0;
visibility:hidden;
}
#nav li ul a {
width:140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Kode HTML

<div id='nav'>
<ul>
 <li><a href='/'>Home</a></li>
 <li><a href='/'>About Me</a></li>
 <li><a href='/'>Sitemap</a></li>
 <li><a href='#'>N2y Series</a>
     <ul>
        <li><a href='http://nanoyulianto.blogspot.com/2010/08/template-n2y-sedikit-mirip.html'>N2y Sedikit Mirip</a></li>
        <li><a href='http://nanoyulianto.blogspot.com/2010/08/template-n2y-suka-suka.html'>N2y Suka-Suka</a></li>
        <li><a href='http://nanoyulianto.blogspot.com/2010/09/template-n2y-shadow.html'>N2y Shadow</a></li>
        <li><a href='http://nanoyulianto.blogspot.com/2010/09/template-n2y-eksperiment.html'>N2y Eksperiment</a></li>
        <li><a href='#'>Site Template</a>
           <ul>
              <li><a href='http://www.zoomtemplate.com/'>Zoom Template</a></li>
              <li><a href='http://blogtemplate4u.com/'>Blog Template 4U</a></li>
           </ul>
        </li>
     </ul>
 </li>
 <li><a href='#'>Subscribe</a>
        <ul>
          <li><a href='http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/NanoYulianto' title='Nano Yulianto'>Yahoo</a></li>
          <li><a href='http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/NanoYulianto'>Google</a></li>
          <li><a href='http://feeds.my.aol.com/add.jsp?url=http://feeds.feedburner.com/NanoYulianto'>My AOL</a></li>
          <li><a href='http://www.bloglines.com/sub/http://feeds.feedburner.com/NaCoYulianto' title='Nano Yulianto' type='application/rss+xml'>Bloglines</a></li>
          <li/>
       </ul>
 </li>
 <li><a href='http:/feeds/posts/default' rel='alternate' type='application/rss+xml'>Feeds</a></li>
</ul>
</div>

Kode CSS dan HTML disesuaikan selera.

Semoga Bermanfaat...

Alhamdulillah

Tutorial Nano Yulianto

I am Blogger and Love Design

Navigation Horizontal/Menyamping Template N2y Berjalan

0 comments:

Posting Komentar