When the site navigation bar items A lot of time, we tend to be the same level of the column hidden in the first category. Displayed when the user's mouse is slippery. This is a navigation bar Drop-down list that is implemented with JavaScript. Small knitting step-by-step to explain to you. It's worth noting that we're using a framework of JavaScript to implement jquery. So you have to download jquery when you're using it.
Create HTML code First
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<title>jquery Test Web Page</title>
<link rel= "stylesheet" href= "/css/layout.css" type= "Text/css"/>
<script src= "./js/jquery.js" type= "Text/javascript" ></script>
<script src= "./js/basic.js" type= "Text/javascript" ></script>
<body>
<p id= "It" >it industry </p>
<ul id= "ul" >
<li> Baidu </li>
<li> Google </li>
<li> NetEase </li>
<li> Tencent </li>
<li> Taobao </li>
</ul>
</body>
This code contains the jquery library:
Copy Code code as follows:
<script src= "./js/jquery.js" type= "Text/javascript" ></script>
Here we will CSS and JS files in a separate external file.
The code for the Layout.css file is:
Copy Code code as follows:
@CHARSET "GBK";
body{
FONT:12PX Arial,verdana;
}
ul{
margin:0px;
padding:0px;
List-style-type:none;
}
#it {
margin:0px;
width:80px;
height:25px;
Color:white;
Text-align:center;
line-height:25px;
Cursor:pointer;
Background:black;
border:1px solid white;
}
#ul li{
width:80px;
height:25px;
Color:white;
Text-align:center;
line-height:25px;
Cursor:pointer;
Background:black;
border:1px solid white;
}
. highlight{
width:80px;
height:25px;
Background:white;
BORDER:1PX solid blue;
Color:black;
}
CSS code can be based on their favorite style to design, where the bean sprouts important to explain the JS file.
Copy Code code as follows:
$ (document). Ready (function () {
$ (' #ul '). Hide (); Open page Hide drop down list
$ (' #it '). Hover (////mouse over navigation)
function () {
$ (' #ul '). Show (); Show drop down list
$ (this). css ({' Color ': ' Red ', ' background-color ': ' Orange '}); Set navigation column style, eye-catching
},
function () {
$ (' #ul '). Hide (); Hide Drop-down list after mouse move
}
);
$ (' #ul '). Hover (////mouse over dropdown list itself also to display, to prevent from being able to click the dropdown list
function () {
$ (' #ul '). Show ();
},
function () {
$ (' #ul '). Hide ();
$ (' #it '). css ({' Color ': ' White ', ' background-color ': ' Black '}); After the mouse move down the Drop-down list, the navigation column style also clears
}
);
$ (' li '). Hover (//mouse over dropdown list is changing the current column style
function () {
$ (this). css ({' Color ': ' Red ', ' background-color ': ' Orange '});
},
function () {
$ (this). css ({' Color ': ' White ', ' background-color ': ' Black '});
}
);
});
Because the current site editor problems can not upload pictures, no pictures of everyone to the local test to see the effect of it.
