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
- and then apply CSS styles to its elements. This menu arrangement is the most common due to obvious benefits in its positioning on the web page.
- Menu item
- Menu item
- Menu item ...
- 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 .
- 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
- 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
- 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.
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
A horizontal menu located inside the tag can additionally be placed inside the element and/or
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
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;) .menu- main li:after ( content: "|"; color: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a ( text-decoration: none; font-family: "Ubuntu Condensed", sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom : -5px; left: 50%; background: #feb386; transition: .8s; ) .menu-main a:hover:before, .menu-main .current:before (left: 0;) .menu-main a: hover:after, .menu-main .current:after (right: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li:after (content: none;) .menu- main a ( padding: 25px 0 20px; margin: 030px; ) )2. Responsive menu for a wedding website
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ).top-menu:after ( border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; ) .menu-main:before, .menu-main:after ( content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50% ); ) .menu-main:before (left: 15px;) .menu-main:after (right: 15px;) .menu-main li ( display: inline-block; padding: 5px 0; ) .menu-main a ( text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom : 1px solid transparent n: .3s linear; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) )3. Responsive menu with scallops
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; ) .menu-main:after ( content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; color: #777777; transition: .3s linear; position: relative; ) .menu -main a:before, .menu-main a:after ( content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; ) .menu-main a:before (left: 5px;) .menu-main a:after (right: 5px;) .menu-main a. current:before, .menu-main a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (opacity: 1;) .menu-main a.current, .menu-main a:hover (color: #F58262; ) @media(max-width:680px) ( .menu-main li (display: block;) )4. Responsive Ribbon Menu
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); ) ; z-index: 2; left: 0; width: 100%; height: 3px; ) .top-menu:before ( top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); ) .top- menu:after ( bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) . menu-main:before, .menu-main:after ( content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotate(360deg); z-index: -1; ) .menu-main:before ( left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px solid rgba(2 55, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; color: white; transition: .3s linear; ) .menu-main a.current, .menu-main a:hover (background: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (content: none;) .menu-main a (display: block;) )5. Responsive menu with a logo in the middle
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( position: relative; background: rgba(34,34,34,.2); ) .menu-main ( list-style: none; margin: 0; padding: 0; ) .menu-main:after ( content: ""; display: table; clear: both; ) .left-item (float: left;) .right-item (float: right;) .navbar-logo ( position: absolute; left: 50%; top : 50%; transform: translate(-50%,-50%); ) .menu-main a ( text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; letter-spacing: 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: white; transition: .3s linear; ) .menu-main a:hover (background: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-top: 90px; text-align: center; ) .navbar-logo ( position: absolute; left: 50% ;top: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; display: inline-block; ) .menu-main a ( line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) )6. Responsive menu with logo on the left
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( content: "" ;display: table; clear: both; ) .navbar-logo (display: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; ) .menu-main a:hover:before (opacity: 1;) @media (max-width: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:be fore (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )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 a> li> < li>< a href= "#" >Blog a> li> < li>< a href= "#" >News a> li> < li>< a href= "#" >Popular a> li> < li>< a href= "#" >New a> li> ul>
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" > li> ")); ) 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
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:
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;
}
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:
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
... |
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.