Level Two navigation menu is very practical in the Web page, there are many ways to implement it, this article is about how to use jquery to implement the
Mainly used in operation and maintenance system, the interface is not high requirements. Deeply feel the ability of their own page design weak burst, can only learn from, interactive logic can also be competent. Direct Paste code: 1. HTML page and JS interaction, note the introduction of Jquery file code as follows: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <html> <head> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <title> Level two navigation menu example </title> <script src=" Jquery-1.10.1.min.js ">< /script> <!--moonmm css--> <link rel= "stylesheet" type= "Text/css" href= "Two-nav.css"/& gt; <script type= "Text/javascript" > var weeks = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] function Showtime () { var date = new Date (); var yy = date.getyear (); if (yy < 1900) { y y = yy + 1900; } var mm = Date.getmonth () +1; if (mm<10) MM = ' 0 ' + mm; var dd = date.getdate (); nbsp if (dd<10) dd = ' 0 ' + dd; var hh = Date.gethoURS (); if (hh<10) hh = ' 0 ' + hh; var mm = date.getminutes (); if (mm<10) mm = ' 0 ' + mm; var ss = Date.getseconds (); if (ss<10) ss = ' 0 ' + ss; var ww = weeks[date.getday ()]; $ (' #currTime span '). html (' [' + yy + '-' + mm + '-' + dd + ' + hh + ': ' + mm + ': ' + ss + ' + ww + '] '); window.settimeout ("Showtime ()") , 1000); } var setcontentsize = function (height, width) { $ (' header '). css (' width ', width); $ (' #topnav '). CSS (' width ', width); $ (' #nav '). CSS (' width ', width); $ (' #content '). CSS (' height ', height + ') PX '); $ (' #content '). CSS (' width ', width); $ (' #maincontent '). CSS (' height ', height + ' px '); $ (' # MainContent '). CSS (' width ', width); } $ (document). Ready ( function () { var Docheight = $ (document). Outerheight (); var docwidth = $ (document). Width (); var headerheight = $ (' #header '). Height (); var contentheight = Docheight-headerheight; $ (' #topnav a '). Click ( function () { $ ('. Select '). Removeclass (' select '); $ (this). AddClass (' select '); console.log ($ (this). CSS (' Background-color '); $ (' #nav '). CSS (' Background-color ', $ (this). CSS (' Background-color '); $ (' #nav '). CSS (' width ', $ (' #topnav '). Width ()); switch (this.id) { Case ' Topmenu_home ': $ ('. Nav_list '). Hide (); $ (' #homebo '). Show (); $ (' #homebo a '). Click (); break; case ' Topmenu_itlearn ': $ ('. Nav_list '). Hide (); $ (' #itlearnbo '). Show (); $ (' # Itlearnbo a '). Click (); break; case ' Topmenu_baike ': $ ('. Nav_list '). Hide (); $ (' # Baikebo '). Show (); $ (' #baikebo a '). (). Click (); break; case ' TOPMENU_SCISRC ': $ ('. nav_ List '). Hide (); $ (' #scisrcbo '). Show (); $ (' #scisrcbo a '). (). Click (); break; case ' Topmenu _more ': $ ('. Nav_list '). Hide (); $ (' #morebo '). Show (); $ (' #morebo a ').(). Click (); break; default:break; } } ); $ (' #nav a '). Click ( func tion () { setcontentsize (Contentheight, docWidth-15); $ (' #nav. Select '). Removeclass (' select '); $ ( This). addclass (' select '); switch (this.id) { case ' Myblogmodule ': $ (' #maincontent '). attr (' src ', ' HTTP://BLOG.CSDN.NET/LOVESQCC '); break; case ' Ifevemodule ': setcontentsize (contentheight+80, DOCWIDTH-15); $ (' #maincontent '). attr (' src ', ' http://ifeve.com/'); break; case ' Csdnmodule ': $ (' #maincontent '). attr (' src ', ' http://csdn.net '); break; case ' Infoqmodule ': $ (' #maincontent '). attr (' src ', ' http://www.infoq.com/cn/'); break; case ' Bolemodule ': $ (' #maincontent '). attr (' src ', ' http://blog.jobbole.com/'); break; case ' Itcommentmodule ': $ (' #maincontent '). attr (' src ', ' http:// www.vaikan.com/'); break; case ' Wikimodule ': $ (' #maincontent '). attr (' src ', ' http://zh.wikipedia.org/zh-tw/Wikipedia '); break; case ' Zhihumodule ': $ (' # MainContent '). attr (' src ', ' http://www.zhihu.com/'); break; case ' Acmmodule ': $ (' #maincontent '). attr (' src ', ' http://www.acm.org/'); break; case ' Xiamimodule ': $ (' #maincontent '). attr (' src ', ' http ://www.xiami.com '); break; case ' Opencoursemodule ': $ (' #maincontent '). attr (' src ', ' http:// v.163.com/special/ted10collection/'); break; default: break; } } ); $ ('. Nav_list '). Hide (); $ (' #topmenu_home '). Click (); Showtime (); } ); </script> </head> <body> <div id= "header" > <div id= "Firstheader" > < Div id= "logo" > Level two navigation menu </div> <div id= "target" > Two level navigation menu example </div> <div id= "Toolbar" > <a href= "#" id= "userinfo" >[Hello: <span style= "color: #f47920" >admin</span>]</a> <a href= "#" id= "Currtime" ><span></span></a> <a href= "http:/" /aone.alibaba-inc.com/aone2/req/addfromproductline/9139 "target=" _blank "><span style=" color: #f47920 ">[ Suggestions]</span></a> </div> </div> <div class= "Clear" ></div> <div id= "Topnav" > <div class= "topnav_list" > <a href= "#" class= "select" Id= "Topmenu_ Home "><span> homepage </span></a> <a href=" # "id=" Topmenu_itlearn "><span>it learning </ span></a> <a href= "#" id= "Topmenu_baike" ><span> Encyclopedia </span></a> <a href= "#" id= "TOPMENU_SCISRC" ><span> Academic resources </span></a> <a href= "#" id= "Topmenu_more" > <span> more </span></a> </div> </div> <div class= "Clear" ></ div> <div id= "nav" > <div class= "nav_list" id= "Homebo"; <a href= "#" class= "select" id= "Myblogmodule" ><span> my blog </span></a> </div > <div class= "nav_list" id= "Itlearnbo" > <a href= "#" class= "select" id= "Ifevemodule" > <span> Concurrent Programming Network </span></a> <a href= "#" id= "Csdnmodule" ><span>CSDN</span> </a> <a href= "#" id= "Infoqmodule" ><span>Infoq</span></a> <a href= "#" ID = "Bolemodule" ><span> bole online </span></a> <a href= "#" id= "Itcommentmodule" ><span > Foreign Periodical Review </span></a> </div> <div class= "nav_list" id= "Baikebo" > < A href= "#" class= "select" id= "Wikimodule" ><span>wiki encyclopedia </span></a> <a href= "#" id= " Zhihumodule "><span> know </span></a> </div> <div class=" nav_list "id=" SCISRCBO "> <a href=" # "class=" select "id=" Acmmodule "><span>acm</span></a> </div> <div class= "nav_list" id= "Morebo" > <a href= "" class= " Select "Id=" xiamimodule "><span> Shrimp music </span></a> <a href=" # "id=" Opencoursemodule "> <span> NetEase public class </span></a> </div> </div> </div> < div id= "Content" > <iframe id= "maincontent" frameborder= "0" width= "100%" ></iframe> </ div> </body> </html> 2. CSS files [CSS] View plaincopyprint the code to see how it is derived to my Code Div:not (#topnav, #logo) {font-size:10pt! important} *{font-family: Microsoft James Black, XXFarEastFont-Arial, san-serif!important} /* * Header css */ a{ Color: #2F649A;} A:link{text-decoration:none;} A:visited{text-decoration:none;} A:hover{text-decoration:underline;} A:active{text-decoration:none;} Body { background-color: #dae7f6; Margin: -0px-0px; } #firstHeader { height:56px; } #logo { float:left; font-size:28pt; margin:10px 0px 10px 20px; font-family: Official script, Microsoft Ya-hei, XXFarEastFont-Arial, san-serif!important; }&NB Sp #target { float:left; font-size:10.5pt; font-style:italic; font-weight:1.5em; ma rgin:25px 30px 0px 5px; } #toolbar { float:right; margin:0px 3px; } # Toolbar a { font-size:10pt; } #content { background-color: #45b97c; } / * The top menu */ #topnav { float:left; background-color: #426ab3; width:100%; } &nb Sp #topnav. topnav_list { float:left width:100%; height:29px; color: #333; margin:0px 0px-1px 0px; -font-size: 11pt!important; font-weight:bold; border-radius:5px; } #topnav. topnav_list a { display:inline-block; Height:24px; padding:2px 0 2px 18px; color: #fff; Vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer; border-radius:5px; border-right:2px outset #00BFFF; } #topnav. Topnav_list a span { display:inline-block; height:22 px padding:0 20px 0 0; border-top-left-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; } #topnav. topnav_list a:hover, #topnav. Topnav_list a.select { position:relative z-index:9; background-color: #45b97c; color: #fff; text-decoration:none; border-top-left-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; } #topnav. Topnav_list a:hover span, #topnav. topnav_list A.select SP An { background-color: #45b97c; color: #fff; border-radius:5px; } Clear { CLE Ar: both; } /* The #nav #nav { font-size:10pt; } */ . nav_list { float:left padding:3px 0 3px 0 font-weight:bold;height:25px; } #nav. Nav_list a { disp lay:inline-block; padding:2px 15px 2px 15px; color: #fff; Vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer; border-radius:8px; border-radius:8px; } #nav. Nav_list a span { dis play:inline-block; border-radius:8px; border-radius:8px; } #nav. nav_list A:hover, #nav . nav_list a.select { position:relative; z-index:9; text-decoration:none; border-radius:8px; border-radius:8px; } #nav. nav_list a:hover, #nav. nav_list a:hover span { background-color: #00 7d65; color: #fff; } #nav. Nav_list a.select, #nav. Nav_list a.select span { background-col Or: #fff; color: #ca0000; } Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
