Menu vertical keren dengan css

Cara membuat menu Vertkal keren dengan css

Selamat malam sobat blogger semuanya... mudah-mudahan dalam keadaan sehat dan ceria selalu ?? pastinya dong, bingung mau bikin postingan apa malam ini.. mau bikin posting mengenai bulan Ramadhan kan udah kemarin? masa bikin lagi, nanti jadi pada bosen deh teman-teman liat blog yanti isinya galau-galauan terus.. hehee :)

Membuat menu verical keren dengan css - berbagai macam menu horizontal atau vertical untuk sebuah blog.. ngomongin soal menu dalam sebuah blog ternyata penting sekali, perannya sebagai tool menuju sebuah kontent yang kita sajikan? misalnya seperti About Me, Daftar Isi blog, dan lain-lain.. dan style menunya pun bemacam-macam gaya... ada yang sederhana sampai dengan gaya yang unik dan gitu dehhh.... seperti gambar di samping ini ??

Nah !!!!
Buat sobat yang bingung mau buat menu vertikal kali ini yanti share sebuah menu vertikal yang mungkin sobat semua suka...
berikut ini cara pasangnya,

Langsung saja menuju blog sobat dan masuk ke dasbord ==>
Klik template ==> EDIT Template ==>
masukan kode di bawah ini tepat di atasnya kode ]]></b:skin> ==>

#top-menu {
position:absolute;
top:0;
background:#333;
right:27.5%;
z-index:10;
width:128px;
height:270px;
color:#999;
font:normal 11px Verdana,Arial,Sans-Serif;
box-shadow:0 5px 7px rgba(0,0,0,0.7);
border-radius:0 0 5px 5px;
transition:right .15s linear;
border-color:#444 #222 #222 #444;
border-style:solid;
border-width:1px;
margin:0 auto;
padding:10px;
}

#top-menu:after {
content:"";
display:block;
position:absolute;
top:100%;
left:20px;
border-color:#333 transparent transparent;
border-style:solid;
border-width:15px;
}

#top-menu .img-container {
border:3px double #3c3c3c;
background:transparent;
box-shadow:inset 0 0 2px rgba(0,0,0,0.4);
display:block;
margin:10px 10px 10px 10px;
padding:10px;
}
#top-menu .img-container img {
display:block;
background:#3c3c3c;
padding:5px 0;
}
#top-menu ul#step {
width:108px;
display:block;
margin:10px 10px 10px auto;
padding:0;
}

#top-menu ul#step li {
display:block;
margin:0 0 2px;
padding:0;
}

#top-menu ul#step li a {
display:block;
background:#3c3c3c;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
font:normal 8px Arial,Sans-Serif;
position:relative;
transition:all .26s ease-out;
margin:0;
padding:6px 12px;
}

#top-menu ul#step li a:before {
content:"";
width:0;
height:0;
position:absolute;
right:0;
top:0;
display:block;
border-color:transparent #333 transparent transparent;
border-style:solid;
border-width:11px;
}

#top-menu ul#step li a:hover {
transition:none;
color:white;
text-decoration:none;
padding:6px 0 6px 15px;
}

#top-menu ul#step li.satu a:hover {
background:#DC98FF;
}

#top-menu ul#step li.dua a:hover {
background:#FF5DC2;
}

#top-menu ul#step li.tiga a:hover {
background:#0186CB;
}

#top-menu ul#step li.empat a:hover {
background:#0251C9;
}
#top-menu ul#step li.lima a:hover {
background:lime;
}
#top-step ul#step li.current a {
border-left:2px solid #39f;

}

Setelah selesai pemasangannya lalu scroll sedikit kebawah ==> cari kode <body> dan letakan kode ini di bawah kode <body> tadi...

<div id="top-menu">
<div class="img-container">
<a href="http://cyber-girlss.blogspot.com/" target="_blank"><img alt="colormap" src="http://i1198.photobucket.com/albums/aa452/Lutfi14/colormap.png" /></a></div>
<ul id="step">
<li class="satu"><a href="http://cyber-girlss.blofspot.com/">Judul-1</a></li>
<li class="dua"><a href="#">Judul-2</a></li>
<li class="tiga"><a href="#">Judul-3</a></li>
<li class="empat"><a href="#">Judul-4</a></li>
<li class="lima"><a href="#">Judul-5</a></li>
</ul>
</div>

Keterangan: kode diatas yang berwarna Pink di ganti dengan URL alamat blog sobat, sesuai selera masing2.....dan yang right:27.5% adalah nilai posisi penempatan widgetnya..

48 komentar:

