The html submenu. How do I create a dropdown menu in CSS? Dropdown horizontal html menu
Task
Create dropdown menu with CSS and HTML tools.
Solution
First, let's create a list, place it horizontally and style it. appearance... This will be the main menu, and then we will make a drop-down menu for its items.
We got a list like this:
Figure 1. Preparatory work.
Please note: the style of the link changes when you hover over it. This is implemented using the: hover pseudo-class. This pseudo-class sets the style of the element when the cursor is hovered over it, while the mouse button is not pressed. If there is a button click, that's another pseudo-class.
Now let's move on to solving our problem. Let's make a drop-down menu for the "Services" item, add drop-down sections: "Buy", "Sell", "Exchange". These items are a separate list that is nested within the tag
Let's create this list and add styles that describe its appearance.
Now we have a list like this:
Figure 2. Preparatory work. This is definitely not what we want. By default, this list should be hidden and only become visible on mouse hover. You can hide an element using the rule rule (display: none). And when you hover the cursor, you need to activate it by making the rules visible again (display: inline-block).
Now our menu disappears and reappears, but we want it to appear on top of existing elements, without changing the already set boundaries of existing blocks.
For an element to display without affecting the display of other elements, it must be positioned with a value of absolute.
What have we done here:
- positioning rule (position: relative;). This is done so that the report of the coordinates of the absolute positioning of the nested list starts from the upper left corner of this block, and not the corner of the screen.
- Added to parent element
- rule (height: 20px;). We gave it a height to make it easier to position the drop-down list.
- Set the absolute positioning (position: absolute;) of the combobox and set the coordinates: top and left.
The dropdown menu now works correctly.
Figure 3. Final version. Of course, here you can make a more beautiful appearance of the drop-down menu, but this is enough for our task.
The educational problem has been solved. Bye.
If your website is not limited to one web page, then adding a navigation bar (menu) is worth considering. Menu is a section of a website designed to help a visitor navigate the site. Any menu is a list of links leading to the internal pages of the site. The most in a simple way adding a navigation bar to a website is to create a menu using CSS and HTML.
Vertical menu
The first step in creating a vertical menu is to create a bulleted list. We'll also need to be able to identify the list, so we'll add an id attribute to it with the identifier "navbar". Each element
Our next task is to reset the default list styles. We need to remove the padding and padding from the list itself and the bullets from the list items. Then we'll set the desired width:
#navbar (margin: 0; padding: 0; list-style-type: none; width: 100px;)
Now it's time to style the links themselves. We will add a background color to them, change the text parameters: color, size and weight of the font, remove the underline, add small indents and redefine the display. element from line to block. Additionally, left and bottom frames have been added to the list items.
The most important part of our changes is redefining inline elements to block elements. Now our links take up all the available space of list items, that is, to follow the link, we no longer need to hover the cursor exactly over the text.
#navbar a (background-color: # 949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid # 33ADFF; display: block;) #navbar li ( border-left: 10px solid # 666; border-bottom: 1px solid # 666;)
We have combined all the code described above into one example, now, by clicking on the try button, you can go to the page with the example and see the result:
When you hover the mouse cursor over a menu item, its appearance can change, attracting the user's attention. You can create such an effect using the: hover pseudo-class.
Let's go back to our previous vertical menu example and add the following rule to the stylesheet:
#navbar a: hover (background-color: # 666; border-left: 5px solid # 3333FF;) Try it "
Horizontal menu
In the previous example, we looked at the vertical navigation bar, which is most often found on sites to the left or right of the main content area. However, menus with navigation links are also often positioned horizontally at the top of a web page.
A horizontal menu can be created by styling a regular list. The display property for elements
To place menu items horizontally, first create a bulleted list with links:
Let's write a couple of rules for our list that reset the style used for the default lists, and redefine the list items from block to lowercase:
#navbar (margin: 0; padding: 0; list-style-type: none;) #navbar li (display: inline;) Try it "
Now all we have to do is define the styling for our horizontal menu:
#navbar (margin: 0; padding: 0; list-style-type: none; border: 2px solid # 0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: # 33ADFF; ) #navbar a (color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px;) #navbar a: hover (border-radius: 20px 5px ; background-color: # 0066FF;) Try it "
Drop-down menu
The menu that we will create will have main navigation links located in the horizontal navigation bar, and sub-items that will be displayed only after hovering the mouse cursor over the menu item to which these sub-items refer.
First, we need to create the HTML structure for our menu. We'll put the main navigation links in a bulleted list:
We will place the sub-items in a separate list by nesting it in the element
Try "
Now let's get down to writing the CSS code. First, you need to hide the list of sub-items with a display: none; declaration so that they don't appear on the web page all the time. To display sub-items, we need that when hovering over an element
#navbar ul (display: none;) #navbar li: hover ul (display: block;)
Remove default margins and markers from both lists. We make list items with navigation links floating, forming a horizontal menu, but for list items containing sub-items, set float: none; so that they appear below each other.
#navbar, #navbar ul (margin: 0; padding: 0; list-style-type: none;) #navbar li (float: left;) #navbar ul li (float: none;)
Then we need to make sure that our dropdown does not move the content below the navigation bar down. To do this, we will give the list items position: relative; , and a list containing sub-items position: absolute; and add a top property with a value of 100% so that an absolutely positioned submenu appears exactly below the link.
#navbar ul (display: none; position: absolute; top: 100%;) #navbar li (float: left; position: relative;) #navbar (height: 30px;) Try it "
The height for the parent list was added on purpose, since browsers do not take into account floating content as the content of the element, then without adding a height, our list will be ignored by the browser and the content following the list will wrap around our menu.
Now we need to style both our lists and the dropdown menu will be ready:
#navbar ul (display: none; background-color: # f90; position: absolute; top: 100%;) #navbar li: hover ul (display: block;) #navbar, #navbar ul (margin: 0; padding: 0; list-style-type: none;) #navbar (height: 30px; background-color: # 666; padding-left: 25px; min-width: 470px;) #navbar li (float: left; position: relative; height: 100%;) #navbar li a (display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center;) #navbar ul li (float: none; ) #navbar li: hover (background-color: # f90;) #navbar ul li: hover (background-color: # 666;)
Today I want to present a small "recipe" for creating a list in CSS. No jQuery, no CSS3 - just plain old, cross-browser CSS. The example is quite simple, so experienced comrades may not be interested in it. We will implement a drop-down list with social buttons.
So, let's not argue for a long time, let's get straight to the point.
Html
Share the entry
- Google plus
- In contact with
- Rss
I deliberately omit general points, such as including styles, so that the code does not grow. At the bottom of the page I will give a link to the sources - everything is there.
What we have in HTML is a regular list and an unusual heading. Its uniqueness is that it is made by a hyperlink that allows you to track the event : hover, that is, guidance. The dropdown list will work when you hover over the title.
CSS
Let's start by looking at some basic dropdown styles. I tried to comment out each line of code to make it clearer:
/ * Reset padding * / .droplink ul, .droplink h3, .droplink h3 a (padding: 0; margin: 0) / * Base wrapper * / .droplink (width: 200px; position: absolute; margin: 10px 0 0 25px ) / * Block style on hover * / .droplink: hover (height: auto; background-color: # 3E403D; border: solid 1px # 3A3C39) / * Normal header * / .droplink h3 a (text-align: center ; width: 100%; display: block; padding: 12px 0px; color: # 999; text-decoration: none) .droplink h3 a img (border: none) / * Style for the title on hover * / .droplink: hover h3 a (color: #FFF; font-weight: bold; position: absolute)
There is nothing special here, we specified the size and style of the block, the style of the heading and for both elements - their styles on hover. Move on:
/ * Hide the list without hover * / .droplink ul (list-style: none; display: none) / * Show the list on hover * / .droplink: hover ul (display: block; margin-top: 40px) .droplink li ( display: block)
This code is already more interesting and shows how it behaves drop-down list on hover. In its normal state it stands display: none, that is, it is not displayed. On hover - show it as a block. That's the whole secret. Now let's style the list items a little and insert the icons:
/ * List item style * / .droplink li a (padding: 5px 12px 4px 34px; margin: 1px; background-color: # 484A47; display: block; color: #FFF; text-decoration: none; font-size: 12px ; background-repeat: no-repeat; background-position: 10px 3px) / * Element style on hover * / .droplink li a: hover (background-color: # 999) / * Icons * / .facebook a (background-image : url ("icons / facebook.png")) .twitter a (background-image: url ("icons / twitter.png")) .vk a (background-image: url ("icons / vk.png")) .rss a (background-image: url ("icons / rss.png")) .gplus a (background-image: url ("icons / gplus.png"))
That, in fact, is all. The drop-down list is ready and looks pretty nice. You can design the elements at your discretion, add rounded corners and other "gadgets".
If you need the list to "overlap" the text below it on hover - look to the side z-index.
If something is not clear or does not work out - ask in the comments or use the "Send message" button, it is there —>
I have long wanted to write an article on how to do CSS submenu... Many do it on JQuery and it turns out quite well, however, all basic principle creation CSS submenu I'll lay out here. And already further, starting from this base, you can improve the submenu further.
I quote right away CSS code:
* html ul li (
float: left;
}
* html ul li a (
height: 1%;
}
ul (
border-bottom: 1px solid # 000;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
}
ul li (
position: relative;
}
ul li a (
display: block;
border: 1px solid # 000;
border-bottom: 1px;
padding: 5px;
text-decoration: none;
}
li ul (
display: none;
left: 99px;
position: absolute;
top: 0;
}
li: hover ul (
display: block;
}
The most important thing here is the " li: hover ul". In fact, it shows the contents of the menu. By default, it is" display: none", and when you hover over a menu item, the submenu becomes:" display: block", that is, visible. This is the most important thing. Also in the first two selectors (which with * ) goes CSS hack for IE otherwise nothing will work in this browser without it. Everything else is the look, which can of course be changed.
I quote and HTML code:
home
Menu 1
Submenu 1
Submenu 2
Submenu 3
Menu 2
Submenu 4
Submenu 5
Submenu 6
Submenu 7
Submenu 8
If you think carefully about this structure, then everything becomes very clear. Tag ul- creates a menu. If ul is inside another ul, then this is already a submenu. And the tag li responsible for a specific menu item.
Of course, the menu is the simplest, both from the point of view of logic and structure, and from the point of view of design. Of course, you can use JQuery make a smooth disclosure. You can also change the design, but the whole principle remains the same as in this submenu written in CSS and HTML.
Can be built without JavaScript and / or jQuery. For creation, CSS-properties display, padding, pseudo-class: hover are used. A working menu is possible (Click "Fork" if you want to design the HTML menu in your own way). Video duration ~ 12min. The note is designed for novice layout designers, web developers who are taking their first steps to learn the basics of HTML and CSS; for those who have studied the course "Basics of HTML5 and CSS3".
Creating a simple dropdown menu
To create a menu the site usually uses a structural block HTML nav element and unordered list... Another list is embedded in one of the list items, so that it is not included in the hyperlink. It would be possible to place the ul inside a, but in my opinion this is not very good idea because the: hover pseudo-class also works with li!
In our case, we do not consider the option when y dropdown list there are nested lists too - this task is not difficult in itself, but it will cause difficulties for a novice layout designer. Also note that building the menu can be done by finding or writing the appropriate JavaScript.
For the convenience of working with markup (what if we have another nav), let's add a CSS class to our structural navigation element; we will make the hyperlinks stubs, but you can write http: // site instead of # 🙂
HTML markup for a dropdown menu
The main thing in CSS: clearing the default values of HTML elements included in the menu; hiding the future dropdown sublist ( submenu) and displaying it when hovering over the parent HTML element - using the: hover pseudo-class
CSS rules for dropdown menu ul li (padding: 10px;) .menu ul> li: hover (background-color: # f96;) .menu ul> li: hover (background-color: # 69e;). menu ul li, .menu ul (display: inline-block;) .menu ul (position: relative; margin: 0; padding: 0; background-color: # f63;) .menu ul ul (display: none; position: absolute; background-color: # 369; margin-top: 10px; margin-left: -10px;) .menu ul a (color: #fff; text-decoration: none;) .menu ul ul a (color: #fff ; text-decoration: none;) .menu li: hover ul (display: block;) .menu li: hover li (display: block;)
The created menu is not ideal and could be improved (think how exactly). Successful development and may the creation of such menus never be difficult!