Full page width css menu. Beautiful full-width horizontal menu
Good afternoon
It is often necessary to make a horizontal menu that will stretch across the entire 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 the full width and stands out when hovered over. The menu is rounded on the sides.
HTML MARKUP
|
|
...
|
To make the menu full width, I used tables with 100% width. Each table has a menu item div container. Depending on whether the first, last or intermediate menu item is a div, the corresponding class is assigned.
Each div container has 2 side borders with absolute positioning, which are necessary 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.
The active class is responsible for the selected menu item and highlights it.
In each item we have a picture and text. To ensure that all this is aligned strictly in the middle vertically, we use a table. Thanks to the vertical alignment property, our menu items will always be displayed smoothly and will not move away.
CSS RULES
First, let's 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, 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 a more beautiful look:
So far, the first point does not have a left border. We'll fix it a little later.
Now let's add hover effects for 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; ) /* will work out 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-left: none; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )
Now our menu looks much nicer, but for now we don’t have borders for the highlighted menu items. Let's fix this!
/* 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; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* handle the cases of the 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 an excellent menu stretched across the entire width of the parent block! The items do not overlap each other when you hover the mouse and the layout does not jump.
A fairly common layout of a 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 one is adjacent 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 implementing a rubber menu using CSS for your resource. In this menu, the 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 length of items can be any.
How to implement this?Each programmer can offer his own way of solving a given 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. I hasten to disappoint those who would suggest using the display property with the value table or table-cell. This method is not sufficiently cross-browser compatible.
Our solutionOur offering will be built on a solid foundation of HTML5 and CSS3 knowledge.
The essence of the process is based on the text-align property with the justify value. For those who have forgotten, I remind you: this property orients the text alignment across the entire width of the container.
When using our solution, two mandatory rules must be observed. The first is that the width of the menu item container should 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 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; /* eliminates the side effects of the method */ height: 20px; /* also eliminates unnecessary */ cursor: default ; /* sets the initial shape of the cursor */ margin: 50px 100px 0 100px; background: #eee; padding: 5px; ) li ( display: inline; /* makes menu items text */ ) li a ( display: inline- block; /* eliminates word breaks in the menu */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* forming the second line to work 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 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 specified the necessary property values and code, we get this rubber menu:
Disadvantages of the method6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
A horizontal menu is a list of website sections, so it’s more logical to place it inside the element
- , and then apply CSS styles to its elements. This menu layout is the most common due to the obvious advantages in its positioning on a web page. How to make a horizontal menu: layout and design examples
HTML markup and basic styles for a horizontal menu
- Menu item
- Menu item
- Menu item ...
- home
- About Us
- Our services
- Our service No. 1
- Our service No. 2
- Our service No. 3
- Our service No. 4
- Service 5
- News
- Contacts
- the menu will be drawn dynamically;
- the indents from the separator to the paragraph are the same everywhere;
- more beautiful and flexible design.
- with a vip pad when pointing to the side
- with a pop-up drop-down of the third level
- home
- About Us
- Our services
- Our service No. 1
- Addition to service 1
- Addition to service 2
- Our service No. 2
- Addition to service 3
- Addition to service 4
- Our service No. 3
- Our service No. 4
- Service 5
- Our service No. 1
- News
- Contacts
- Road map
- Map add-on
- Addition for map 2
- Feedback form
- Road map
By default, all list elements are arranged vertically, occupying the entire width of the container element, which in turn occupies the entire width of its container block.
HTML markup for horizontal navigation
A horizontal menu located inside a tag can additionally be placed inside the ... and/or ... element. Thanks to this, the html markup is given semantic meaning, and also provides an additional opportunity for formatting the menu block.
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 the top and bottom margin equal to 1em*/ padding-left: 0; /*remove the left padding equal to 40px*/ ) a ( text-decoration: none; /*remove underlining of link text*/)
Method 1. li (display: inline;)Making list elements lowercase. As a result, they are positioned horizontally, with a gap of 0.4em added on the right side between them (calculated relative to the font size). To remove it, add a negative right margin for li li (margin-right: -4px;) . Next, we style the links as we wish.
Method 2. li (float: left;)Making list elements floating. 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 ul, extending 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 elements inline-block. They are located 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 list elements are arranged horizontally. We add a (display: block;) for the links and style them as desired.
1. Adaptive 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: 0 30px; ) ) 2. Adaptive 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; transition: .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 scalloped menu @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.current: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. Adaptive menu on the ribbon @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); ) .top-menu:before, .top-menu:after ( content: ""; position: absolute ; 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(255, 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:before (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )We continue the series with a lesson on drop-down menus. Next up is a do-it-yourself horizontal drop-down menu using css.
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 a horizontal dropdown menu in CSS and HTML.
Page navigation:
So, our task:
make a horizontal menu with a drop-down list css (on ul li lists) without using jQuery and Javascript, and also without using tables