![Cara Membuat Floating (Fixed) Menu CSS3 Effect Floating (Fixed) Menu CSS3](http://2.bp.blogspot.com/-IIh5J0_T2fA/Uk6ot6BuJGI/AAAAAAAAGQQ/WKfdoUBEreo/s540/navigasi-menu-fixed-(floating)-blogger.gif)
1. Login terlebih dahulu ke akun blogger.
2. Kemudian pada template pilih Edit HTML.
3. Lalu copy kode CSS berikut ini lalu taruh di atas kode
]]></b:skin>
#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}4. Selanjutnya copy kode HTML berikut ini lalu taruh di bawah kode
.menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:#09c; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }
<body>
atau bisa juga ke dalam widget HTML/Javascript.<div id='menufixed'>Keterangan:
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Home</b></a></li>
<li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 1</b></a>
<div class='col3'>
<ul class='colLeft'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
</ul>
<ul class='col'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 10</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 11</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 12</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 13</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 2</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 3</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 4</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
<li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 5</b></a></li>
</ul>
</div>
</div>
Ganti http://mas-andes.blogspot.com dengan URL link blog anda.
5. Langkah terakhir Simpan template dan selesai sudah bisa di lihat hasilnya.
Bagi yang ingin memasang floating menu atau fixed menu ini namun tidak perlu masuk Edit HTML template, maka bisa juga langsung menaruh seluruh kode diatas ke dalam widget HTML/Javascript. Caranya gabungkan antara CSS dan HTML namun sebelumnya jangan lupa untuk menambahkan kode
<style type="text/css">
pada awal CSS dan tambahkan juga kode </style>
pada akhir CSS. Selanjutnya kode HTML yang terdapat pada point 4 taruh dibawahnya kode </style>
langkah terakhir klik Simpan.
54 Response to "Cara Membuat Floating (Fixed) Menu di Blog"
wah sub menunya bisa dibuat menyamping yah mas, jadi nggak panjang ke bawah, keren juga apalagi ada style hover 3D nya, sip mas :)
Balaswaw menu,
Balaskayaknya keren ni gan kalau dicoba,
terima kasih artikelnya mas.
Wah kalu yang ini tampilannya keren abis mas,,sya baru pertama liat yg kya gini hehehe
Balasmas anthoni ga suka yang panjang2 pasti ya..
Balaspandangan pertama dong mas :)
Balasga di coba juga keren kayaknya :)
BalasMantap Nih Gan Tutorialnyaa Hmmm ... Saya Izin Comot yah Gan Buat Nanti dipasangin Di Blog Baru Saya ^_^
BalasFloating menunya keren mas, tapi kebetulan tempat saya udah saya pasang malas gonta ganti lagi. :) Ijin CTR + D aja mas. Barangkali kalau saya lagi bosan bisa saya ganti di kemduian hari.
BalasMenarik juga ya kalau menu bisa dibuat floating seperti itu. Jadi kelihatan kece ya mas blog nya hehe :)
BalasKalau sekedar coba-coba kayaknya kurang keren mas. Lebih baik langsung praktek :D
Balaskeren ni mas sub menu nya, dengan tambahan menu ke samping bisa semakin ringkas tampilannya
BalasKunjungan Malam Mas Andes, Wah ilmu yang lain
BalasBelum selesai di terpasang dengan baik, ini sudah
Ada lagi yang baru, simak lagi belajar lagi ngulik lagi
Terima kasih tips - Triks nya Mas Andes memang yahuut.
Sangat bermanfaat Mas Andes, artikelnya jangan bosen
Balassya Mampir lagi di blog Mas Andes yang Kasep Lebih-lebih
Se Kasep Mas Admin nya ..tt3tt3tt3tt3...
iya mas silahkan.. semoga bermanfaat
Balasiya mas silahkan boleh buat siapa aja..
Balasiya mungkin mbak saya juga kurang tau kece apa enggak :)
Balasiya mas lebih ringkas tampilannya :)
Balashehe iya kang Karrysta adminnya kebanyakan molor jadi kasep terus :)
Balassaya barusan lihat demo-nya, bagus banget....pengen tapi saya tahan dulu. mungkin belum waktunya. sambil nunggu gebrakan yang lain lagi :D
Balasyang kece yang pake kacamata mas Andes hehe...
Balaswah kang Ucup senengnya ditahan-tahan yah hehe...
Balasbagus gan...tapi kalo mau pasang ini warnanya harus disesuaikan dengan template blog kita..
BalasTop markotop mas .. akrab banget ya nih menu ko ngikut terus hehe
Balaspanjang juga yah kodenya....komen balik yah di http://www.infonakke.com/2013/10/oppo-n1-smartphone-china-dengan.html
Balasitu terserah yang mau masang mas..
Balasmumpung masih demen koleksi menu kang hehe..
Balasiya mas lumayan panjang..
BalasKeren Mas Menunya...
BalasSub menunya Banyak banget mas
biar ga banyak di hapus kan bisa mas..
BalasHanya bisa menyimak. Dengan tab menu seperti ini tampilan menu akan tampak lebih simple.
Balasiya mas,
Balaslagian menunya sudah terpasang di blog saya,
wkwkwkw
Wkwkwkwk Terimakasih banyak mas anthonie, jadi nggak enak sendiri nich hehe :D
BalasKalau berangkat kerja jangan kasep ya mas andes, nanti bisa dimarahin sama pak bos lho hehe :)
BalasKang ucup mau nggebrak apa ya? jadi penasaran dech hehe :)
BalasPandangan pertama awal aku berjumpa whahahahaha malah nyanyi ya mas
Balasasal jangan dipasang di toko, ntar dikira sales widget
Balasinsya allah kalo kerja tetep konsisten mbak, laki2 harus punya tanggung jawab :) ciee..
BalasYang Kece, Mbak Rin, Yang Selalu sehat Mas Anthonie
BalasYang selalu Rapi Mas Andes, Yang Kasep Mas Budi
Kalau saya, wah jangan di tanya lah,..? di jamin seram tt3tt3tt3.
keren ni mas sub menu nya, dengan tambahan menu ke samping bisa semakin ringkas tampilannya dan tolong dong kunjungannya mas di blog saya firdausquotes.blogspot.com
BalasKaya Lagu, Panturaan yah Mas, Mbak
BalasJaluk Tanggung Jawabe,..? tt3tt3tt3 Mohon
Doa Restu dari jauh Mbak Mas semua tgl 15-10-2013
Saya akan menyelenggarakan syukuran Khitanan putra pituin saya,
Walau pun seucap doa, saya mengharap barrakah nya trimaa kasih
tergantung yang digantung mas hehe...
Balasyang ini menunya beda mas nggak ada duanya hehe..
Balasiya pak lebih simple hehe..
BalasKalau mas Saud mah kece, sehat, rapi dan kasep diborong semua tt3 tt3
Balasiya mas terimakasih kunjungannya, segera silaturahmi kesitu..
Balaswalopun seucap doa tapi semoga berkah ya kang saud.. iya kang semoga acara syukuran Khitanan putranya kang saud lancar dan semoga cepet sembuh yah kang :) besok gedenya biar hoby blogging juga sama kayak ayahnya hehehe..
Balaskarena satu-satunya :)
Balasmas Anthonie kayaknya pake kaca mata juga :)
Balassemakin banyak menu horizontal nya yah mas,,keren
Balasmantap menu navigasinya euy..
Balasthanks sob atas infox, sdh diterapkan diblok ane
Balashttp://anchyumm123.blogspot.com
udah ane pasang di blog ane mas,,, thanks tutor nya... BTW kalau untuk merubah warna background nya gmna ya mas.?
Balasterima kasih atas artikelnya,
Balasidcheat.com
giribig.com
KANG, kalo mau nambah MENU 6 gimana ya ? apa yang harus ditambahkan.
Balas