home / Programs/ Stretch the menu to the full width of the css. How to make a flexible responsive menu in css? HTML markup and basic styles for a horizontal menu

Stretch the menu to the full width of the css. How to make a flexible responsive menu in css? HTML markup and basic styles for horizontal menus

A fairly common layout of the site menu, when the container with it occupies the entire width available on the page. In this case, the first item is adjacent to the left edge, and the last to the right, and the distance between all elements is equal. Today we will tell you how this is done.

We offer you an example of how to implement a fluid menu using CSS for your resource. In this menu, items will be located on one line. Javascript will not be used. The contents of the menu will be enclosed in a regular list. The main feature of such a menu is its versatility, which is expressed in the fact that both the number and the length of the items can be any.

How to implement this?

Each programmer can offer his own way to solve the problem. It all depends on his imagination, level of professionalism and abilities. The most common solution to this problem is to use a table. Also, many would suggest using javascript. Those who would suggest using the display property with the value table or table-cell- I hasten to upset. This method is not sufficiently cross-browser compatible.

Our solution

Our proposal will be built on a solid foundation of HTML5 and CSS3 knowledge.

The core of the process is based on the text-align property with a justify value. For those who have forgotten - I remind you: this property orients the alignment of the text across the entire width of the container.

There are two essential rules to follow when using our solution. The first is that the width of the menu item container must be smaller than the text. That is, not in one line. The second important rule is that words are stretched equally, regardless of whether they belong to the same point or not.

Below is the code that serves as an example of creating a "rubber" menu:

Html

< ul> < li>< a href= "#" >home < li>< a href= "#" >Blog < li>< a href= "#" >news < li>< a href= "#" >Popular < li>< a href= "#" >New items

