Install Multi Level CSS Dropdown Menu

Posted by Jhon Erikz Selasa, 10 Juli 2012 0 komentar

Agenliga Sebagai Agen Bola Online Untuk Euro 2012 | Fairbet88.com dukung fairplay EURO 2012 | 988BET Agen Bola Untuk Prediksi Piala Eropa 2012


dropdown menu

Asyou can see, the dropdown menu is made up of unordered lists (ul) andlist items (li). The menu bar (and columns in dropdown) are made up ofunordered list and the tabs are made up of list items.
Replace the tab texts and link urls with your own. You may delete or add submenus (up to 4 levels) and tabs.

  • A menu bar/column starts with <ul> and ends with </ul>.
  • A tab starts with <li> and ends with </li>.
Makesure you add/remove the relevant code completely i.e. starting from theopening tag until closing tag. Do the changes carefully.
Thestyling is done using CSS (Cascading Style Sheet). The thing that linksHTML and CSS is classes that are added inside HTML tags.
The class names used in this project are explained below. Please follow the class names when making changes to the menu.


Class name
Description
level1
Used in level 1 ul tag
level2
Used in level 2 ul tag
level3
Used in level 3 ul tag
level4
Used in level 4 ul tag
level1-li
Used in level 1 li tag with right or no dropdown
level1-li left
Used in level 1 li tag with left dropdown
level1-a
Used in level 1 li a tag for tabs with no dropdown
level1-a fly
Used in level 1 li a tag for tabs with dropdown
fly
Used in li a tag for tabs (other than level 1)with flyout
 

The CSS
Copy and paste the code below right before ]]></b:skin> line in your template code.

Change the width in line 5 to match your header width.
To change the background color of each level, simply replace the color hex code in lines 13 to 16  with new ones.
I use small caps on tabs with upper levels, you can change that in line 35 and 36.


Good luck!

Install Multi Level CSS Dropdown Menu

Judul: Install Multi Level CSS Dropdown Menu
Ditulis oleh Jhon Erikz
Rating Blog: 5
Semoga artikel Install Multi Level CSS Dropdown Menu dapat bermanfaat bagi Anda. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://smart-best-info.blogspot.com/2009/11/install-multi-level-css-dropdown-menu.html. Terima kasih sudah singgah untuk membaca artikel ini, semoga Anda sehat selalu.