A combination of CSS and JS drop-down menu to support the mainstream browser

Source: Internet
Author: User
Tags html page

First declare:

Although I have been working on the front end of the web for many years, the technical requirements of the post are not high. Html,css used more, javascript their original little, basically copy modified, so they really do write, found that the foundation is very weak, while learning and practice, the harvest is great.

Effect Chart:

No, it's a bit of a sticker.

1, CSS Code

The

code is as follows:


A:link{color:white;text-decoration:none;}


A:visited{color:white;text-decorative:none;}


A:hover{color:white;text-decorative:none;}


A:active{color:white;text-decorative:none;}


li{float:left;display:inline;background-color: #003366; width:120px;text-align:center;margin:2px;padding : 10px 0 5px 0;position:relative;}


. Limouseover{background-color: #0033ff; color:red;}


. Limouseout{background-color: #003366; color:black;}


Li ul{display:none;width:120px;position:absolute;left:0;top:30px;}


Li ul li{margin:0px auto;border-top:1px solid #006699;}

2. JavaScript code

The

code is as follows:


<script language=javascript>


function Menu (menu1) {


//mouse move in and out of classname Toggle and submenu hide, show toggle.


if (document.getElementById (menu1)) {


var Menu_ul=document.getelementbyid (menu1);


if (menu_ul.getelementsbytagname ("Li"). Length) {


var menu_li=menu_ul.getelementsbytagname ("Li");


for (i in Menu_li) {


menu_li[i].onmouseover=function () {this.classname= "Limouseover"; if (This.getelementsbytagname ("ul"). Length) { This.getelementsbytagname ("ul") [0].style.display= "Block";}}


menu_li[i].onmouseout=function () {this.classname= "limouseout"; if (This.getelementsbytagname ("ul"). Length) { This.getelementsbytagname ("ul") [0].style.display= "None";}}


}


}


}


}





</script>

3, HTML code

The

code is as follows:


<ul id=menu1>


<li><a href= "" > Home </a></li>


<li><a href= "" > Menu 1 Menu 1</a>


<ul>


<li><a href= "" > Submenu 1 Submenu 1 submenu 1 Sub-menu 1</a></li>


<li><a href= "" > submenu 2</a></li>


</ul>


</li>


<li><a href= "" > Menu 2</a>


<ul>


<li><a href= "" > Submenu 1 Submenu 1 submenu 1 Sub-menu 1</a></li>


<li><a href= "" > submenu 2</a></li>


</ul>


</li>


</ul>


<script>var menu1=new Menu ("menu1");</script>

Description

1, taking into account the UL and Li pages used more, you can add #menu1 before the CSS to the menu to limit the scope of the style.

2, JS is the main mouse to move in and remove the event to listen, corresponding to switch to Limouseover and limouseout style, and the display properties of the submenu to make changes to show hidden features.

3, the same page can be repeated calls, does not conflict, the JavaScript code in the HTML code is the invocation instance, the front menu1 is any variable name, the menu1 in parentheses is the ID in the HTML page.

The disadvantage of this example:

1, the menu Li MouseOver, mouseout and submenu Li style, that is, the same color and font, does not implement a separate setting.

2, because to be compatible with IE6 and IE7, so the use of position:absolute at the same time, added left and top properties, top to be based on the menu Li's overall height set.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.