AnonymousJuly 17, 2013
wah ijin praktek ya gan ,, kelihatanya keren juga nih :D
UnknownJuly 17, 2013
Keren sih... Tapi ane kapan2 aja cobanya :D
Blogger 57July 17, 2013
Keren Ini di coba deh
vlog media newsJuly 18, 2013
Wah keren nih menu vertikalnya gan... izin comot ya buat praktek
AnonymousJuly 18, 2013
saya bookmark dulu sob :D belum ada waktu oprek2 template :)
Hack4rtJuly 18, 2013
ini seperti yang ada di blog dte yaa gan :D
8 Fakta Unik Gigitan NyamukJuly 20, 2013
Keren Nih boleh lah di pasang
BlogS Of HariyantoJuly 21, 2013
tutorialnya sederhana tapi sangat mudah dipahami...luarbiasa :-)
HP YitnoJuly 21, 2013
Wah ternyata nggak hanya cowok aja yang jago bikin menu kayak gini. Ternyata cewek juga nggak mau kalah. Kalau yang horizontal ane sudah pernah bikin. Kalau vertical pernah.

Ane copy dulu kodenya - siapa tahu bisa tak otak-atik sendiri hehehe
AnonymousJuly 21, 2013
mantep mbak menunya unik :) terimakasih sharenya
zigzoorJuly 21, 2013
keren sob, saya simpan tutorialnya yah, terima kasih sudah berbagi.
AnonymousJuly 21, 2013
Keren mbak ... :D Jago banget ... :D
Mang LembuJuly 21, 2013
keren dan sangat bergaya nih menu vertikalnya, cuman sayangnya ngga melayang, jadi pas nulis ini menunya ngga kliatan.
Bagus HermawanJuly 22, 2013
cantik mbak, ada foto mbak nya bikin tambah cantik :)
terima kasih infonya :)
UswahJuly 22, 2013
boleh jugaaa tp kyknya kalo sm templateku kurang nyambung :)
AnonymousJuly 22, 2013
Kodenya panjang banget, apa tidak mempengaruhi loding blog.
Rohis FacebookJuly 22, 2013
keren mbk..., makasih..,
demox yg sebelah kanan itu ya..? *smile
Djangkaru BumiJuly 22, 2013
terimakasih atas sharing ilmunya. Dengan menu vertikal akan menghemat tampilan tab nya.
UnknownJuly 22, 2013
mba aku mau nanya, gmna sih itu supaya ada results by chitika
dunia mayaJuly 22, 2013
nymak aja mb,,,
g paham beginian
Anisayu NastutikJuly 22, 2013
kalau udah masuk edit template dan harus pake
css atau html aku nyerah
karena mending bikin puisi indah
bagiku lebih mudah

hehe
Komunitas BloggerJuly 22, 2013
keren banget menu verticalnya. dengan menu vertical pengunjung gampang mencari artikel..
Stiker JalingkutJuly 22, 2013
wah bagus mbk kalu boleh kasih masukan dikit si.
lebih bagus lgi di bagian
position:absolute;top:0;
di ganti dengan
position:fixed;
top:200px;
jadi akan mengikuti kemanah kita pergi
heheheh.
coba lihat di sini mbk

bingkaiframes.blogspot.com/
Yanuar CaturJuly 23, 2013
Sebentar yah, masih bingung nihhh
Catatan Harian IrfanJuly 23, 2013
Tips nya di coba dulu yah,,,,
Bocah kampoenkJuly 23, 2013
ijin bookmark dulu gan..nanti di pratekin
AnonymousJuly 23, 2013
izin sedot kodenya ya..
Agus SetyaJuly 23, 2013
sampean kok pinter mbak, mang yono ini main sedot aja kayak wc aja disedot mang, hehe
Rizal UyeJuly 23, 2013
cara buat gambar yang dipojok itu gmn mbak?hehe
RawinsJuly 23, 2013
aku ga berani utak atik templet
suka error...
BlogS Of HariyantoJuly 24, 2013
hadir lagi buat belajar bikin menu yang super keren ini... :-)
artikelseoJuly 24, 2013
knjungan pagi mbak...sambil nyimak dan thanks tutornya
Hendra HaccJuly 24, 2013
Keren n cantik kek yg punya blog. :)
Thanks tutorialnya, ntar ane oprek2 blog dummy..
JockerJuly 24, 2013
boleh dicoba untuk dipratinjau dulu ya :)
Sahabat KudhenJuly 27, 2013
keereeenn mbak... kpn2 ak cb ah.. hehe
AnonymousJuly 28, 2013
keren nih mbak pengen nyoba jadinya, makasih yah buat tutorialnya saya save dulu :)
Wahyu Eka PrasetiyariniAugust 20, 2013
terimakasih banyak mbak atas tutorialnya. akan saya praktekkan biar blog saya bisa keren seperti blog anda :)
Wahyu Eka PrasetiyariniAugust 25, 2013
nampaknya ini mirip menu drop down ya mbak? kalau misal kita arahkan kursor mouse ke menu utama, maka akan muncul sub menu lagi :) Thanks ya atas panduannya :)
ppobJanuary 23, 2014
keren-keren tipznya, di tunggu update info lainnya gan...!!!
rido adyFebruary 02, 2014
mantep pokok a :D
http://najhera.blogspot.com/
AnonymousFebruary 12, 2014
cantik(yg bikin):)