Yesterday, I wanted to build an enterprise website to implement an elastic sliding navigation menu, but I couldn't find a lot of JavaScript code. Later I wanted to use jquery to implement it. I will share the Code with you, for more information, see.
The HTML code is as follows:
| The Code is as follows: |
Copy code |
<DIV id = nav>
<DIV class = nav-menu>
<A class = current href = "#"> homepage </A>
<A href = "#"> about Camnpr </A>
<A href = "#"> case study </A>
<A href = "#"> Contact Information </A> </DIV>
<DIV class = nav-current> & nbsp; </DIV> |
The CSS code is as follows:
| The Code is as follows: |
Copy code |
Body {font-size: 100%; font-family: "Microsoft YaHei", "Arial"; background: # fff ;}
# Nav {position: relative; width: 573px; _ width: 576px; margin: 100px auto 0 auto; border-bottom: 2px # ddd solid ;}
# Nav. nav-menu {height: 50px ;}
# Nav. nav-menu a {display: block; float: left; height: 50px; padding: 0 40px; line-height: 50px; color: #666; font-size: 16px; text-decoration: none ;}
# Nav. nav-current {position: absolute; bottom:-2px; height: 2px; overflow: hidden; background: #80b600 ;}
|
The JS Code is as follows:
Reference jQuery first, for example:
| The Code is as follows: |
Copy code |
<Script type = "text/javascript" src = "jquery. min. js"> </script> $ (Function (){
(Function (){
Var $ navcur = $ (". nav-current ");
Var $ nav = $ ("# nav ");
Var current = ". current ";
Var itemW = $ nav. find (current). innerWidth (); // default width of the current position
Var defLeftW = $ nav. find (current). position (). left; // default Left value of the current position // Add the default underline
$Navcur.css ({width: itemW, left: defLeftW }); // Hover event
$ Nav. find ("a"). hover (function (){
Var index = $ (this). index (); // you can call this operation to obtain the index value of the element that has slipped through.
Var leftW = $ (this). position (). left; // gets the Left value of the element that slides over.
Var currentW = $ nav. find ("a"). eq (index). innerWidth (); // gets the Width value of the element that slides over.
$ Navcur. stop (). animate ({
Left: leftW,
Width: currentW
},300 ); }, Function (){
$ Navcur. stop (). animate ({
Left: defLeftW,
Width: itemW
}, 300)
})
})(); }); |
