What is a computer program?

Basic operating system objects and working with them

Computer diagnostic programs Computer troubleshooting program

How to open a .DCM file? How to open a disk with MRI or CT images? Possible problems with files in the DCM format

What to do if Kaspersky anti-virus does not update Kaspersky anti-virus does not update solution to the problem

How to duplicate a layer in Photoshop?

How to make a rubber responsive menu using CSS? Do-it-yourself horizontal drop-down menu using CSS and Html. Expand the menu to the full width.

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

...

home

Interesting news

Another menu item!

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 made it great 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 horizontal menu is a list of website sections, so it’s more logical to place it inside the element

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

Menu item
Menu item
Menu item

A horizontal menu located inside a tag can additionally be placed inside the ... and/or ... element. Thanks to this html markup, semantic meaning is given, and also appears additional opportunity to format 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*/)

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.

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.

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.

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.

A fairly common layout for 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.

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 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:

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


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

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

First of all, before we start writing code, we need to do 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 WordPress menu output. 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 No. 1
- Our service No. 2
- Our service No. 3
- Our service No. 4
- Service 5
News
Contacts

As you can see from the code, our drop-down menu will be implemented on the ul and li lists. This is what the menu looks like without CSS styling:

Let's face it, it looks ugly, like a regular list. Next we need to decorate this menu using CSS styles.

CSS styles for drop-down menus and more are as necessary as air. After all, the drop-down tab is made based on the pseudo-class:hover.

For a horizontal drop-down 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 yet, just part of the CSS for the main horizontal menu. Next we will write styles for the menu dropdown list:

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

That's it now. The drop-out mechanism itself is implemented in one line.

See the skin with this menu:

Rice. 2 (horizontal dropdown menu)

Below is a demo of how the drop-down menu works, as well as a link to download the sources. (The demo will be opened with a drop-down on top of this page, no need to click open in a new window 🙂 or the mouse wheel)

Most of you can reproach me, saying that such menus as I showed above are a hello from the past and in part you are right, although I have seen recent layouts with such menus.

I hope you downloaded the example above. Our Html remains the same, but we will change the CSS completely. You can simply take the CSS code from here and paste it into the downloaded example, or watch in demo mode how it works.

#container( 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 edge*/ 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; )

This example also differs from the first one 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 go beyond the limits. To disable this property, just find the property "white-space:nowrap;" at the selector #menu1 ul li ul, and delete it.

Below you can watch a demo or download the sources of the horizontal drop-down menu:

Without separators, this menu looks so-so. Separators can be added to HTML manually, but if you have a CMS, such as WordPress, then adding them manually is not very convenient.

There are several dozen options for adding a stripe (separator) between menu items using pure CSS. I will not duplicate the options that use::before or::after , or much simpler border-left, border-right.

There are situations when the layout is built so wonderfully that you can’t do without jquery.

Our HTML code remains the same, we just 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 add 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, + add this piece to the end:

#menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; )

A horizontal drop-down menu with delimiters in jQuery will look like this:

You can view in demo mode or download the horizontal menu template below:

The advantages of this solution are:

the menu will be drawn dynamically;
the indents from the separator to the paragraph are the same everywhere;
more beautiful and flexible design.

Since we are talking about multi-level drop-down menus on hover, it’s probably worth dividing them into subgroups:

with a vip pad when pointing to the side
with a pop-up drop-down of the third level

In my examples I will show a multi-level CSS menu with 3 levels, then I think it will not be difficult to guess what needs to be done.

First, we need to slightly correct our HTML. A couple of lines will be added there for level 3:

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
News
Contacts
- Road map
  - Map add-on
  - Addition for map 2
- Feedback form

#container( 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 edge*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*this line implements the drop-out 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;)

We copy the files for jQuery as they were from the previous example. I decided to leave the dividers so that the menu would look at least a little better. Of course you can do it without them.

This is how it happened:
I made 2 skins in one to show how the drop looks on the right and in the middle.

Below you can watch a demo and download an example:

There's a little bit of oil in the title, but it'll work, the main thing is the code.

The essence of this example is to create a full-width horizontal drop-down menu with a full-width drop-down + multi-level.

I will not change the HTML code; it can be taken from the previous example. We also leave separators in jQuery.

Only the CSS will change completely:

#container( 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 drop-out 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 point is that the site must have enough space, since the last item on the right does not have room for a drop-down. This problem can be solved using:nth-child, but I didn’t bother.

See demo of horizontal multi-level dropdown menu:

As you may have noticed: the bottom die is also full width. This is how drops in several blocks are made.

That's all for me, I hope at least one of my examples suits you. Thank you for your attention.

If you read the entire post, but did not find how to make your own 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 types of drop-down menus are collected there.

Publications on the topic

Profiling and Debugging PHP Applications with xhprof & FirePHP

Sometimes ViewProfile.swf and other SWF system errors can be related to problems in the Windows registry. Several programs can...
VGP service preferential subscriber in MTS Disabling subscriptions by sending SMS

On the territory of Russia in the MTS network, communication services are provided to subscribers in full if the account balance is positive. Respectively,...