Jquery css Main Menu Style Jump

Jquery css Main Menu Style Jump

The effect you want to achieve is actually quite common: The webpage's main menu has A default style (such as A style) at the beginning, when the mouse passes through A menu item, this menu item applies a style (for example, B style). When you click a menu item, the current menu item applies B style, the other menu items will remove the B style and apply the default A style. After trying, I wrote simple code and saved it for later use.

 

Html code:

 

• Home
• Download
• Documentation
• Community
• Success Stories
• News
• Events
• About

Css code:

 

 

#menuBar{clear:both;width:1200px;margin:0 auto;color:#efefef;font-family:Arial;font-size:18px;}#menuBar ul{list-style:none;height:55px;margin:0px;padding:0px;}.beforeClick{float:left;width:150px;text-align:center;line-height:55px;height:55px;background-image:url(Welcome%20to%20Python.org_files/20141021190636.png);background-repeat:repeat-x;margin-top:10px;}.beforeClick:hover{background-color:3776ab;border:1px solid #aaa;height:53px;line-height:53px;width:148px;background-image:none;cursor:pointer;}.clickedMenu{background-color:3776ab;border:1px solid #aaa;height:53px;line-height:53px;width:148px;background-image:none;cursor:pointer;}

Js Code:

 

 

<Script> $ (function () {$ (# menuBar ul li ). each (function () {$ (this ). addClass (beforeClick); // Add the beforeClick style to all nodes at the beginning}) ;}; $ (function () {$ (# menuBar ul li ). each (function (I) {$ (this ). click (function () {$ (this ). siblings (li ). removeClass (clickedMenu); // remove the clickedMenu style from other sibling nodes, that is, the menu style after clicking $ (this ). siblings (li ). addClass (beforeClick); // Add other sibling nodes and click the style beforeClick $ (this ). addClass (clickedMenu); // Add clicked to the current node Menu style .})});}) </Script>

:

 

1. Initial status:

2. The status when the mouse goes through a menu item:

3. The status when the mouse clicks a menu and the mouse goes through other menu items:

3. When you click another menu, the style changes: