Posted by Unknown
Selasa, 10 Juli 2012
Agenliga Sebagai Agen Bola Online Untuk Euro 2012 | Fairbet88.com dukung fairplay EURO 2012 | 988BET Agen Bola Untuk Prediksi Piala Eropa 2012
On occasion this time I will explain how to create and install a multi-level css dropdown menu. This is a multi level dropdown / flyout menu from CSSPlay.This four level dropdown/flyout menu should work in most browsers. Atab with small caps indicates it has upper level/levels. Adropdown/flyout will appear when you hover the tab.
The HTML
Below is theHTML code for the menu. You want to copy the HTML and paste it into aHTML/Javascript gadget. Then reposition the gadget below the header.If you don’t know how to add a page element under the header then Isuggest you read Creating navigation or menu tabs in Blogger first.
004
| < li class = "level1-li" >< a class = "level1-a" href = "#url" >Home</ a ></ li >
|
005
| < li class = "level1-li" >< a class = "level1-a fly" href = "#url" >Contact Us </ a >
|
008
| < li >< a href = "#url" >Email</ a ></ li >
|
009
| < li >< a href = "#url" >Telephone</ a ></ li >
|
010
| < li >< a href = "#url" >Online Form</ a ></ li >
|
011
| < li >< a href = "#url" >Snail Mail Address</ a ></ li >
|
014
| < li class = "level1-li" >< a class = "level1-a fly" href = "#url" >Resort </ a >
|
017
| < li >< a href = "#url" >Ski Hire Facilities</ a ></ li >
|
018
| < li >< a class = "fly" href = "#url" >Main Ski Slopes </ a >
|
021
| < li >< a href = "#url" >Beginners Slopes</ a ></ li >
|
022
| < li >< a href = "#url" >Intermediate Slopes</ a ></ li >
|
023
| < li >< a class = "fly" href = "#url" >Advanced Skill Levels </ a >
|
026
| < li >< a href = "#url" >Local</ a ></ li >
|
027
| < li >< a href = "#url" >Nearby</ a ></ li >
|
028
| < li >< a href = "#url" >With instructor</ a ></ li >
|
029
| < li >< a href = "#url" >Snow boarding</ a ></ li >
|
032
| < li >< a href = "#url" >Expert</ a ></ li >
|
035
| < li >< a href = "#url" >Night Life</ a ></ li >
|
036
| < li >< a class = "fly" href = "#url" >Restaurants </ a >
|
039
| < li >< a href = "#url" >Snow Hotel</ a ></ li >
|
040
| < li >< a href = "#url" >The Snowman</ a ></ li >
|
041
| < li >< a href = "#url" >Ice Cavern</ a ></ li >
|
042
| < li >< a href = "#url" >Ski Inn</ a ></ li >
|
045
| < li >< a class = "fly" href = "#url" >Car Hire </ a >
|
048
| < li >< a href = "#url" >From Airport</ a ></ li >
|
049
| < li >< a href = "#url" >In Resort</ a ></ li >
|
050
| < li >< a href = "#url" >Multiple Resorts</ a ></ li >
|
055
| < li class = "level1-li" >< a class = "level1-a fly" href = "#url" >Surrounding Area </ a >
|
058
| < li >< a href = "#url" >Where to go</ a ></ li >
|
059
| < li >< a href = "#url" >What to do</ a ></ li >
|
060
| < li >< a href = "#url" >Places of interest</ a ></ li >
|
061
| < li >< a href = "#url" >National parks & Museums</ a ></ li >
|
064
| < li class = "level1-li left" >< a class = "level1-a fly" href = "#url" >Information </ a >
|
067
| < li >< a href = "#url" >Money Exchange</ a ></ li >
|
068
| < li >< a class = "fly" href = "#url" >Resort Essential Information </ a >
|
071
| < li >< a href = "#url" >Lift Passes</ a ></ li >
|
072
| < li >< a href = "#url" >Insurance</ a ></ li >
|
073
| < li >< a class = "fly" href = "#url" >Gear Rental </ a >
|
076
| < li >< a href = "#url" >Boots</ a ></ li >
|
077
| < li >< a href = "#url" >Skis</ a ></ li >
|
078
| < li >< a href = "#url" >Ski Wear</ a ></ li >
|
079
| < li >< a href = "#url" >Goggles</ a ></ li >
|
082
| < li >< a href = "#url" >Ski Schools</ a ></ li >
|
083
| < li >< a href = "#url" >Snow Report</ a ></ li >
|
086
| < li >< a class = "fly" href = "#url" >Language </ a >
|
089
| < li >< a href = "#url" >Austrian</ a ></ li >
|
090
| < li >< a href = "#url" >German</ a ></ li >
|
091
| < li >< a href = "#url" >French</ a ></ li >
|
092
| < li >< a href = "#url" >English</ a ></ li >
|
095
| < li >< a href = "#url" >Short Breaks</ a ></ li >
|
098
| < li class = "level1-li" >< a class = "level1-a" href = "#url" >Privacy</ a ></ li >
|
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.
05
| #menu { width : 740px ; background : #3aa3d3 ; height : 25px ;; text-align : center ; position : relative ; z-index : 500 ;}
|
06
| #menu ul { margin : 0 ; padding : 0 ; list-style : none ; white-space : nowrap ; text-align : left ;}
|
07
| #menu ul { display :inline- block ;}
|
08
| #menu li { margin : 0 ; padding : 0 ; list-style : none ;}
|
09
| #menu li { display :inline- block ; display : inline ;}
|
10
| #menu ul ul { position : absolute ; left : -9999px ;}
|
11
| #menu ul.level 1 { margin : 0 auto ; background : #710 ;}
|
12
| #menu ul.level 1 li.level 1 -li { float : left ; display : block ; position : relative ;}
|
13
| #menu ul.level 1 { background : #3aa3d3 ;}
|
14
| #menu ul.level 2 { background : #ae4621 ;}
|
15
| #menu ul.level 3 { background : #c98b14 ;}
|
16
| #menu ul.level 4 { background : #9f690e ;}
|
17
| #menu b { position : absolute ;}
|
18
| #menu a { display : block ; font : normal 11px verdana , arial , sans-serif ; color : #fff ; line-height : 25px ; text-decoration : none ; padding : 0 20px 0 10px ;}
|
19
| #menu ul.level 1 li.level 1 -li a.level 1 -a { float : left ;}
|
20
| #menu ul li:hover > ul { visibility : visible ; left : 0 ; top : 25px ;}
|
21
| #menu ul ul li:hover > ul { visibility : visible ; left : 100% ; top : auto ; margin-top : -25px ;}
|
22
| #menu li. left :hover > ul { visibility : visible ; left : auto ; right : 0 ; top : 25px ;}
|
23
| #menu li. left ul li:hover > ul { visibility : visible ; left : auto ; right : 100% ; top : auto ; margin-top : -25px ;}
|
24
| #menu a:hover ul { left : 0 ; top : 23px ;}
|
25
| #menu li. left a:hover ul { left : auto ; right : -1px ; top : 23px ;}
|
26
| #menu li. left ul a { text-align : right ; padding : 0 10px 0 20px ;}
|
27
| #menu a:hover a:hover ul,
|
28
| #menu a:hover a:hover a:hover ul { left : 100% ; visibility : visible ;}
|
29
| #menu li. left a:hover a:hover ul,
|
30
| #menu li. left a:hover a:hover a:hover ul { left : auto ; right : 0 ; visibility : visible ;}
|
32
| #menu a:hover a:hover ul ul { left : -9999px ;}
|
33
| #menu li. left a:hover ul ul,
|
34
| #menu li. left a:hover a:hover ul ul { left : -9999px ;}
|
35
| #menu li a.fly { font-variant : small-caps ;}
|
36
| #menu li. left ul a.fly { font-variant : small-caps ;}
|
38
| #menu li a.fly:hover { background-color : #555555 ;}
|
40
| #menu ul li:hover > a.fly { background-color : #555555 ;}
|
41
| #menu table { position : absolute ; height : 0 ; width : 0 ; left : 0 ; border-collapse : collapse ; margin-top : -4px ;}
|
42
| #menu table table { position : absolute ; left : 99% ; height : 0 ; width : 0 ; border-collapse : collapse ; margin-top : -29px ;}
|
43
| #menu li. left table { position : absolute ; height : 0 ; width : 0 ; left : auto ; right : 0 ; border-collapse : collapse ; margin-top : -4px ;}
|
44
| #menu li. left table table { position : absolute ; left : auto ; right : 100% ; height : 0 ; width : 0 ; border-collapse : collapse ; margin-top : -29px ;}
|
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
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.