Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! -- This article references the author's ideas: http://runjs.cn/code/ouvvjqka,jquerycode is written in another way -->
<! -- This article from: http://blog.csdn.net/liuyanzhi08 -->
<! -- Implementation ideas:
CSS: uses an absolutely positioned div as the animation slider and changes its left attribute to display the animation effect.
Javascript: hover () triggers the action of moving the mouse to the navigation nav, and the action of removing the navigation nav (that is, returning to the current navigation)
-->
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "author" content = "Nancle"/>
<Title> jQuery elastic sliding navigation menu </title>
<Style type = "text/css">
Body {font-family: "Microsoft YaHei ";}
# Nav_wrapper {position: relative; width: 835px; margin: 80px auto; border-bottom: 2px # ddd solid ;}
# Nav_wrapper # nav_menu {height: 50px ;}
# Nav_wrapper # nav_menu a {display: block; float: left; height: 50px; padding: 0 40px; line-height: 50px; color: #666; font-size: 16px; text-decoration: none ;}
# Nav_wrapper # nav_animate_block {position: absolute; bottom:-2px; height: 2px; overflow: hidden; background: #80b600 ;}
</Style>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var $ current_nav = $ ("# current_nav"); // The current element (the current navigation item)
Var current_nav_width = $ current_nav.innerWidth ();
Var current_nav_left = $ current_nav.position (). left;
Var $ nav_animate_block = $ ("# nav_animate_block"); // animation Slider
$Nav_animate_block.css ({width: current_nav_width, left: current_nav_left}); // when the animation slider is in the current State
// An animation event is triggered when the mouse enters Element.
$ ("# Nav_menu a"). hover (function (){
Var index = $ (this). index ();
Var $ a_cur = $ ("# nav_menu"). find ("a"). eq (index); // The a element that the mouse moves
// Obtain the left position and its width using the triggered a element index
Var width = $ a_cur.innerWidth ();
Var left = $ a_cur.position (). left;
// Set the animation slider position
$ Nav_animate_block.stop (). animate ({
Width: width,
Left: left
}, 300)
}, Function (){
// When the mouse leaves Element a, the animation slider returns the current element position
$ Nav_animate_block.stop (). animate ({
Width: current_nav_width,
Left: current_nav_left
})
})
});
</Script>
</Head>
<Body>
<Div id = "nav_wrapper">
<Div id = "nav_menu">
<A href = "#" id = "current_nav"> homepage </a>
<A href = "#"> product list </a>
<A href = "#"> customer case </a>
<A href = "#"> service platform </a>
<A href = "#"> Exchange Forum </a>
<A href = "#"> about us </a>
</Div>
<Div id = "nav_animate_block"> </div>
</Div>
</Body>
</Html>
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
