Very often, on sites with a lot of content, the visitor gets lost on the page and has to scroll to the very top of the page to find the navigation menu. Technologies do not stand still, monitor screens and their resolutions are becoming larger, so now on a website it is no longer a pity to allocate 40 pixels on top for a fixed menu when scrolling a website page. The visitor will be able to always see which section he is in, and also have fast access to the navigation menu. Ultimately, this increases the depth of browsing the site :)
What is the essence of a fixed navigation menu on a website? Initially, our menu is located in its usual place, somewhere in the header, in my case at a distance of 140px from the top edge. As soon as the visitor scrolls the page by these same 140px at the bottom, the menu is fixed at the very top of the window and remains there for the rest of the time until the scroll is returned to the top position.
A fixed menu when scrolling a page is essentially a control panel that is always with you. Our menu will be simple.
From theory to practice. Everything is quite simple and minimalistic, most of which is given to styles that you can customize for yourself. I made a fixed menu as in the picture; when scrolled, the color of the menu becomes slightly transparent so that it does not look heavy and the content underneath is visible.
Our styles. I have a menu with a width of 1180px, located in the center. The header is 180px high, the scrolling menu is included in it and takes up 40px. This means the distance from the top 140px. Let's remember this number)
#header ( height: 180px; ) #navigation( background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; ) #navigation.fixed( position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); ) #navigation ul( width: 1180px; padding -left: 0; margin: 0 auto; display: block; ) #menu li( float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; ) #menu a ( color: #fff; text-decoration: none; font-family: Verdana; ) #menu>li a:hover( color: #656565; transition: color 0.5s ease; )
And here are the few lines of code that work the magic) We set the conditions for scrolling the page, above 140px or below. Depending on this, the fixed class is assigned to our navigation menu. And with this class, as stated above, we make the menu fixed and pinned to the top.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop()$(window).height())( $("nav").css(("height": $("nav").height(),"width": $( "nav").width())).addClass("fixed"); )else( $("nav").removeClass("fixed"); ) ));
That is, when scrolling the page, we check “whether the amount of scrolling the page is greater than the height of the window”, and if it is greater, we add the fixed class to our menu (and specify the height and width, because when using position: fixed the block dimensions are lost), in otherwise, delete this class.
Fixed( position: fixed; top:0; left: 0; )
That is, if such a class is present, the object will become fixed.
Ready. The menu will only stick when the user scrolls the page more than the screen size. Of course, you can fix the menu after the user scrolls the page by the amount of the menu itself, or by some predetermined value.
We always fix the menu (second fixing option)For this method we just need CSS. We will permanently fix the menu, and if desired, we will make a top indent at the body so that when scrolling to zero, the menu does not overlap with the rest of the content.
Let's consider a script that allows you to implement a fixed menu for a website. The concept of developing this script includes a programming language JQuery, since with it you can not only fix the menu, as is usually the case with the property css fixed, but also when scrolling the page up, it will be guaranteed to keep the indentation from the header, which you can write in the file js. Moreover this technology ideal for a fixed menu, both lower and upper.
Having checked the script for cross-browser compatibility, it was found that it works perfectly on all new versions, but the browser has problems Internet Explorer earlier than version 9, but there is nothing surprising here, this is typical of old browsers.
I hope you have been using the new ones for a long time.
First part. Connecting styles and js files.
Let's first connect all the necessary styles according to the standard and add files js, which are required for this script. First we include the style file demo.css.
Then we connect the library jquery-latest.min.js and the menu.js file, which will be responsible for the functionality of indents and joints in the menu, as well as for the initial correct position specified in height.
Second part. File index.php.
Everything is simple here, we display the menu according to the standard via ulli and make a shell block element div, which will have an id menu, interacting fully with styles and file menu.js.
Ru/news/">News
The third part. File demo.css.
Let's move on to the fixed menu styles and write down the main properties that should be mandatory! First, we register for the identifier menu: background, position and width. Secondly, we align it all in the center and set the height.
#menu ( background:#ab4040; width:100%; position:fixed; ) #menu ul( margin:0 auto; width:750px; height:40px; )
Then we work with each menu element, or rather with links, and assign the following properties to them.
Individual hover properties, frames, etc. are just for beauty and are considered optional.
#menu ul li ( float:left; list-style:none; width:140px; text-align:center; border-right:1px inset #d0d0d0; height:40px; ) .menuleft( border-left:1px inset #d0d0d0 ; ) #menu ul li a ( line-height:40px; text-decoration:none; color:#ffffff; ) #menu ul li:hover( box-shadow:0 1px 0 #ab4040; background:#f43e3e; )
Fourth part. File menu.js.
Now we have the most interesting part. We will fix our menu at the level where we need it. Let's write the variable menu_height, in which we will store the height of the header of our site. This will allow you to accurately fix the menu at the required distance from the site header when scrolling the page. In variable element, we store the id properties menu and set the property top, indicating that the menu will be at the top, and comparing with the variable menu_top, calculate the required distance from the header to the menu.
Loading...
