The personal navigation menu implemented by jquery and the navigation menu implemented by jquery

The personal navigation menu implemented by jquery and the navigation menu implemented by jquery

Previously we introduced a very cool menu navigation implemented by jquery and css3. This is a navigation menu developed by jquery. It is suitable for the portal website's personal user center background. The Effect and appearance are both very good. Let's take a look:

 

Download Online Preview source code

 

Let's take a look at the implementation code:

Html code:

<Nav class = "animated bounceInDown"> <ul> <li> <a href = "# profile"> <div class = "fa-user"> </div> Profile </a> </li> <a href = "# message"> <div class = "fa-envelope"> </div> Messages <span class = "badge right"> 12 </span> </a> </li> <li class = "sub-menu"> <a href = "# settings"> <div class = "fa-gear"> </div> Settings <div class = "fa right fa-caret-up"> </div> </a> <ul style =" display: block; "> <li> <a href =" # settings "> Account </a> </li> <a href =" # settings "> Profile </a> </li> <a href = "# settings"> Secruity & amp; privacy </a> </li> <a href = "# settings"> Password </a> </li> <a href = "# settings "> Notification </a> </li> </ul> </li> <li class =" sub-menu "> <a href =" # message "> <div class = "fa-question-circle"> </div> Help <div class = "fa right fa-caret-down"> </div> </a> <ul style = "display: none; "> <li> <a href =" # settings "> FAQ's </a> </li> <a href =" # settings "> Submit a Ticket </a> </li> <a href = "# settings"> Network Status </a> </li> </ul> </li> <li> <a href = "# message"> <div class = "fa-sign-out"> </div> Logout </a> </li> </ul> </nav>View Code

Css code:

Body {background: # f7f7f7 url ("1.jpg") no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover; font-family: "Roboto"; font-size: 14px;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} body: before {content: ''; position: fixed; z-index:-1; top: 0; left: 0; background: # 34495e;/* IE Fallback */background: rgba (52, 73, 94, 0.8); width: 100%; height: 100%;} nav {position: absolute; top: 50%; left: 50%; width: 360px; margin:-78px 0 100px-180px;-webkit-box-shadow: 0 0 3px rgba (0, 0, 0, 0.1);-moz-box-shadow: 0 0 3px rgba (0, 0, 0, 0.1); box-shadow: 0 0 3px rgba (0, 0, 0, 0, 0.1) ;}nav ul {list-style: none; margin: 0; padding: 0 ;} nav ul li {/* Sub Menu */} nav ul li a {display: block; background: # 3498db; padding: 10px 15px; color: # fff; text-decoration: none;-webkit-transition: 0.2 s linear;-moz-transition: 0.2 s linear;-ms-transition: 0.2 s linear;-o-transition: 0.2 s linear; transition: 0.2 s linear;} nav ul li a: hover {background: #2980b9;} nav ul li. fa {width: 16px; text-align: center; margin-right: 5px;} nav ul li. badge {display: inline-block; background: # fff;/* IE Fallback */background: rgba (255,255,255, 0.2); padding: 3px 7px; color: # fff; font-size: 12px; font-weight: 800;} nav ul li a {background: #444; border-left: 4px solid transparent; padding: 10px 20px ;} nav ul li a: hover {background: #333; border-left: 4px solid # 3498db;}/* Float Right/Left */. right {float: right ;}. left {float: left ;}View Code

Js Code:

$ ('. Sub-menu ul '). hide (); $ (". sub-menu "). click (function () {$ (this ). children ("ul "). slideToggle ("100"); $ (this ). find (". right "). toggleClass ("fa-caret-up fa-caret-down") ;}); // @ sourceURL = pen. jsView Code

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/5663

Question about menu clicking time implemented by jquery

// When processing click expansion, you can close all the previously opened menus.
$ (Document). ready (function (){
$ ("Li. mainlevel"). click (function (){
$ ("Li. mainlevel> ul"). hide ();
$ (This). find ("ul"). slideDown (300 );
});
});

How does jquery control the navigation menu of the current page?

For example, the <div class = "nav"> <a href = "index.html"> homepage </a> <a href = "product.html"> product </a>
The following html content:
<Div class = "main">
<Div class = "content"> homepage content </div>
<Div class = "content"> product content </div>
<Div class = "content"> case center content </div>
</Div>
As for class = "content", you can add it yourself to facilitate jQuery's acquisition, without this style class.
<Script type = "text/javascript">
$ (Document). ready (function ()
{
Var tabs =$ ('. nav> ');
Var cons = $ ('. main> div. content ');

Tabs. first (). addClass ("now"). show (); // The first display by default
Cons. first (). show (). nextAll (). hide (); // The first display is displayed by default, and others are hidden.
Tabs. each (function (index ){
$ (This). mouseover (function (){
$ (This). addClass ("now"). siblings (). removeClass ("now ");
Cons. eq (index). show (). siblings (). hide ();
});
});

});
</Script>