Membuat Lebar Sub Menu Full - Width 100%

Posted: 22 Aug 2013 07:29 AM PDT

Full Width Sub Menu - Selamat malam blogger, kali ini saya kana bagi-bagi modifikasi menu full width. Dengan CSS ini, kita akan bisa membuat lebar sub menu full menyesuaikan lebar keseluruhan navigasi. Jika biasanya lebar submenu mengikuti, menu di atasnya, maka kali ini lebarnya mengikuti lebar navigasi. Perbedaannya ada pada gambar berikut ini:

Navigasi biasa tidak full width

Navigasi submenu full-width

Nah, untuk membuatnya sangat mudah. Tutorialnya kapan-kapan, sekarang langsung saya bagi yang sudah mateng saja ya :D.

Berikut CSS nya, silahkan Anda tambahkan di atas ]]></b:skin>
#primary-nav {margin: auto;text-align: center;width: 780px;position:relative;}
#primary-nav ul {font-size: 11px;list-style: none outside none;margin: 0;padding: 0;}
#primary-nav ul a {color: #000;font-family: arial black;text-transform: uppercase;}
#primary-nav ul li {float: left;height: 20px;margin-top: 5px;padding-bottom: 0;padding-left: 0;padding-right: 0;z-index: 40;}
#primary-nav ul li:hover {visibility: inherit;background: none repeat scroll 0 0 #FFFFFF;}
#primary-nav ul ul {position: absolute;width: 250px;}
#primary-nav ul ul li {border-bottom: 1px solid #CCCCCC;float: left;margin-right: 10px;text-align: left;width: 250px;}
#primary-nav ul li:hover ul, #primary-nav ul li.sfHover ul {left: -1px;top: 36px;z-index: 99;}
#primary-nav ul a {color: #000;margin: 0;padding-left: 10px;padding-right: 10px;}
#primary-nav ul a:hover {color: #000;}
#primary-nav ul ul {background: none repeat scroll 0 0 #FFFFFF;padding-bottom: 5px;padding-left: 8px;left: 0;margin-top: -13px;right: 0;top: -9999em;width: 100%;}
#primary-nav ul ul li {background: none repeat scroll 0 0 #FFFFFF;float: left;height: 20px;}
#primary-nav ul ul li:hover {background: #000;color: #ffffff;}
#primary-nav ul ul a:hover {color: #fff;}
#primary-nav ul ul li:last-child {border-bottom: medium none;}

Dan berikut HTML nya, silahkan Anda letakkan di bagian yang Anda suka dari template Anda. Atau cara mudahnya silahkan tambahkan ke dalam GADGET HTML (Tata Letak > Add Gadget > HTML Gadget)
<div id="primary-nav">
<ul>
<li><a href="#">Menu1</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul></li>
<li><a href="#">Menu2</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul></li>
<li><a href="#">Menu3</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul></li>
</ul>
</div>

Selamat Mencoba. Semoga berhasil.

Item Description: Membuat Lebar Sub Menu Full - Width 100%

CSS Khusus Halaman Yang Sedang Dikunjungi - Menubar

Posted: 21 Aug 2013 11:58 PM PDT

CSS Khusus Highlight Current Menu - Sudah lama sekali di blog ini pernah di posting effect serupa, kalau nggak salah dulu tulisan dari Kang Deny OBLO. Modifikasi ini memungkinkan tombol pada menu bar untuk halaman yang sedang dikunjungi berbeda gaya. Jadi, ya menimbulkan kesan berbeda saja, sehingga orang sadar di mana dia berada di blog kita. Untuk lebih mudahnya lihat saja gambar:

Seperti pada gambar. Di blog ini misalnya, ketika Anda berada pada halaman hasil cari, maka otomatis tombol Search akan berwarna biru, dan saya tambahkan css yang men-disable tombol tersebut agar tidak bisa di klik. Begitu juga pada halaman-halaman lain. Coba klik menu-menu pada bagian bawah (pemula, info, testimony, dll) yang semuanya terintegrasi dengan CSS highlight current menubar.

Cara lama yang dulu pernah saya posting adalah dengan memanfaatkan rumus kondisional (baca: Penampilan Widget Tertentu Pada Halaman Tertentu), dan kali ini sedikit lebih simple, karena kita hanya bermain sedikit HTML dan CSS.

1. Tambahkan Class Pada <li> Menubar Anda
Misalkan beberapa baris kode menubar Anda:
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>

tambahkan class pada <li> menjadi:

<li class="homepage"><a href="#">Home</a></li>
<li class="aboutpage"><a href="#">About</a></li>
<li class="contactpage"><a href="#">Contact</a></li>

*class harus unik dan berbeda untuk masing-masing menu.
*# adalah alamat laman/postingan

2. Tambahkan Id Pada Halaman-halaman
Karena tidak menggunakan rumus kondisional pada template, maka kita tambahkan ID khusus pada postingannya langsung. Edit saja laman About Anda kemudian pada mode pengeposan HTML, tambahkan kode berikut ini di barisan paling bawah.

<body id="aboutpage">

Begitu juga untuk halaman lain, berikan id khusus. Misal Pada halaman contact maka, <body id="contactpage">

3.Tambahkan CSS Khusus Pada Template
Langkah terakhir adalah dengan menambahkan CSS khusus pada template. Letakkan CSS berikut ini di atas ]]></b:skin>

#homepage .homepage, #contactpage .contactpage, #aboutpage .aboutpage {
background:#4C77B6;
pointer-events: none;
cursor: default;}

*yang didahului # adalah id halaman, yang didahului . adalah class <li>
*pointer-events: none; adalah CSS untuk mematikan pointer. Jadi link tidak bisa di klik.

Kemudian SAVE Template Anda.

4. Kondisional Home Page
Sampai langkah ketiga, maka effect hihglight current sudah akan bekerja untuk masing-masing postingan yang di atur, namun tidak akan bekerja untuk homepage. Agar pada homepage juga bekerja, tambahkan kode berikut ini di atas </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'><body id='home'/></b:if>

Simpan Template. Semoga bermanfaat.

Item Info: Highlight Current Menu

KARANGLO BLOGSPOT.COM

Jumat, 23 Agustus 2013

Membuat Lebar Sub Menu Full - Width 100% - THEMASDOYOK.COM

Membuat Lebar Sub Menu Full - Width 100% - THEMASDOYOK.COM

Tidak ada komentar:

Posting Komentar