ul (text-align: justify; overflow: hidden; / * removes side effects of the method * / height: 20px; / * removes unnecessary too * / cursor: default; / * sets the original cursor shape * / margin: 50px 100px 0 100px; background: #eee; padding: 5px; ) li (display: inline; / * makes menu items text * /) li a (display: inline- block; / * fix the word break in the menu * / color: # 444; ) a: hover (color: # ff0000;) ul: after ( / * formation of the second line for working out the method * / content: "1"; margin- left: 100%; height: 1px; overflow: hidden; display: inline- block; )

To work in the good old Internet Explower, you need to add the following code to the CSS

ul (z- index: expression (runtimeStyle. zIndex = 1, insertAdjacentHTML ("beforeEnd & apos,"< li class = "last" > "));) ul .last (margin-left: 100%;) * html ul (/ * need ie6 only * / height: 30px;)

Having registered the necessary property values and the code, we get the following rubber menu:

Disadvantages of the method

Bulk code
Inability to determine the active state of an element through a class selector. This is due to the break of words in paragraphs (if it is one). The solution to this problem is to add another container inside the list items.
For the dropdown menu, you need to customize the code due to the negative impact of overflow.

What browsers does it work in?


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Horizontal menu is a list of site sections, so it is more logical to mark it inside the element

How to make a horizontal menu: markup and design examples

HTML markup and basic styles for a horizontal menu

By default, all list items are positioned vertically, occupying the entire width of the container element in width, which in turn occupies the entire width of its container block.

HTML markup for horizontal navigation

Menu item
Menu item
Menu item

A horizontal menu inside a tag can optionally be placed inside an element

...

There are several ways to place them. horizontally... First, you need to reset the default browser styles for navigation elements:

Ul (list-style: none; / * remove list markers * / margin: 0; / * remove top and bottom margin equal to 1em * / padding-left: 0; / * remove left margin equal to 40px * /) a ( text-decoration: none; / * remove the underlining of link text * /)

Method 1.li (display: inline;)

Making the list items lowercase. As a result, they are positioned horizontally, on the right side between them is added a gap equal to 0.4em (calculated relative to the font size). To remove it, add a negative li right margin for li (margin-right: -4px;). Next, we will style the links as we wish.

Method 2.li (float: left;)

Floating the list items. As a result, they are positioned horizontally. The height of the container block ul becomes zero. To solve this problem, we add (overflow: hidden;) to the ul, expanding it and thus allowing it to contain floated elements. For the links, add a (display: block;) and style them as you wish.

Method 3.li (display: inline-block;)

We make the elements of the list inline-block. They are located horizontally, a gap is formed on the right side, as in the first case. For the links, add a (display: block;) and style them as you wish.

Method 4.ul (display: flex;)

Making the ul a flexible container using a model. As a result, the elements of the list are arranged horizontally. Add a (display: block;) for the links and style them as you wish.

1. Responsive menu with an underline effect when hovering over a link

2. Responsive menu for the wedding site

3. Adaptive menu with scallops

4. Responsive menu on the ribbon

5. Responsive menu with a logo in the middle

6. Responsive menu with logo on the left

We continue the series with a tutorial on drop-down menus. The next step is a horizontal drop-down menu in css with your own hands.

If you got here by accident or you were looking for another implementation of the drop-down menu, I advise you to go to the parent section.

This section will describe the horizontal dropdown menu in CSS and HTML.

Page navigation:

So, our task:

make a horizontal menu with css dropdown (on ul li lists) without using jQuery and Javascript and also without using tables
in the code.
Dropdown horizontal html menu
First of all, before starting to write the code, we need to create an html template for the menu.
Due to the fact that we are making a universal menu, I want to make it as similar as possible to the output of the WordPress menu. In my opinion, this is one of the simplest and most versatile Html menu codes. It looks like this:

home

About Us

Our services

Our service # 1

Our service # 2

Our service # 3

Our service # 4

Service 5

news

Contacts

As you can see from the code, our dropdown menu will be implemented on the ul and li lists. This is what this menu looks like without CSS styles:
Let's just say it looks ugly, like a regular list. Next, we need to colorize this menu with CSS styles.
CSS horizontal dropdown menu
CSS styles for dropdown menus and more are as essential as air. After all, the dropdown tab is based on the: hover pseudo-class.
For the horizontal dropdown menu, we need the following styles:
# menu1 (position: relative; display: block; width: 100%; height: auto; z-index: 10;) # menu1 ul (position: relative; display: block; margin: 0px; padding: 0px; width: 100 %; height: auto; list-style: none; background: # F3A601;) # menu1> ul :: after (display: block; width: 100%; height: 0px; clear: both; content: "";) # menu1 ul li (position: relative; display: block; float: left; width: auto; height: auto;) # menu1 ul li a (display: block; padding: 9px 25px 0px 25px; font-size: 14px; font- family: Arial, sans-serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box; ) # menu1 ul li> a: hover, # menu1 ul li: hover> a (background: # EBBD5B; color: # 2B45E0;)
This is not the end, but only a portion of the CSS for the main horizontal menu. Next, we'll write the styles for the dropdown menu:
# menu1 ul li ul (position: absolute; top: 36px; left: 0px; display: none; width: 200px; background: # EBBD5B;) # menu1 ul li: hover ul (display: block;) / * this line implements drop mechanism * / # menu1 ul li ul li (float: none; width: 100%;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 25px; width: 100%; box-sizing: border-box; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child a (border-top: 0px;) # menu1 ul li ul li a: hover ( background: # FDDC96; color: # 6572BC;)
Now that's it. The drop-down mechanism itself is implemented in one line.
See the skin with this menu:
Rice. 2 (horizontal dropdown menu)
Below is a demo view of the drop-down menu, as well as a link to download the source. (The demo will open as a drop-down on top of this page, no need to click open in a new window 🙂 or the mouse wheel)
Full width horizontal dropdown menu
Most of you can reproach me, they say, such menus, as I showed above, are greetings from the past and partly you are right, although I have come across fresh layouts with such menus.
I hope you downloaded the example above. Html remains the same, but we will change the CSS completely. You can just take the CSS code from here and paste it into the downloaded example, or watch it in demo mode.
#conteiner (width: 1000px; height: auto; margin: 0px auto; padding-top: 10px;) # menu1 (position: relative; display: block; width: 100%; height: auto; z-index: 10;) # menu1 ul (position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: auto; list-style: none; background: # F3A601;) # menu1> ul (text-align: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (position : relative; display: inline-block; width: auto; height: auto; vertical-align: top; text-align: left;) # menu1 ul li a (display: block; padding: 9px 35px 0px 35px; font-size : 14px; font-family: Arial, sans-serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing : border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (background: # EBBD5B; color: # 2B45E0;) # menu1 ul li ul (position: absolute; top: 36px; left : 0px; display: none; width: auto; background: # EBBD5B; white-space: nowrap; ) # menu1 ul li: last-child ul (/ * the last item will be attached to the right * / left: auto; right: 0px;) # menu1 ul li: hover ul (display: block;) / * this line implements the mechanism dropouts * / # menu1 ul li ul li (display: block; width: auto;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 35px; width: 100% ; box-sizing: border-box; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child a (border-top: 0px;) # menu1 ul li ul li a: hover (background: # FDDC96; color: # 6572BC;)
Also, this example differs from the first in that the drop-down menu, the drop-down itself, stretches depending on the width of all menu items.
For very long menu items, this option may not be very convenient, since they will climb out of the bounds. To disable this property, just find the property "white-space: nowrap;" at the selector # menu1 ul li ul, and remove it.
Below you can watch a demo or download the sources for the horizontal drop-down menu:
Without separators, this menu looks so-so. Separators can be added to html by hand, but if you have a CMS, for example WordPress, it is not very convenient to add them by hand.
Delimited horizontal dropdown menu
There are several dozen options for how to add a strip (separator) between menu items in pure CSS. Variants that use :: before or :: after, or much simpler border-left, I will not duplicate border-right.
There are situations when the layout is built so wonderfully that you can't do without jquery.
The html code remains the same, we only include the jQuery library and the file that uses it at the very beginning:

Right after.
As you understand, you need to create a file script-menu-3.js and put this little code there:
$ (document) .ready (function () ($ ("# menu1> ul> li: not (: last-child)"). after ("");));
The CSS styles for such a menu should be left as they are, + throw this piece at the end:
# menu1 ul li.razd (height: 28px; width: 1px; background: #ffffff; margin-top: 4px;)
Such a horizontal drop-down menu with delimiters in jQuery will look like this:
You can view it in demo mode or download the horizontal menu template below:
The advantages of this solution are:
the menu will drag dynamically;

indents from separator to paragraph are the same everywhere;

more beautiful and flexible design.

CSS + HTML horizontal layered dropdown menu
Since we're talking about multi-level drop-down menus on hover, it's probably worth dividing them into subgroups:
with a vipadashka when hovering to the side

with a third level pop-up dropdown

In my examples, I will show a 3-level multi-level CSS menu, then I think it will not be difficult to guess what needs to be done.
Multilevel drop-down menu with a vipadash to the side on hover
First, we need to slightly correct our html. There will be added a couple of lines for level 3:

home

About Us

Our services

Our service # 1

Service add-on 1

Service add-on 2

Our service # 2

Service add-on 3

Service add-on 4

Our service # 3

Our service # 4

Service 5

news

Contacts

Road map

Map add-on

Map add-on 2

Feedback form

#conteiner (width: 1000px; height: auto; margin: 0px auto; padding-top: 10px;) # menu1 (position: relative; display: block; width: 100%; height: auto; z-index: 10;) # menu1 ul (position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: auto; list-style: none; background: # F3A601;) # menu1> ul (text-align: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (position : relative; display: inline-block; width: auto; height: auto; vertical-align: top; text-align: left;) # menu1 ul li.razd (height: 28px; width: 1px; background: #ffffff; margin-top: 4px;) # menu1 ul li a (display: block; padding: 9px 45px 0px 45px; font-size: 14px; font-family: Arial, sans-serif; color: #ffffef; line-height: 1.3 em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (background: # EBBD5B; color: # 2B45E0; ) # menu1 ul li ul (position: absolute; top: 36px; left: 0px; display: none; width: auto; background: # EBBD5B; white-space: nowrap;) # menu1> ul> li: last-child> ul (/ * the last item will be attached to the right * / left: auto; right: 0px;) # menu1 ul li: hover> ul (display: block;) / * this line implements the dropout mechanism * / # menu1 ul li ul li (display: block; width: auto;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 45px; width: 100%; box-sizing: border-box ; border-top: 1px solid #ffffff;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: hover, # menu1 ul li ul li: hover> a (background: # FDDC96; color: # 6572BC;) # menu1 ul li ul li ul (top: 0px; left: 100%; display: none; background: # fddc96;) # menu1> ul> li: last-child > ul ul (left: auto; right: 100%;) # menu1 ul li ul li ul a (color: # F38A01;)
Copy files for jQuery as they were from the previous example. I decided to leave the separators so that the menu would look at least a little better. You can, of course, without them.
This is how it happened:
I made 2 skins in one to show how the dropdown looks on the right and in the middle.
Below you can watch a demo and download an example:
Multilevel drop-down menu with a pop-up vipadash on hover
A bit of oil turned out in the title, but it will work, the main thing is the code.
The essence of this example is to make a horizontal full width dropdown menu with a full width dropdown + layering.
I will not change the html code, it can be taken from the previous example. We also keep the jQuery separators.
Only the complete CSS will change:
#conteiner (width: 1000px; height: auto; margin: 0px auto; padding-top: 10px;) # menu1 (position: relative; display: block; width: 100%; height: auto; z-index: 10;) # menu1 ul (position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: auto; list-style: none; background: # F3A601;) # menu1> ul (text-align: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (position : relative; display: inline-block; width: auto; height: auto; vertical-align: top; text-align: left;) # menu1> ul> li (position: static;) # menu1 ul li.razd (height : 28px; width: 1px; background: #ffffff; margin-top: 4px;) # menu1 ul li a (display: block; padding: 9px 45px 0px 45px; font-size: 14px; font-family: Arial, sans- serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (background: # EBBD5B; color: # 2B45E0; ) # menu1 ul li ul (position: absolute; top: 36px; left: 0px; display: none; width: 100%; background: # EBBD5B;) # menu1> ul> li> ul :: after (clear: both; float: none; width: 100%; height: 0px; content: "";) # menu1 ul li: hover> ul (display: block;) / * this line implements the dropout mechanism * / # menu1 ul li ul li (display : block; width: 30%; float: left;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 45px; width: 100%; box-sizing: border -box;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: hover, # menu1 ul li ul li: hover> a (background: # FDDC96; color: # 6572BC;) # menu1 ul li ul li ul (top: 0px; left: 100%; display: none; background: # fddc96; z-index: 15;) # menu1 ul li ul li ul li (display: block; float: none; width: 100%;) # menu1 ul li ul li ul a (color: # F38A01; border-top: 1px solid #ffffff;)
This is how the menu will look: The only thing is that the site must have enough space, since the extreme item on the right has no place for a dropdown. This problem can be solved through: nth-child, but I did not bother to fence the garden.
See a demo of a horizontal layered dropdown menu:
As you may have noticed: the bottom plate is also full width. This is how dropouts are made in several blocks.
That's all for me, I hope at least one of my examples suits you. Thank you for the attention.
it will benefit both them and me 🙂.
If you have read the entire post, but did not find how to make your horizontal drop-down menu in css, ask a question in the comments or use the site search.
Also, I advise you to visit the parent page https: // site / vypadayushhee-menu /, all examples and varieties of drop-down menus are collected there.
Hi. For a very long time I have not written posts on the work of html / css. Recently, I just started to make up a new layout and in the process came across an interesting trick that allows you to make the menu rubbery (you can add new items to it and the size will not increase, but there will always be 100% of the parent block). So, today we will implement the rubber menu in css.
If you are too lazy to read the article, you can watch this video. The author also explains everything very coolly:
CSS Gum Menu - Step 1
The first step is always html markup, where can we go without it? But in our case, everything will be simple:
block wrapper for the menu

the menu itself, displayed via a bulleted list (ul tag)

well, the menu items are inside, and in them, accordingly, there are already links

Everything is clear, this is my markup code:

Paragraph 1

Point 2

Point 3

Item 4

Item 5

It all looks standard, like this:
Now we will bring everything into the desired form, the CSS will take over the work.
Step 2 - basic styles
Next, I'll add styles to the wrapper block. Namely, I will set the maximum width to 600 pixels (just to make it convenient to take a screenshot so that the menu fits in), and also center the block.
Wrap (
background: #fff;
max-width: 600px;
margin: 0 auto;
}
Step 3 - we implement the rubberiness
Now let's get down to the menu itself. I will remove the markers from it (at the ul tag), make the background linear gradient, and, most importantly, use the display: table-row property to make the container for the menu behave like a table row. It is important to do this for further manipulations.
R-menu (
background: linear-gradient (to right, # b0d4e3 0%, # 88bacf 100%);
display: table-row;
list-style: none;
}
As you can see, the given code just solved everything I wrote about. By the way, it is convenient to generate gradients using the Ultimate CSS Gradient generator tool. I will write about him sometime.
R-menu li (
vertical-align: bottom;
display: table-cell;
width: auto;
text-align: center;
height: 50px;
border-right: 1px solid # 222;
}
vertical-align: bottom - this property is necessary so that if the text in the menu item takes 2 lines, it will be displayed exactly. When we make the menu, you can remove this property, zoom in so that the items shrink and the text wraps on two lines and you will see a display problem. Return the property and everything should be fine.

display: table-cell - since we have set the display menu itself as a table row, it would be logical to set its items to be displayed as cells in the table. It is necessary.

width: auto - the width will be calculated automatically, depending on the length of the text in the paragraph

text-align: center is just to center the text inside

height: 50px - set the height to 50 pixels

well, border-right is just a border on the right, such a separator for items

While the menu looks ugly, but nothing, it's time to bring it to mind.

The last thing to do is style the links inside the paragraphs. Here I have this code:
R-menu li a (
text-decoration: none;
width: 1000px;
height: 50px;
vertical-align: middle;
display: table-cell;
color: #fff;
font: normal 14px Verdana;
}
And this is how the menu looks now:

Again, I'll explain some lines:
the text-decoration property removes the default underline for links

width: 1000px is probably the most important line. It is necessary to set the links approximately the same width, it is possible and less, but necessarily more than the widest menu item. The links will not become 1000 pixels wide, since the li menu item with the width set to auto will limit the width, but this will make it so that for any number of items in the menu, it will always be 100 percent wide.

vertical-align: middle and display: table-cell - the first will align the text vertically to the center, and the second also makes the links appear as cells. Both properties are needed.

font is just a bunch of font settings. Read about css properties for fonts in this article.

Step 4 (optional) add interactivity
For example, to change the color of the menu item on hover. This is done quite simply using the hover pseudo-class:
R-menu li: hover (
background-color: # 6bba70;
}
Testing the menu for rubberiness
Great, the menus are ready, but we haven't checked the most important thing - how rubbery it is, as I promised you. Well, I will add 2 more items to the menu:

The menu remains 600 pixels wide. The rest of the items just shrank a little to fit 2 new ones.
I will add 1 more long point:

As you can see, the menu shrank a little more and the long item was displayed quite normally. And if it weren't for the vertical-align: bottom property that I told you about, the menu would look worse.
I will reduce the menu to three items.

The items have become much freer, but the menu itself has not changed in width. So we made a 100% rubber menu!
How to adapt it?
Basically, if you gave the wrapper block a maximum width rather than a fixed one, then it doesn't even need to be adapted. In my case, I have a max-width: 600px property and when the width becomes less than 600 pixels, the block will simply shrink following the screen, without forming a horizontal scroll.
Well, if you want to somehow change or correct the menu on mobile devices or wide screens, then media queries will help you! Good luck in site building!

The download will start now ...
Don't forget to share material
on social networks with your
colleagues

© 2021, mkr-novo2.ru, Internet. Education. Programs. Firmware. Installation and configuration. Navigators

mkr-novo2.ru
Internet Multimedia Navigators Education ON Problems

about the project
Feedback About the site

Contacts

Password recovery

Enter your email to recover your password!