Selasa, 17 November 2009

Install Multi Level CSS Dropdown Menu

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!

Tidak ada komentar:

Posting Komentar