All geek questions in one place

How to make the menu bar fixed so that it does not move when scrolling

I have three problems:

  • I want my menu links to be in bold when I hover over them, but it changes the elements to the right when I do this, how can I stop them from moving?

  • In the Two drop-down menu, how can I do this so that the elements appear right below the Two, with the appropriate spacing and with an equal width background, even though the two elements were not the same sum of characters?

  • What can I do to keep the menu bar fixed so that when I scroll down it remains visible at the top of the page? I tried to add a “position: fixed”, but that just messed it all up.

Any help is much appreciated, thanks!

<head> <title>Untitled</title> </head> <body> <div id="wrap"> <div id="menu"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a> <ul> <li><a href="#">Six</a></li> <li><a href="#">Seven</a></li> </ul></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul> </div> <div id="middle"></div> <div id="footer"></div> </div> </body>

I could not figure out how to insert css here without getting everything distorted, so here is the link to the stylesheet: https://dl.dropbox.com/u/14754850/stylesheet.css

+4
source share
3 answers

Here are the answers to your first two problems:

1)

 #menu ul li { ... width: 90px; /* Give items fixed size */ }

2)

 #menu ul li ul li { background-color: #2d2d2d; /* Add background */ } #menu ul li ul li:last-child { padding-bottom: 10px; /* Dirty fix for last menu item */ }

Added:

 #menu ul li ul li a { padding-bottom: 0px; /* Makes drop down items more compact */ } #menu ul li a { ... padding: 10px 20px 10px 20px; /* Give menu headers some spacing */ ... } #menu ul { padding: 0; /* Fix left space */ }

Try: http://jsfiddle.net/uYTnf/3/

+3
source

Start by saving the div from the div div. Thus, you don’t have any strange things to do with the position: fixed.

  • Unfortunately, with a width of: auto, you cannot control the "push" you see. You want to specify list items with a fixed one (be it percentage or pixel value). Percentage is preferred since it provides a flexible design.

  • Make sure that the background color applies to the ul element and not to the li element. Also, use text-align: center to keep them beautiful and centered.

  • Position: fixed correctly! Just be sure to set top: 0 and left: 0 so that the panel doesn't do anything funky in different browsers. In addition, you have a gasket on top and bottom of your main container that holds the bar all the way to the top.

Here is a script with a modified #menu li:hover ul and #menu ul li ul li .

+1
source

Idk if that helps here fiddle

http://jsfiddle.net/squinny/tJZ25/1/

on ul li I just install with a width: 100px;

  #menu ul li { text-decoration: none; display: inline; position: relative; float:left; width: 100px; }
0
source

Source: https://habr.com/ru/post/1447347/

More articles:


All Articles