Membuat Menu Vertikal Sederhana

MenuSebelumnya saya selalu menulis mengenai pembuatan menu horizontal dan tidak pernah sekalipun menulis artikel menu vertikal. Pembuatan menu vertikal ini sangat mudah, hanya sedikit menambahkan kode css pada bagian template dan kode html pada sidebar. Bisanya kita yang malas berpikir untuk membuat menu vertikal, mengambil jalan mudah dengan menambahkan kode <ul><li> sehingga yang muncul adalah list-style-type bawaan template.

 

Untuk demo bisa sobat lihat disini, pada bagian menu vertikal tersebut saya menggunakan image sederhana yang hanya akan berwarna biru jika cursor menyorot pada link. Bisa saja membuat current page hover pada link, yang jika di klik akan selamanya berwarna biru selama kita berada pada halaman link tersebut, namun untuk awalnya sebaiknya menggunakan menu yang sederhana dulu. smile_teeth

  1. Masuk ke bagian Edit HTML
  2. Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

    .clearit {
        margin: 0;
        padding: 0;
        height: 0;
        clear: both;
    }

     

    /* BUBBLE PLASTIC VERTICAL MENU */

    .bubplastic.vertical {
        width: 150px;
        margin: 0px;
        padding: 0px;
        display: block;
    }
    .bubplastic.vertical ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .bubplastic.vertical ul li {
        display: block;
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
    }

    .bubplastic.vertical ul li a {
        display: block;
        margin: 0;
        width: 100%;
        padding-left: 15px;
        text-transform: uppercase;
        font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
        font-size: 70%;
        color: #FFFFFF;
        text-decoration: none;
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
    }

    .bubplastic.vertical ul li a span.menu_ar {
        display: block;
        margin: 0;
        width: 100%;
        height: 22px;
        padding-top: 5px;
        padding-right: 15px;
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top right no-repeat;
        cursor: pointer;
    }

    /* BLUE HOVER */
    .bubplastic.blue ul li a:hover,
    .bubplastic.blue ul li.highlight a {
        background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top left no-repeat;
    }
    .bubplastic.blue ul li a:hover span.menu_ar,
    .bubplastic.blue ul li.highlight a span.menu_ar {
        background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top right no-repeat;
    }

  3. Simpan Template.
  4. Masuk Ke Elemen Halaman.
  5. Klik Tambah Gadget pada bagian sidebar.
  6. Pilih yang HTML/Javascript, kemudian masukkan kode berikut kedalamnya :

    <div class="menu bubplastic vertical blue">
        <ul>
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">About</span></a></span></li>
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Advertiser</span></a></span></li>
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Banner</span></a></span></li>
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Link</span></a></span></li>
        </ul>
        <br class="clearit" />
    </div>

  7. Simpan.

 

Yang harus diganti adalah tulisan yang berwarna hijau dan merah. Selamat mencoba !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

11 comments

26 Juni 2010 10.50

Aku lebih senang nav yang horizontal aja lah, soalnya udah biasa ^_^
Tapi kalo yg vertikal sih boleh dicoba, biar ngga ada yg nyamain, kan kalo yg horizontal banyak banget yg make ^_^ Sip lah . .

Mampir

30 Juni 2010 15.38

Makasih infonya ya!
menunya udah aku pake tuh, liat ya!

16 Juli 2010 21.52

thanks mas buat infonya,,klo perlu skalian sm yg bntuk horizontalnya,,,

29 Juli 2010 13.11

Daftar isi»

Mas kalo mau masukin script kya begitu di menu vertikal gimana, soalnya aku mau bikin daftar isi.
di menu vertikal. tolong di kasih tau scriptnya. soalnya saya masih newbie.mohon peneranganya. Thanks

27 Oktober 2010 11.38

mampir di blog aq yah

20 Januari 2011 20.25

Gan kalau mo bikin menu yang kayak di tempat agan tu gimana? yang sebelah kanan "tutoria, template, top komentar"...

makasih gan sbelumnya...

24 April 2011 20.25

ikut nggunain bro di blogku..
Klo ngasih jarak antar menunya ditambahin apa bro ? yang sekarang kan antar menu vertikalnya berdempetan (ga da jarak).
(mampir bro diblogku)-->www.pelatihan-kursus-plc.blogspot.com
email ke aku ya caranya ngasih jarak antar menu vertikalnya.. ( nng_hermawanto@yahoo.com)

thanks b4..

6 Oktober 2011 09.00

Thanks mas doddy.. Kawan, saling kunjung dan follow ya.. www.agusmunawar.co.cc

23 Mei 2012 13.56

thx infonya mas... sayang aku ngga ngerti... (masih beginner banget)

2 Juni 2012 21.53

makasih informasinya, sangat bermanfaat untuk yang belum membuat

22 Juni 2012 07.13

Baru saja aku buka demonya, keren banget hasilnya ni :)

Poskan Komentar

Reader Community

Recent Comments