Menunggu...

Membuat Menu Vertikal Cantik Dengan CSS3

Membuat Menu Vertikal Cantik Dengan CSS3
Selalu kurang puas dan selalu saja ingin menciptakan hal yang baru khususnya urusan penampilan pada blog kita.
Kali ini blogger pemula ingin berbagi tips cara membuat menu vertikal cantik dengan CSS3, jika sobat tertarik ingin mencobanya silahkan sobat simak artikel ini secara baik dan benar agar hasilnya sesuai dengan keinginan.

Untuk demo penampilanya sobat bisa lihat gambar disamping, hasilnya kurang lebih sama persis seperti gambar di artikel ini, mohon maaf sebelumnya karena halaman live demonya belum ada, :) (belum dibuat,hehe..)

Berikut langkah-langkah cara membuat menu vertikal cantik dengan CSS3 yang bisa sobat terapkan :
  • Login ke Akun Blogger
  • Masuk ke pengaturan template
  • Klik Edit HTML
  • Cari kode seperti dibawah ini ]]></b:skin>
  • Letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

*{
/* A universal CSS reset */
margin:0;
padding:0;
}
body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url('http://i785.photobucket.com/albums/yy131/djnand/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

  • Langkah selanjutnya cari kode <body>
  • Letakkan kode HTML dibawah ini setelah kode <body>

<ul id="navigationMenu">
<li>
<a class="home" href="#">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#">
<span>Contact us</span>
</a>
</li>
</ul>

  • Terakhir simpan template dan lihat hasilnya....


Catatan :
  1. Link warna merah bisa tidak digunakan jika sobat bisa membuat efek yang menyerupai gambar tersebut agar tutorial ini pure CSS3
  2. Warna orange bisa sobat ganti sesuai kebutuhan
  3. Warna biru silahkan sobat ganti dengan URL tujuan (biasanya halaman statis)
  4. Silahkan berkreasi sendiri dengan merubah warna dan ukuran sesuai kebutuhan
Semoga artikel tentang cara membuat menu vertikal cantik dengan CSS3 ini bermanfaat..
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 47 komentar:

avatar

benar-benar cantik mas x-)

avatar

hehe lumayan kang... :)

avatar

jadi lebih keren ya kalo dipoles sama CSS hehe :)

avatar

bener-bener keren ya mas menu vertikalnya, tapi saya kok jarang banget ya lihat menu seperti itu hehe :D

oh iya mohon capcha nya disuruh cuti aja mas kalau bisa, soalnya cukup merepotkan dan menyulitkan juga untuk komentar di blog yang keren ini :)

avatar

Justru karena jarang sist jadi kesanya tidak pasaran, hehe :d
hmmm nanti dipertimbangkan,terimakasih untuk saranya...

avatar

mantap mas artikelnya,
saya yang sering buat menu horizontal,
izin follow blognya ya!

avatar

Keren nih kalo pake css.. Cuma loadingnya jadi lebih berat enggak ya

avatar

Terimaksih, silahkan sahabat Meutrap :) :d

avatar

Setiap penambahan css maupun javascript pada blog pasti akan berpengaruh sedikit banyaknya pada loading, tergantung selera.. salam sahabat :d

avatar

Kodenya panjang juga ya mas...tapi sesuai sih dengan ngelihat hasil tampilannya yg bener cantik :)

avatar

cantik..! makasih :)

avatar

Lumayan panjang sob tapi tidak sepanjang kereta kok, hehee :d

avatar

wah keren ini mas, pastinya membuat tampilan blog kita jadi lebih cantik...jadi pengen menerapkannya di blog saya

avatar

warna menunya tampak keren sekali.

avatar

kalau aku ganteng :)

avatar

mudah-mudahan adminnya nggak ikut cantik ya kang hehe :D

avatar

jarang putih atau jarang yang lain mas hehe :D
Thanks mas capchanya sudah berhaasil dicuti :)

avatar

kayaknya lebih panjang rel nya dech daripada keretanya hehehe :D

avatar

Yang cantik admin nya atau menu nya nich? kalau admin nya bisa bahaya ya mas hehe :D

avatar

Artikel ini juga sudah lama saya cari cari; Selama ini saya sering menggunakan menu HORIZONTAL yang berjejer ke bawah (Drop down menu). Manual aja sih kayaknya,. Jarang pake CSS seperti ini. Senangnya main di EDIT HTML aja lalu nambahkan kodenya untik menjadi drop down menu. Saya akan coba dulu di blog UJI COBA saya. Kalau sukses baru akan saya teruskan kepada blog yang aseli saya punya. Thanks ya

avatar

Keren banget infonya mas,,, tapi lumayan banyak scriptnya ya mas?
Hmmm.... ntar saya coba dech utk mempercantik blog saya membuat menu vertikal cantik dgn CSS3.
Makasih nice sharenya x-)

avatar

Seratus buat mbak Rin :)

avatar

kurang banyak mas wkwkwk :D

avatar

Dengan adanya menu vertikal ini di blog paling-tidak bisa memperkeren tampilan blog kita. Karena lain daripada yang lain menu ini ya mas. :)

avatar

Mantap kang tutorial nya lengkap bagua buat referensi

avatar

keren gan tutornya

avatar

Tambahin deh 2,5 kg :-d

avatar

Wah bisa hancur dunia persilatan sist.. =p~

avatar

Sepertinya agan ini kolektor blog yah? :d hehe tapi memang harus seperti itu sih untuk mencegah kesalahan fatal pada blog utama kita..

avatar

Silahkan mba indri untuk kodenya memang agak sedikit banyak, tapi tak apalah demi sebuah penampilan heheee..

avatar

Ya sist kebanyakan dari kita memakai yang horisontal makanya saya dapat ide untuk mengangkat postingan yang berbeda ini

avatar

Terimakasih sahabat Walidin :)

avatar

jarang putih cheer

avatar

sayang bgt, ilmu css ku blm sempurna sob, masih ragu mencobanya

avatar

Kita bisa belajar kan? saya sendiri belum menguasai sepenuhnya sahabat Penghuni60 :d

avatar

Menu vertikalnya bener-bener keren mas bro, kalo pake menu vertikal seperti nie pasti tampilan blog akan semakin menarik ya mas, pengen nyobain ah mudah-mudahan berhasil :)

avatar

Mas adjie sukanya yang panjang-panjang mas bud hehehe :D

avatar

Yang penting adminya gak ikut-ikutan cantik.. :d

avatar

Ya silahkan dicoba sahabat Marnes,, mudah-mudahan berhasil

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda