home > A computer > How to stretch the horizontal menu to the width of the header. How to make a responsive css menu? CSS Horizontal Dropdown Menu

How to stretch the horizontal menu to the width of the header. How to make a responsive css menu? CSS Horizontal Dropdown Menu

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

obvious benefits

How to make a horizontal menu: markup and design examples

HTML markup and basic styles for the horizontal menu

By default, all list items are located vertically, spanning the entire width of the container element, which in turn spans the entire width of its container block.

HTML markup for horizontal navigation

Menu item
Menu item
Menu item

A horizontal menu located inside the tag can additionally be placed inside the element

...

additional opportunity

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 the list markers*/ margin: 0; /*remove the top and bottom margins of 1em*/ padding-left: 0; /*remove the left padding of 40px*/ ) a ( text-decoration: none; /*remove the underlining of link text*/)

Method 1. li (display: inline;)

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

Method 2. li (float: left;)

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

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

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

Method 4. ul (display: flex;)

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

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

2. Responsive menu for a wedding website

3. Responsive menu with scallops

4. Responsive Ribbon Menu

5. Responsive menu with a logo in the middle

6. Responsive menu with logo on the left

A fairly common site menu layout, 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 one is adjacent to the right, and the distance between all elements is equal. Today we'll show you how it's done.

We offer you an example of the implementation of the rubber menu when CSS help for your resource. In this menu, the items will be located in one line. Javascript will not be used. The contents of the menu will be wrapped in a normal 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 it?

Each programmer can offer his own way of solving 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 a value table or table cell- I hasten to upset. This method does not have sufficient cross-browser compatibility.

Our Solution

Our proposal will be raised on solid foundation from knowledge of HTML5 and CSS3.

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

When using our solution, two mandatory rules must be observed. The first is that the width of the menu item's 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 paragraph 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

ul (text- align: justify; overflow: hidden; /* remove method side effect */ height: 20px; /* also eliminates unnecessary */ cursor: default ; /* sets initial cursor shape */ margin: 50px 100px 0 100px; background: #eee; padding: 5px ) li ( display: inline; /* make menu items text */) li a ( display: inline-block; /* removes word breaks in the menu */ color: #444; ) a: hover ( color: #ff0000; ) ul: after ( /* forming 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 Explorer, you must additionally add the following code to 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 code, we get the following rubber menu:

Disadvantages of the method

Volume code
The impossibility of determining the active state of an element through a class selector. This is due to word breaks in paragraphs (if there 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 on?


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

Hello. For a long time I did not write posts on the topic of how html / css works. 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 rubber (you can add new items to it and the size will not increase, but it will always be 100% of the parent block). So, today we are implementing a rubber menu on css.

If you are too lazy to read the article, you can watch this video. The author also explains everything very nicely:

CSS Fluid Menu Step 1

The first step is always html markup, where without it. But in our case, everything will be simple:

menu wrapper block
the menu itself, displayed through bulleted list(ul tag)
well, the menu items inside, and in them, respectively, there are already links

Everything is clear, here is my markup code:

It all looks standard, like this:

Now we will bring everything into desired view, CSS takes over.

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), and I will also center the block.

wrap(
background: #fff;
max-width: 600px
margin: 0 auto;
}

Step 3 - implement rubberiness

Now we take up the menu itself. I will remove the markers from it (from the ul tag), make the background linear gradient , and, most importantly, with the display: table-row property, I will make the container for the menu behave like a table row. This is important 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 above 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 it 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 over two lines and you will see a display problem. Return the property and everything will be fine.
display: table-cell - since we set the display menu itself to be a table row, it would be logical to set its items to display as cells in a 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 for aligning the text inside in the center
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 unsightly, but that's okay, it's time to bring it to mind.

The last thing to do is to 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 what the menu looks like now:

Again, I'll explain some lines:

text-decoration property removes underlining from links, which is set by default
width: 1000px is perhaps the most important line. You need to set the links to approximately the same width, maybe less, but always more than the widest menu item. The links won't be 1000 pixels wide, because the width will be limited by the li menu item, which has a width set to auto, but it 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 will also display links as cells. Both properties are required.
font - well, it's just a set of settings for the font. Read about css properties for fonts in this article.

Step 4 (optional) you can add interactivity

For example, to change the color of a menu item on hover. This is implemented 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 have not checked the most important thing - how rubbery it is, as I promised you. Well, I'll add 2 more items to the menu:

The menu remains 600 pixels wide. The rest of the items just shrink a little to fit 2 new ones.

I'll add one more long paragraph:

As you can see, the menu shrunk a little more and the long item was displayed quite normally. And if it wasn'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.

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?

In principle, if you set the wrapper block not to a fixed, but to a maximum width, then it does not even need to be adapted. In my case, I have the max-width: 600px property, and when the width becomes less than 600px, the block will simply decrease 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 website building!

Good afternoon!

It often needs to be done horizontal menu, which 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 full width, when you hover it is highlighted. 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 - div-y is assigned the appropriate class.

In every div The container has 2 absolutely positioned side borders that 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.

Each item has an image and text. In order for all this to be aligned strictly in the middle vertically, we use a table. Thanks to the vertical alignment property, our menu items will always display smoothly and won't move away.

CSS RULES

First, we will set styles for the general display of the menu:

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, 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 paragraph does not have a left border. We will fix it later.

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: -moz-linear- 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; ) /* work 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 a lot nicer, but for now we don't have 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 hovered objects */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu:hover > .borderLeftSecond , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* handle cases of first and last item */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

That's all!

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

01.04.2020

A computer

The most interesting:

Distance from the TV depending on the diagonal ... bad choice ...

How to make a closed VKontakte group How to make a private VKontakte group

How to find out if a mobile phone is being tapped How to find out a mobile phone for wiretapping