menu of Things (i)

menu of Things (i)

First of all, do a simple two-level navigation menu, here, we use pseudo-class method to achieve a mouse click on the two-level menu effect, the code is as follows:

<! DOCTYPE html>
Here, we still have to pay attention to, in the middle of the comment section, specifically emphasizes the difference between float:none and clear, in addition, the hover method is not very good for the low version of IE browser, here, We can use JavaScript or jquery method to be compatible with the low version of IE browser.
JavaScript method:
First, we'll add a method to the Li tag on the course hall, <li onmouseover= "Showsubmenu (This)" onmouseout= "Hiddensubmenu" >,javascript code as follows
<script type= "Text/javascript" >function Showsubmenu (li) {var submenu = li.getelementsbytagname (' ul ') [0]; Submenu.style.display = ' block ';} function Hiddensubmenu (li) {var submenu = li.getelementsbytagname (' ul ') [0];submenu.style.display = ' None ';} </script>
We defined two functions, first using the DOM method to obtain the first UL label of the Li Tag, and then do the corresponding operation.
Let's take a look at the jquery method: (Note: You need to introduce jquery before use, because)
<script type= "Text/javascript" >//this is using the JQuery method, which requires the introduction of jquery$ (document) before use. Ready (function () {$ ('. submenu '). MouseOver (function () {$ (this). Children ("UL"). Show ();}); $ ('. submenu '). Mouseout (function () {$ (this). Children ("ul"). Hide ();}); </script>
Next, we want to make a little upgrade to our menu, we want the mouse to pass the time, the navigation menu to switch between English and Chinese, the code is as follows:
<! DOCTYPE html>
   Below, we use the previous foundation to continue to upgrade our menu, we use the previous foundation to do a simple level three menu, the code is as follows: 
 
<! DOCTYPE html>
The following describes the JavaScript method, in the previous level two menu, we have added two events in the Li tag, smart you must have found that there are too many ways to change, the following we have improved the previous method, the code is as follows:
<script type= "text/javascript" >window.onload = function () {//var Isie =!! Window. Activexobject;//var isIE6 = Isie &&!window. xmlhttprequest;//if (isIE6) {var Lis = document.getelementsbytagname (' li '); for (Var i=0;i<lis.length;i++) {Lis[i]. onmouseover = function () {var u = this.getelementsbytagname (' ul ') [0];if (U!== undefined) {u.style.display = ' block ';}}; Lis[i].onmouseout = function () {var u = this.getelementsbytagname (' ul ') [0];if (U!== undefined) {u.style.display = ' none ';}} ;}} }</script>
(If you want to be compatible with IE6, get rid of comments on the line), in this way we do not need to do any work on the HTML code, the direct introduction of HTML content on the line. In addition if (U!== undefined) This section of code to determine if the first UL tag under Li is present, then execute, do not add this judgment will error.
Here is the jquery method:
$ (document). Ready (function () {if ($.browser.msie && $.browser.version.substr (0,1) <7) {$ ("Li"). have (' ul '). MouseOver (function () {$ (this). Children (' ul '). CSS (' Display ', ' Block ')}). Mouseout (function () {$ (this). Children (' ul ' ). CSS (' Display ', ' None ')});
Often we see the mouse on the first level menu, Level Two menu is animated, Yo Ucss3 Foundation, make animation effect is very simple, but we all know, CSS3 for the lower version of the compatibility is not too good, then we first use CSS3 method to do a simple animation effect, We will use the new method in CSS3 as much as possible, with the following code:
<! DOCTYPE html>
   
 
<! DOCTYPE html>
   In the example above, CSS3 has a lot of new methods to use, but how do we achieve the animation we want in the lower version of the browser? For Demo4, we can add the following JavaScript code to the code: (Before this we need to add an ID to the required Li tag, and we need to include it in the CSS code. Top-nav li Ul{height:0;overflow:hidden;} ) 
Window.onload = function () {var Lis = document.getelementsbytagname ("Li"); for (Var i=0;i<lis.length;i++) {Lis[i]. onmouseover = function () {var u = this.getelementsbytagname ("ul") [0];if (u!=undefined) {u.style.display = "block"; ADDH (u.id);}}; Lis[i].onmouseleave = function () {var u = this.getelementsbytagname ("ul") [0];if (u!=undefined) {u.style.display = "none" ; Subh (u.id);}};} function Addh (ID) {//slowly increases the height of var ullist = document.getElementById (ID); var h = ullist.offsetheight;h + = 1;if (h<49) { UlList.style.height = h + "px"; SetTimeout ("Addh ('" +id+ "')", 10);} Else{ullist.style.height = + "px";}} function Subh (ID) {//Slow decrease height var ullist = document.getElementById (ID); var h = ullist.offsetheight;h-=1;if (h>0) { UlList.style.height = h + "px"; SetTimeout ("Subh ('" +id+ "')", 10);} Else{ullist.style.height = 0 + "px";}}
You must have seen the smart one, and we can optimize the code above for some degree.
Window.onload = function () {var Lis = document.getelementsbytagname ("Li"); for (Var i=0;i<lis.length;i++) {Lis[i]. onmouseover = function () {var u = this.getelementsbytagname ("ul") [0];if (u!=undefined) {u.style.display = "block"; Changeh (u.id,1);}}; Lis[i].onmouseleave = function () {var u = this.getelementsbytagname ("ul") [0];if (u!=undefined) {u.style.display = "none" ;        Changeh (u.id,-1);}};}            function Changeh (ID, count) {//Find ullist based on ID, and get its height var ullist = document.getElementById (ID);            var h = ullist.offsetheight;            H + = count;  if (Count > 0) {if (H <= 42) {//assigns a height to ullist, and constantly calls this function UlList.style.height = h +                    "PX";                SetTimeout ("Changeh ('" + ID + "', 1)", 10);                } else {return; }} else {if (H > 0) {//assigns a height to ullist, and constantly calls this function ullist.style.h               eight = h + "px";     SetTimeout ("Changeh ('" + ID + "',-1)", 10);                    } else {ulList.style.display = "none";                Return }            }        }
Summary: These two days of study, although the learning of new things not much, but deepened before the understanding of some concepts, but I have some of the previous just reviewed. For example, in the setting menu horizontal arrangement of the floating float, and then need to clear the float, or we can sometimes use overflow to clear, when exactly when to use which method? Where the advantages are, these are what we need to take into account. Sometimes it is not possible to get the effect we want, we have to think about its position, whether to use relative positioning or absolute positioning, or we sometimes use fixed positioning. Before the words can think: hover pseudo-class only used on a label, later found that the original is not so, the back of the CSS3 it to other tags can be used, in the high version of the browser will get the effect we want, but in the low version of IE browser is not so support, when considering a compatible method , we need to use JavaScript or jquery to help us, say these two, feel a bit inclined to jquery, after all, this is a lot of time and effort of the predecessors to complete, they think of the problem is more than the problem of writing JavaScript code to consider more, Then it feels simpler than JavaScript and uses a lot less code. Here's what JavaScript uses: Dom methods, for loops, simple arrays (not all of them), judging, the use of settimeout functions ... These things have been learned in front of themselves, but to use, before learning, is certainly not aware that this can be used. The later use of the CSS3 is even more magical, with a short code to achieve JavaScript or jquery a lot of code to complete the work, it is really amazing. Slowly to these things more and more have a sense of not to say.
(Multi-point thinking, Multi-point summary, slowly the knowledge of the previous mastery, and then to the front of the breakthrough)
In the back of time I want to learn jquery while doing something, to make an effective page is really a very interesting thing!
Just do it!
menu of Things (i)