The effect of CSS3 and jquery on the fixed top position suspension menu of Petal net

Petal Net previous menu effect is good, first is to show all the menu, then when you slide down the page, the menu automatically suction top fixed suspension in the top of the browser, this user can also be a good switch to different categories, to see more content, and for the site, but also to enhance a lot of user experience and interactivity.

Making Method

This article will give you a brief introduction of how to produce such an effect.

HTML code

First we write some basic HTML code, respectively, to the website logo defined a #header class, to the menu definition. Nav class.

<div id= "header" ><div class= "NAV" >
<ul>
<li><a> concerns </a></li>
<li><a> Latest </a></li>
<li><a> Hottest </a></li>
<li><a> Video </a></li>
<li><a> Home </a></li>
<li><a> Travel </a></li>
</ul>
</div>

CSS Code

For the logo of the website, we have it centered and then define a color and a bottom border.

#header {
width:100%;
Border-top:solid 1px #ccc;
Border-bottom:solid 1px #ccc;
Text-align:center;
}

For the menu section, we have all the menu items displayed on one line and have enough padding and spacing for the A label.

Nav{width:500px;background: #fff; margin:20px auto 0;border:solid 1px #ccc; zoom:1;border-radius:5px;box-shadow:0 1px 6px Rgba (0,0,0,0.1); color: #D74452;}
. Nav:after{content: "";d Isplay:block;height:0;clear:both;visibility:hidden;}
. Nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
. Nav ul Li A{cursor:pointer;}
. Nav ul Li A:hover{text-decoration:underline;}

When the user slides down the page, we add a class to the menu that allows the menu to float to the top of the page.

. nav_scroll{
position:fixed;
width:100%;
margin:0;
left:0;
top:0;
}

JavaScript code

First we need to introduce the jquery library.

<script src= "Jquery-1.7.2.min.js" type= "Text/javascript" ></script>

To get the user's sliding page distance, if greater than the height of the site logo + navigation, then add a Nav_scroll class to the navigation, if less than this height, then remove the Nav_scroll class.

$ (document). Ready (function () {
var topmain=$ ("#header"). Height () +20//is the altitude of the head plus the distance between the head and the Nav navigation.
var nav=$ (". Nav");
$ (window). Scroll (function () {
if ($ (window). scrolltop () >topmain) {//If the distance at the top of the scroll bar is greater than Topmain, the class is added Nav navigation. Nav_scroll or remove
Nav.addclass ("Nav_scroll");
}else{
Nav.removeclass ("Nav_scroll");
}
});
})

All right, here are all the tutorials for using CSS3 and jquery to make the top position suspension navigation menu for the imitation petal mesh.