Home > Developer > Web Develop
Html代码：
<title> Navigation Demo </title>
<meta charset= "UTF-8" >
<link rel= "stylesheet" href= "Nav.css" >
<body>
<div class= "NAV" >
<a href= "" > Column 1</a>
<a href= "" > Column 2</a>
<a href= "" > Column 3</a>
<a href= "" > Column 4</a>
<a href= "" > Column 5</a>
<a href= "" > Column 6</a>
</div>
</body>
CSS code: (NAV.CSS)
. Nav {
WIDTH:100RPX;
height:40px;
margin:0 Auto;
Display:flex;
Align-items:center;
Z-index:9;
}
. Nav > A {
height:40px;
Display:flex;
Justify-content:center;
Align-items:center;
Color: #333;
Padding:0 20px;
font-size:16px;
Text-decoration:none;
}
Then get to the point.
First step: Introduce Jquery.min.js
Part II: Adding JS code (nav.js)
$ (function () {
$ (". Nav>a"). each (function () {
$ (this). MouseOver (function () {
$ (this). css ({"Color": "Red", "Border-bottom": "2px Solid Red"})
}). mouseout (function () {
$ (this). css ({"Color": "#333", "Border-bottom": "2px solid White"})
})
})
})
The first line in the function. Nav>a is written according to the CSS selector.
Each selects a specific label that matches the criteria
After doing both of these steps, the final HTML code is as follows: (index.html)
<title> Navigation Demo </title>
<meta charset= "UTF-8" >
<link rel= "stylesheet" href= "Nav.css" >
<script src= "Jquery.min.js" ></script>
<script src= "Nav.js" ></script>
<body>
<div class= "NAV" >
<a href= "" > Column 1</a>
<a href= "" > Column 2</a>
<a href= "" > Column 3</a>
<a href= "" > Column 4</a>
<a href= "" > Column 5</a>
<a href= "" > Column 6</a>
</div>
</body>
Put index.html, Jquery.min.js, Nav.js, nav.css four files into the same directory, run index.html try again, there is no effect, is not great!
It is also necessary to tell you that there is no problem with the presentation alone, but if you put it in a Web page, there will be a slight shift in position at the same time as there is a border-bottom, which is due to the presence and disappearance of the .nav> A style sheet adds another line of border-bottom:2px solid white. can be resolved. If you still have questions about where you can leave a message, we can learn to progress together.
This article by the Professional Zhengzhou app development company Brigitte Xuan Science and Technology finishing release, original content is not easy, if need reprint, please indicate source!
How the site navigation bar achieves dynamic effects
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
