Pagi ini saya akan memberikan tutorial tentang membuat Menu Navigasi Horizontal Melayang atau Floating, tentang Menu Navigasi Horizontal Melayang atau Floating ini tidak seperti Menu Navigasi Horizontal yang biasanya ( di bawah header ), tapi saya memberikan tutorial tentang membuat Menu Navigasi Horizontal Melayang atau Floating, jadi menu navigasi yang saya ini mengikuti scroll bar, scriptnya saya padukan antara tutorial ( membuat gambar di pojok blog ) dengan tutorial ( membuat menu dropdown smooth ), script Menu Horizontal Navigasi Melayang atau Floating ini saya modifikasi sedikit agar mudah dimengerti oleh para blogger, walau di modifikasi tetapi hasilnya lumayan memuaskan.


Berikut ini cara Membuat Menu Navigasi Horizontal Melayang / Floating :

1. Masuk ke Edit HTML dan checklist tulisan "Expand Template Widget"

2. Copy script berikut ini :

/* ######### Script Menu Mulai  ######### */

/*  Script weight :12px; by DesaTutorial height :10px;  */

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*warna latar belakang menu*/
width: 1010px;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Warna latar belakang items*/
color: white; /*Warna teks items*/
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*warna latar belakang onmouseover (hover state)*/
color: white; /*Warna teks onmouseover*/
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS untuk bayangan  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow transparansi. tidak bekerja di IE*/
opacity: 0.8;
}

/* ######### Script Menu Tutup  ######### */

/* ######### Script Floating Buka  ######### */


#sticky1 { position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit; _top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

/*  Script weight :12px; by DesaTutorial height :10px;  */

/* ######### Script Floating Tutup  ######### */



Paste di atas tag ]]></b:skin>


3. Copy script berikut :



<div id='sticky1'>
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://desatutorial.blogspot.com'>Home</a></li>
<li><a href='http://desatutorial.blogspot.com'>About</a></li>
<li><a href='http://desatutorial.blogspot.com'>Contact</a></li>
<li><a href='http://desatutorial.blogspot.com/search/label/Tutorial'>Tutorial</a>
  <ul>
  <li><a href='http://desatutorial.blogspot.com/search/label/Blog'>Blog</a></li>
  <li><a href='http://desatutorial.blogspot.com/search/label/Internet'>Internet</a></li>
  <li><a href='http://desatutorial.blogspot.com/search/label/Komputer'>Komputer</a></li>
 </ul>
</li>
</ul>


<br style='clear: left'/>
</div>
</div>


Paste di atas tag </body>


4. Ganti tulisan yang berwarna MERAH dengan alamat blogmu...

Sekian tutorial dari saya ....




8 Comments to “Menu Navigasi Horizontal Melayang / Floating”

  1. budi2610 says:

    Kunjungan balik sobat, sekalian follow.
    Follow balik ya.
    http://budi2610.blogspot.com

  2. Unknown says:

    salam sahabat
    ehm giod saya jug dah pakai menu navigasi ini thanks and saya dah follow.good luck

  3. Bang Koko says:

    nice post sobat.......
    salam knl ya.......
    jika berkenan silahkan mampir balik

  4. q dah pasang menunya...
    tp kenapa yaa yg menu "Tutorial" ga mau muncul slide sub menunya???

  5. Thanx info nya gan.
    jangan lupa mampir di blog saya ya http://limarepastinipus.blogspot.com

  6. Unknown says:

    om itu semua di kasih url kita semua .. koq punya saya ga bisa di tempat kan misal nya tutorial internet ke internet .. blogger seo ke blogger seo .. ??
    mohon pencerahaan nya ..

  7. Anonymous says:

    nicesob..tapi kok ngk bisa ya sob drop downnya..mohon di bales ke blogku aja..

  8. Unknown says:

    Bro bisa buat menu navigasi kayak di Indowebster gk??
    Itu yang floating dan hovernya bekerja saat di scroll ke bawah..
    kloq bisa share donk....

! Terima Kasih !
- atas copy-paste yang menyertakan alamat blog ini : http://desatutorial.blogspot.com/
- mengklik DONASI guna membangun blog ini menjadi lebih baik

Komentar