home / Installation and configuration/ Menu full page width css. How to make a flexible responsive menu in css? Multilevel drop-down menu with a pop-up vipadash on hover

Full width menu css. How to make a flexible responsive menu in css? Multilevel drop-down menu with a pop-up vipadash on hover

Hi. For a very long time I have not written posts on the topic of html / css. Recently, I just started to make up a new layout and in the process I 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 Rubber 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:

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 - implementing the rubberiness

Now let's get down to the menu itself. I will remove the markers from it (at the ul tag), make a 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 later.

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 paragraphs

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 a code like this:

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. You need to set the links to approximately the same width, it can be 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 600px, the block will simply shrink to follow 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!

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 container for the menu item 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

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;)

We make 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 right margin li (margin-right: -4px;) for li. 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 a 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

Good day!

It is often necessary to make a horizontal menu that will stretch to the full width of the parent block, regardless of how many items it contains.

Today I would like to show you how to create just such a menu.

So, our menu will be as follows:

It is stretched to its full width, and is highlighted on hover. The menu is rounded on the sides.

HTML markup

home

Interesting news

Another menu item!

To make the menu full width, I used tables with 100% width. Each table has div menu item container. Depending on whether the first, last or intermediate menu item is div-y is assigned the appropriate class.

In each div the container has 2 side borders with absolute positioning, which are needed for correct display. If you use standard borders, then when you switch menu items, the text will jump by 1-2 pixels, which is good.

Class active is responsible for the selected menu item and highlights it.

At each point, we have a picture and text. To make it all aligned strictly in the middle vertically, we use a table. Thanks to the vertical alignment property, our menu items will always display smoothly and will not go away.

CSS RULES

First, let's style the general menu display:

Menu_container (padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px;) .menu_container td (vertical-align: middle; / * vertical alignment * /) .last_point_menu, .first_point_menu, .middle_point_menu ( width: 100%; height: 47px; border: 1px solid #dadbda; z-index: 1000; position: relative; border-left: none;) .inner_table (width: 100%; height: 100%;) .inner_table td (padding: 0px; vertical-align: middle; border: none; text-align: left; width: 150px; padding-left: 4px;) .td.inner_table_title (padding-top: 4px; font-weight: bold;) .td.inner_table_img (width: 40px! important;) .inner_table_menu (height: 100%; padding: 0px; vertical-align: middle; border: none; text-align: left;) .inner_table_title (padding-left: 10px; padding-right: 10px; text-transform: uppercase; line-height: 13px;) .inner_table_menu td.inner_table_img (width: 30px! important; height: 30px! important; padding-left: 15px;)

For beauty, let's round the corners on the sides of the menu:

First_point_menu (-webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid #dadbda;) .last_point_menu (-webkit-border-top-right-radius: 5px; -webkit-border -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px ;)

Now our menu has acquired a more beautiful look:

So far, the first item has no left border. We will fix it a little later.

For now, let's add hover effects to the menu.

Middle_point_menu: hover, .last_point_menu: hover, .first_point_menu: hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active (background-color: # CAE285; background-image- gradient (top, # CAE285, # 9FCB56); background-image: -webkit-gradient (linear, 0 0, 0 100%, from (# CAE285), to (# 9FCB56)); background-image: -webkit-linear -gradient (top, # CAE285, # 9FCB56); background-image: -o-linear-gradient (top, # CAE285, # 9FCB56); background-image: linear-gradient (to bottom, # CAE285, # 9FCB56); border: 1px solid # 9FCB56; border-color: # aec671 # 9fbb62 # 87ac4a; border-left: none; z-index: 5000;) / * will work the borders on hover * / .first_point_menu (border: 1px solid #dadbda;) .first_point_menu: hover, .first_point_menu.active (border: 1px solid # 9FCB56; border-color: # aec671 # 9fbb62 # 87ac4a;) .last_point_menu (border: 1px solid #dadbda; border-left: none;) .last_point_menu: hover (border: 1px solid # 9FCB56; border-l eft: none; border-color: # aec671 # 9fbb62 # 87ac4a; ) .last_point_menu.active (border-left: none;)

Now our menu looks much nicer, but so far we have no borders for the selected menu items. Let's fix it!

/ * styles for side borders * / .borderLeftSecond, .borderRightSecond (display: none; position: absolute; width: 1px; height: 47px; background-color: # 9fbb62; top: 0px; z-index: 1000;) / * absolute offsets for borders * / .borderLeftSecond (left: 0px;) .borderRightSecond (right: -1px;) / * show borders for active and hover * / .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu: hover> .borderLecond , .middle_point_menu: hover> .borderRightSecond, .last_point_menu: hover> .borderLeftSecond .first_point_menu: hover> .borderRightSecond (display: block;) / * handle first and last item cases * / .first_point_menu.Second; ) .last_point_menu.active .borderRightSecond (display: none;) .last_point_menu: hover .borderLeftSecond (display: block;)

That's all!

We've got a great menu stretched to the full width of the parent block! Points on each other do not run over each other when you hover the mouse and the layout does not jump.