Navigation Horizontal Mdev

Navigation Horizontal Smooth Style

Demo :

Lihat di Template Mdev


Cara membuatnya

Dari Dashboard > Design > Edit HTML


Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

.jqueryslidemenu{background:#242729; font:bold 12px Verdana; width:100%; border-bottom:2px solid #E6E3BB}
.jqueryslidemenu:hover{border-bottom:2px solid #999}
.jqueryslidemenu ul{margin:0 0 0 10px; padding:0; list-style-type:none}
.jqueryslidemenu ul li{position:relative; display:inline; float:left; border-left:2px solid #333; border-right:2px solid #000}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{background:#242729; color:#E6E3BB; display:inline-block; font-size:14px; margin:0; padding:15px 25px; text-shadow:2px 2px 2px #333}
.jqueryslidemenu ul li a:hover{background:#805500; color:#E6E3BB}
.jqueryslidemenu ul li ul{margin:0; padding:0; position:absolute; left:0; display:block; visibility:hidden; z-index:9999}
.jqueryslidemenu ul li ul li{display:list-item; float:none; border-left:none; border-right:none}
.jqueryslidemenu ul li ul li ul{top:-1px}
.jqueryslidemenu ul li ul li a:link, .jqueryslidemenu ul li ul li a:visited{background:#242729; width:140px; color:#E6E3BB; display:inline-block; font:14px Arial; letter-spacing:2px; margin:5px 0; padding:3px; border-radius:5px; -moz-border-radius:5px; text-shadow:2px 2px 2px #333}
.jqueryslidemenu ul li ul li a:hover{background:#805500; color:#F0E6E6; border-radius:5px; -moz-border-radius:5px;}
.downarrowclass{position:absolute; top:20px; right:7px}
.rightarrowclass{position:absolute; top:11px; right:5px}

Langkah kedua > Penempatan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript' />
<script src='http://pagenano.googlecode.com/files/Nav%20Mdev.js' type='text/javascript' />

Teks berwarna merah jika sudah ada tidak perlu lagi !.


Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Folder 1</a>
  <ul>
  <li><a href='#'>Sub Item 1.1</a></li>
  <li><a href='#'>Sub Item 1.2</a></li>
  <li><a href='#'>Sub Item 1.3</a></li>
  <li><a href='#'>Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
  <ul>
  <li><a href='#'>Sub Item 2.1</a></li>
  <li><a href='#'>Folder 2.1</a>
    <ul>
    <li><a href='#'>Sub Item 2.1.1</a></li>
    <li><a href='#'>Sub Item 2.1.2</a></li>
    <li><a href='#'>Folder 3.1.1</a>
 <ul>
       <li><a href='#'>Sub Item 3.1.1.1</a></li>
       <li><a href='#'>Sub Item 3.1.1.2</a></li>
       <li><a href='#'>Sub Item 3.1.1.3</a></li>
       <li><a href='#'>Sub Item 3.1.1.4</a></li>
       <li><a href='#'>Sub Item 3.1.1.5</a></li>
 </ul>
    </li>
    <li><a href='#'>Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href='#'>Item 4</a></li>
</ul>
<br style='clear: left'/>
</div>



Alhamdulillah

15 comments:


  1. salam kenal sob ? mampir untuk liat-2, tutorial nya bagus2 buat pembelajaran hehe ..[maklum saya baru banget di dunua Blogging]. Oya .. yg saya salut bisa valid nya itu. saya pernah coba gak berhasil2, kasih tau rahasia nya dong? hehe..salam thanks.

  2. salam kenal juga sob...

    tentang valid ya bro... coba dilihat disini bro :
    Mencoba Valid di Blogspot

    Semoga bermanfaat bro... :)

  3. ok sob seep, mambantu sekali di coba dulu?

  4. silahkan bro...

  5. sudah lama saya tidak kesini, apa kabar master? semoga baik2 saja :)

  6. wew bro beben... halah saya masih amatir, alhamdulillah baik bro...

    sebenarnnya sudah lama pengen silahturahmi ke Blog bro Beben, tapi tersandung internet bro... internet saya lama banget, berapa kali saya coba gak berhasil... T.T

    Mudah-mudahan bro Beben baik-baik saja... :)

  7. Nice Code ... Kak Admin

  8. mantabh...membantu banget..ijin cobain bro...

  9. 1 lagi template blog nya bagus banget bro...i like it...

  10. Bro aku baru nich. gimana sich cara bikin link nya di navigationnya? Oiya makasih templatenya. mantapp....

  11. Linknya diletakkan ditempat tanda "#", atau lebih gampang lihat kode ini :

    <li><a href='Link Anda disini'>tulisannya disini</a></li>

    Kecuali induk menu yang bisa menurun, tanda "#" jangan dihilangkan. Linknya bisa diletakkan di anaknya. Jika anak menu kurang bisa ditambahkan seperti ini :

    <li><a href='Link Anda disini'>tulisannya disini</a></li>

    jika kurang jelas, komentar lagi bro...

  12. Oiya bro. kalo mau nampilin semua entri kalo click label gimana ya? di aku cuman 1 aja yang nongolnya. hehe..
    makasih....

  13. linknya blognya bro, biar saya lihat...

  14. http://artikelsyariah.blogspot.com/

  15. Biasanya Label itu mengikuti jumlah artikel yang ada ditampilan utama blog... Sesuaikan saja dengan pengaturan, bisa dilihat di :
    Settings > Posts and Comments > dibagian Posts > Show at Most > tulis jumlah yang ingin ditampilkan dihalaman utama blog atau dihalaman label > dan menu menurunnya ganti dengan Posts, jangan Days...

Posting Komentar


Creative Commons License
Navigation Horizontal Mdev by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/04/navigation-horizontal-mdev.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.