Shulou(Shulou.com)06/01 Report--

The knowledge of this article "jQuery how to achieve Nav navigation menu effect" is not understood by most people, so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "jQuery how to achieve Nav navigation menu effect" article.

Let's first look at the effect:

When the mouse is hovering, the menu item moves up into a white word with a blue background, and there will be a blue bar at the bottom to indicate the current selection.

Page code, each item of the menu is a div, including a ul for displaying text, etc., and another div is the blue bar at the bottom. You need to set a different class for the first item and the last item, and the style needs to be used:

Home page An exit exit

Style, mainly the setting of the left and right borders of each menu item and the location settings of ul and li:

* {padding: 0; margin: 0;} body {background-color: # fffff3; font: 12px/1.6em Helvetica, Arial, sans-serif;} ul,li {list-style: none;} # nav {text-align: center; height: 50px; font-size: 10px; line-height: 30px; background-color: # F0E6DB; margin-bottom: 10px;} .navItem {cursor: pointer; position: relative; float: left; width: 100px; height: 50px Font-size: 15px; border-right: 2px solid rgb (255255255); border-left: 2px solid rgb (255255255); overflow: hidden; font-weight:bold;} .indexNavItem {border-left: 4px solid rgb (255255255); margin-left: 10px;} .lastNavItem {border-right: 4px solid rgb (255255255);} .logoutNavItem {float: right; width: 120px; margin-right: 10px; border-left: 4px solid rgb (255255255);} .navUl {position: relative; height: 100px Width: 100%; border-bottom: 5px solid rgb (2159212);}. NavUl li {height: 50px; line-height: 50px;} .scoter {position: absolute; bottom: 0; height: 5px; width: 100%;} .selectedNav {background-color: # 029FD4;} .hoverLi {background-color: # 029FD4; color: # ffffff;}

The next step is to write the js code for hovering and clicking events for the menu. When hovering, move the ul up to the height of the li, move the mouse away, and then restore it. After clicking, you can add a style to the div of the blue bar:

$(function () {(".navItem") .hover (function () {$(this) .children ("ul"). Animate ({top: "- 50px"}, 100);}, function () {$(this) .children ("ul") .animate ({top: "0px"}, 100);}) $(".navItem") .click (function (event) {$(this). Siblings (). Children ('.navItem'). RemoveClass ('selectedNav'); $(this) .children (' .navItem'). AddClass ('selectedNav');}) }) the above is the content of this article on "how jQuery achieves the effect of Nav navigation menu". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.