The drop-down menu is often encountered in my development, but no project needs to be re-written. Although it is simple but very troublesome to modify it, I am still relatively lazy. Today I have time to organize the menus in my previous project development and write a general version. I won’t need to be so troublesome in the future.
Features
The menu compiled today is developed by jquery+css with the following characteristics:
1. Strong versatility
There was a problem with a drop-down menu I used before, and the main navigation and submenu need to be set separately. For example, the second-level menu is class="first_menu", the third-level menu is class="second_menu"... and so on. There is a problem with this writing method, which is that it is not conducive to programmers performing loop output. This menu only needs to introduce a CSS style, without the need to define a multi-level menu.
2. Beautiful automatic call pull-down instructions
In the past, we would add a drop-down class to the drop-down menu manually. Now, we only need to define the style of the drop-down effect in the css, and the code will automatically look for the drop-down menu and add indicator arrows;
3. Simple call
The programmer output list is simple and does not require much judgment, just call the menu data recursively.
accomplish
1. HTML code
First, we output menu data on the page, which consists of ul and li to form a menu list. The specific structure code is as follows:
<ul> <li><a href="#">Home</a></li> <li><a href="#">Menu One</a> <ul> <li><a href="#">Rock Coaster</a></li> <li><a href="#">Volcanic Eruption</a></li> <li><a href="#">Little Bird</a></li> </li> </li> <li><a href="#">Menu Two</a> <ul> <li><a href="#">About Us</a> <ul> <li><a href="#">Geographical Geo</a> <ul> <li><a href="#">Flying Pigeon</a></li> <li><a href="#">Birth and Eternal</a></li> <li><a href="#"> href="#">Successful</a></li> </li> </li> <li><a href="#">Database</a> <ul> <li><a href="#">Database table</a></li> <li><a href="#">Data encryption</a></li> <li><a href="#">Data modeling</a></li> </li> </li> <li><a href="#">C camera</a></li> </li> </li> </li> <li><a href="#">Test products</a></li> </li></ul>
Some basic html codes are simple and do not need to explain the meaning of the code. They emphasize the code structure: whether the second level, third level or several level menus are mainly nested ul; the style sheet name is also very single, and the submenu is the "sub_menu" style, which is very conducive to program code loop calls.
2. CSS style
The Css style code is also very simple, the specific code is as follows:
a { text-decoration:none; }ul, li { list-style:none; margin:0; padding:0; }/*Definition menu*/.Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }.Menue li a { color:#fff; font-size:14px; display:block; }/* drop-down menu style*/ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }.Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }.Menue li ul.sub_menu li.last { border-bottom:none; } /*js will add this class to the last li, remove the border-bottom effect*/.Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now { background:#f90;color:#fff;}.Menue li.now,.Menue li.current { background:#f60;color:#fff;}/*If there is a class added by the drop-down menu*/.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*The main navigation arrow is down*/.Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*The drop-down menu arrow is right*/.Menue li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}.Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top;}.Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#ffff;}Here I will only emphasize two precautions:
1. The difference between absolute and relative in position
absolute: absolute positioning, CSS is written as " position: absolute; ", and its positioning is divided into two situations, as follows:
A. If Top, Right, Bottom, and Left are not set, the default is to the original point based on the parent's "content area original point".
B. There are cases where Top, Right, Bottom, and Left are set. There are two situations as follows:
(1). The parent has no position attribute, and the upper left corner of the browser (i.e. Body) is positioned as the "original coordinate point". The position is determined by the Top, Right, Bottom, and Left attributes.
(2). The parent has a position attribute, and the parent's "coordinate original point" is the original point.
relative: relative positioning, CSS is written as "position: relative;", referring to the parent's "content area original point" as the original point, and without a parent, the Body's "content area original point" as the original point. The position is determined by the Top, Right, Bottom, and Left attributes, and it has the function of "stretching or occupying height".
The above two differences are very important and are a very common technique. You must distinguish them. I have wasted a lot of time in development and found problems. In fact, it is caused by these two attributes.
2. Use background-position
Sometimes, in order to improve the speed of the website and facilitate website management, we often place some commonly used small pictures on a large picture. When css needs corresponding small pictures, it can be achieved through this method. As long as we understand what it means, it is very convenient to call. This method explains that the white dot is the image interception function. The usage details are as follows:
grammar:
background-position : length || length
background-position : position || position
Value:
length : Percent | The length value consisting of floating point numbers and unit identifiers.
position :top | center | bottom | left | center | right
illustrate:
Sets or retrieves the object's background image location. The background-image property must be specified first. This attribute positioning is not affected by the object's patch attribute ( padding ) settings. The default value is: 0% 0%. At this time, the background image will be positioned in the upper left corner of the content area where the object does not include patches (padding). If only one value is specified, the value will be used for the horizontal coordinates. The ordinate will default to 50%. If two values are specified, the second value is used for the ordinate. If the value is set to right center , since right as the horizontal axis value will override the center value, the background image will be positioned to the right. Here are some equations
top left, left top is equivalent to 0% 0%.
top, top center, center top is equivalent to 50% 0%.
right top, top right is equivalent to 100% 0%.
left, left center, center left is equivalent to 0% 50%.
Center, center center is equivalent to 50% 50%.
right, right center, center right is equivalent to 100% 50%.
bottom left, left bottom is equivalent to 0% 100%.
bottom, bottom center, center bottom is equivalent to 50% 100%.
bottom right, right bottom is equivalent to 100% 100%
3. JS code
This menu is based on jquery, so first you must introduce the jquery code base, and then write the following JS code to implement the drop-down menu.
<script src="js/jquery.min.js"></script><script>$(document).ready(function(){ //Set default highlighting for navigation has nothing to do with this menu$("ul.Menue li.Menue_li:eq(0)").addClass("current") /*jquery menu Start*/ //Add style for the last li of the submenu, suitable for removing the last underscore $(".sub_menu").find("li:last-child").addClass("last") //Transf the entire li to determine whether the submenu is included. If included, add an arrow to indicate the status $(".Menue li").each(function(){ if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")} }) // $(".Menue li").hover(function(){ $(this).addClass("now"); var menu = $(this); menu.find("ul.sub_menu:first").show(); },function(){ $(this).removeClass("now"); $(this).find("ul.sub_menu:first").hide(); }); var submenu = $(".sub_menu").find(".sub_menu") submenu.css({left:"100px",top:"0px"}) $(".sub_menu li").hover(function(){ $(this).find("a:first").addClass("now") $(this).find("ul:first").show(); },function(){ $(this).find("a:first").removeClass("now") $(this).find("ul:first").hide() });/*jquery menu end*/})</script>Through the above steps, a general multi-level menu is realized. The above code is the accumulation of my daily development. Due to my limited level, there may be many mistakes. I hope my colleagues will criticize and correct or propose more optimized codes for my reference. Thank you.
The above implementation code of the universal Infinitus drop-down menu is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.