Dropdown menu in css. How to Create a Dropdown Menu CSS
Good day, dear readers. Today we will look at the topic “how to make a horizontal menu using HTML and CSS”. The menu, as a rule, is located in the header of the site and is a list of links to the most important pages; it is also called the main menu. Users will constantly click on these links. How you arrange them and what design you set for the menu will affect user behavior, conversion, their overall impression of your site and, of course, .
HTML code for horizontal menuOnce upon a time, the main menu for a site was made on pictures, tables, flash and perhaps something else, but nowadays there is the most popular and also correct method of creating a menu using “list” tags.
Tags are used to create menus
- ,
- And .
An example of using html tags to create a menu in the code below:
- home
- Services
- Prices
- Contacts
We get a ready-made top menu in the header; without any special styles or bells and whistles, this can be called the frame of your future beautiful menu. If you copy and paste this html and css it will look like this.
An example of a frame (template) for your future menuEverything turned out quite simple, you, of course, want a beautiful main menu right away, but without understanding the basics, you simply will not be able to create a good menu without errors in html and css.
There are also several other CSS methods used to make a menu horizontal besides float:left; eg display:inline-block; or display:flex; , but it is recommended to use the method described above.
Let's fill our menu template with different styles and make it beautiful.
Examples of a beautiful horizontal menu for a websiteNow I will give several ready-made examples with a ready-made horizontal menu design.
You can create all the “beauties” for your website yourself, instead of searching on the Internet. The easiest way to do this is to use one of the examples below as a basis.
A simple blue menu with separate CSS style items for the “top” menuBelow are the styles for this menu. The HTML remains the same as in the menu "framework".
Ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*make padding at top*/ ) a ( text-decoration: none; /*remove the underlining of the link text*/ background:#30A8E6; /*add a background to the menu item*/ color:#fff; /*change the color of the links*/ padding:10px; /*add indent*/ font-family: arial; /*change the font*/ border-radius:4px; /*add a rounding*/ -moz-transition: all 0.3s 0.01s ease; /*make a smooth transition*/ -o-transition : all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; ) a:hover ( background:#1C85BB;/*add a hover effect*/ ) li ( float:left; /*Place the list horizontally to implement a menu*/ margin-right:5px; /*Add indentation to menu items*/ )
The main menu located on a colored line with a red background CSS menu styles on the colored line ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove indents*/ margin-top:25px; /*indent the top*/ background:#FF4444; /*add a background to the entire menu (by replacing this parameter, you will change the color of the entire menu)*/ height: 50px; /*set the height*/ ) a ( text-decoration: none; /*remove the underlining of the link text*/ background:#FF4444; /*add a background to the menu item (by replacing this parameter, you will change the color of all menu items)*/ color:#fff; /* change the color of the links*/ padding:0px 15px; /*add indent*/ font-family: arial; /*change the font*/ line-height:50px; /*align the menu vertically*/ display: block; border-right: 1px solid #F36262; /*add a border on the right*/ -moz-transition: all 0.3s 0.01s ease; /*make a smooth transition*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3 s 0.01s ease; ) a:hover ( background:#D43737;/*add a hover effect*/ ) li ( float:left; /*Place the list horizontally to implement the menu*/ ) Dropdown menu in HTML+CSSTo implement an additional drop-down (drop-down) menu on the site for any menu item, we need to add an additional list of items to the HTML code for any link from the horizontal menu and change the CSS styles. In the styles we will use a simple trick - changing the display of the drop-down menu by hovering to the item we need in the top menu. For example, let’s take the “services” item.
Example of creating a simple dropdown menu HTML code for a dropdown menu- home
- Services
- Service 1
- Long service 2
- Service 3
- Prices
- Contacts
And to understand exactly what services and categories you should have, I recommend that you read the material: .
I tried to tell you as briefly as possible about how to create a main horizontal menu, make several templates, how to add simple styles to it and make it prettier, how to make a drop-down menu for your site. For convenience, I have collected all the menus presented above in one html file, which you can download below. It looks like the screenshot:
Thank you for attention.
From the author: Hello everyone. For some reason, webmasters associate drop-down menus with scripts, but for a long time such navigation can be done absolutely easily using pure CSS. Moreover, such a menu will be no worse. Today I will show you how to create a dropdown menu in css. I will share, so to speak, the recipe.
Lesson plan and layout of our menuIn general, let's first decide how we will create the menu itself. In html5, the standard way is to create it in the nav container using a bulleted list. Let's do just that. We will remove the markers later using css; we don’t need them at all in the menu.
Actually, I’ll immediately write markup with nested lists in html. That is, our list will be two-level - it will contain other lists. Namely, for each item there is 1 list, which will form a drop-down menu.
There is an important point here, which is that you may not need to make every item drop-down, but only some. No problem, then in items without dropdowns we simply do not create nested lists.
Actually, here it is, all the markup:
< nav id = "nav" >
< ul >
< li > < a href = "#" >Paragraph 1< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Point 2< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Point 3< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Point 4< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< li > < a href = "#" >Sub-clause< / a > < / li >
< / ul >
< / li >
< / ul >
< / nav >
I understand that it is huge. This is the problem with nested lists, that you need to write a lot of code. But keep in mind the fact that we are making 4 main points and for each there will be a drop-down menu.
Actually, I gave the entire navigation an identifier of nav, and all nested lists a style class of second to understand that they are nested.
Great, we have the markup ready, you can look at the result:
Yeah, it looks terrible. But now we will enable css and in a few minutes our navigation will be transformed. Let's work.
Writing CSS stylesThe first thing I'll do is reset all the padding to default for all elements. They will only get in our way; it’s better to set the indents ourselves later, where it’s needed.
*( margin: 0; padding: 0; )
margin: 0;
padding: 0;
#nav( height: 70px; ) #nav ul( list-style: none; )
#nav(
height: 70px;
#navul(
list - style : none ;
Now we need to actually decide what our menu will be. Horizontal or vertical? I suggest doing the horizontal one first and seeing everything in its example. To do this you need to write the following styles:
#nav > ul > li( float: left; width: 180px; position: relative; )
#nav > ul > li(
float: left;
width: 180px;
position: relative;
Note that using the > sign we refer to list items that are directly nested in ul, which are directly nested in nav. This is very important because it prevents the styling from being applied to nested list items. The fact is that, according to my idea, the items in the main list will be located horizontally, and in the nested ones – vertically.
But you, of course, can do it differently, in accordance with your idea. You can make sure that all the points are on one line.
Anyway, the above code I hope you can understand. It forces the main list items to be pushed to the left so that they all appear on the same line, even though they are block elements. I also gave them an explicit width and relative positioning.
Why positioning? It is necessary in order to then absolutely position nested lists. If you have studied positioning in CSS, then you probably know that if you give a block relative positioning, then all the elements in it can be positioned absolutely inside this particular block, and not the entire browser window.
In the meantime, here's what we've got so far:
From this screenshot you can already imagine the approximate result. Of course, we still have to design the items beautifully so that the eyes do not beg for mercy when viewing the navigation.
#nav li a( display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; ) #nav li a:hover( background: #2F718E; )
#navli a(
display: block;
background : #90DA93;
border : 1px solid #060A13;
color : #060A13;
padding: 8px;
text - align : center ;
text - decoration : none ;
#nav li a:hover(
background : #2F718E;
First, the links themselves need to be made block. This is necessary for the padding to work and all properties to be applied correctly. Next, I specify the colors of the background, text, frame parameters, internal padding and centered text alignment. Finally, I undo the underlining of links.
All these parameters do not have to be specified the way I did. You can choose the colors arbitrarily, make a different frame or not use it at all, the indents can be reduced or increased.
Please note that in this case we did not use the > sign, so the above rules will apply to all links, including those in nested paragraphs. So now we have the following:
Great, but you understand that sub-items should not be visible, they should open when you hover over the desired item. Without this, our menu looks like a table. Well, it's time to hide the nested items.
#nav li .second( display: none; position: absolute; top: 100%; )
#nav li .second(
display: none;
position: absolute;
top: 100%;
First, we hide completely nested lists. Secondly, we give them absolute positioning and top coordinate: 100%. This means that the dropdown menu will appear clearly below the main item it belongs to, clearly at 100% of that item's height.
Now we see only the main menu on the web page, which is what we need.
Let's implement the dropoutWhat remains for us to do is the most important thing - to realize the fall itself. There is nothing complicated about it, look at this code:
#nav li:hover .second( display: block; )
#nav li:hover .second(
display: block;
This code will work flawlessly. When you hover over a main menu item, the sublist will become visible. Moreover, only the list that is nested in the item the cursor is hovering over.
There is only one minor problem - the width of the nested items does not match the width of the main ones. But this can be very easily solved by adding the appropriate styles:
#nav li li( width: 180px; )
#navlili(
width: 180px;
That's it, problem solved:
Everything works perfectly. When you hover over the main item, a drop-down menu corresponding to it appears. If you move the cursor to the side, it disappears. If you move the cursor to the nested items themselves, you can click on them and go to the desired section of the site. Thus, we have created for you a very simple and lightweight drop-down menu with absolutely no scripts.
Converting the menu to verticalWell, okay, we’ve completely figured out horizontal navigation, but besides it, vertical navigation is very often found on websites and it can also be a drop-down one. In fact, changing the menu from horizontal to vertical is very easy; we only have to change a couple of lines of code.
First, you will need to remove the float:left from the main list items. It is this property that ensures that our items are displayed on one line, but why do we need this if the navigation must be vertical?
Now all that remains is to change the rules for the #nav li .second selector, that is, for nested lists, namely, they need to be positioned a little differently. Like this:
#nav li .second( display: none; position: absolute; left: 100%; top: 0; )
#nav li .second(
display: none;
position: absolute;
left: 100%;
top: 0;
That is, it is necessary to register two coordinates instead of one. Firstly, in the case of horizontal navigation, I said that, as planned, submenu items should be displayed under the main items. In the case of a vertical menu, this is not suitable - the items should be displayed on the side.
Therefore, we change top: 100% to left: 100%. In addition, we also need the top coordinate. We set it to 0 so that the submenu is at the same level as the item it corresponds to.
That's it, now everything works as it should. You can test it. As you can see, I didn’t lie when I said that I would only have to rewrite a few lines of code.
Horizontal menu with several levelsUsing much the same approach, you can create more menu levels if needed. For example, let's create a list for the fourth item of the main menu, which will be nested in one of the subitems.
If your website is more than just a single web page, then you should consider adding a navigation bar (menu). Menu is a section of a website designed to help visitors navigate the site. Any menu is a list of links leading to internal pages of the site. The easiest way to add a navigation bar to your site is to create a menu using CSS and HTML.
Vertical menuThe first step in creating a vertical menu is to create a bulleted list. We will also need to be able to identify the list, so we will add an id attribute to it with the identifier "navbar". Each element
- our list will contain one link:
Our next task is to reset the default list styles. We need to remove the outer and inner padding from the list itself and the bullets from the list items. Then 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, font size and weight, remove the underline, add small indents and redefine the display element from inline to block. Additionally, left and bottom frames have been added to the list items.
The most important part of our changes is the redefinition of inline elements to block elements. Now our links occupy all the available space of the 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 example page and see the result:
Document title #navbar ( margin: 0; padding: 0; list-style-type: none; width: 100px; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #666; ) # navbar a ( background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; )
Try »When you hover the mouse over a menu item, its appearance may change, attracting the user's attention. You can create such an effect using the pseudo-class:hover.
Let's return to the vertical menu example discussed earlier and add the following rule to the style sheet:
#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Try »
Horizontal menuIn the previous example, we looked at the vertical navigation bar, which is most often found on websites to the left or right of the main content area. However, menus with navigation links are also often located horizontally at the top of the web page.
A horizontal menu can be created by styling a regular list. Display property for elements
- you need to assign the value inline so that the list items are located one after another.
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 default style used for lists, and redefine the list items from block to inline:
#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Try »
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 »
Drop-down menuThe menu we will create will have main navigation links located in the horizontal navigation bar, and sub-items that will only appear when the mouse cursor hovers over the menu item to which these sub-items relate.
First we need to create the HTML structure of our menu. We will place the main navigation links in a bulleted list:
We will place the sub-items in a separate list, nesting it in the element
- , which contains the parent link regarding the sub-items. Now we have a clear structure for our future navigation bar:
Try »Now let's start writing CSS code. First, you need to hide the list with sub-items using the display: none; declaration so that they are not displayed on the web page all the time. To display sub-items, we need that when hovering over an element
- the list has been converted to a block element again:
#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )
We remove the default indents and markers from both lists. We make list elements with navigation links floating, forming a horizontal menu, but for list elements containing sub-items we 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; )
Next, we need to make sure our dropdown submenu doesn't push the content below the navigation bar down. To do this, we will set 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 the 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 »
The height for the parent list was added on purpose, since browsers do not consider floating content as element content, without adding height our list will be ignored by the browser and the content following the list will wrap around our menu.
Now we just need to style both of our lists and the drop-down 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; )
In this tutorial we will make a classic horizontal menu using pure CSS. It has icons in lists. When you hover over an item, it smoothly changes the color of the button and text, and a shadow is added. Drop-down lists can be made multi-level and the main thing is that it’s all quite simply implemented in pure CSS3.
In the lesson we will use:
- display: flex;
- use transition ;
- We will position elements using position .
First of all, let's write the markup for the horizontal menu. We open our development environment (in my case it’s PhpStorm), create an index.html file, write the html:5 framework, replace lang with ru.
I will remove all meta except the encoding, I will write my own title “Tom menu”.
Between the body we write a header tag, and in it a block with the .dws-menu class in which our menu will be located. Next, the structure will be as follows; we will create five lists. Each list will have a link with the href="#" attribute. Then there will be an icon I with the class .fa .fa-
ul>li*5>a>i.fa.fa-
Click apply.
Let's write down the name of the menu items ( Home, Products, Services, News, Contacts).
Next, select and connect the icons. Go to the Font Awesome website, select icons for these menu items:
Download the archive from the site with icons, extract its contents to your computer, copy the fonts folder and css folder into your development environment.
The fonts folder contains icon fonts, and the css folder contains their styles. Compressed styles can be removed from font-awesome.min, let's include uncompressed font-awesome.css .
In index.html we connect icons, and assign each item its own icon style (home, shopping-cart, cogs, th-list, envelope-open).
We have made the main frame, we will create a submenu after describing the main style, and now we will create a file where we will describe the main styles of the horizontal menu style.css and connect it to index.html. To check that the styles are connected, I’ll create an img folder and place an arbitrary picture in it for the background. Let's register the connection of the picture using background .
Body( background-image: url("../img/ep_naturalwhite.png"); )
We describe the CSS styles of the horizontal menuFirst of all, let's reset all the indents that different browsers can set by default:
Dws-menu *( margin: 0; padding: 0; )
Let's set the header to 200 pixels. and assign the Cuprum font, which can be downloaded and separately connected to your website, just in case we will add additional fonts.
Header( margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; )
Let's hide the markers from the lists:
Dws-menu ul, .dws-menu ol( list-style: none; )
Let's display the lists horizontally using display: flax , and make it centered:
Dws-menu > ul( display: flex; justify-content: center; )
In the header we will indent only the top, we will write margin-top .
Header( margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; )
Let's design our menu, set the color of the buttons, font, etc.
Dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform: uppercase; )
Then we position the icons, assign position: relative to the lists; To further center the icons:
Dws-menu > ul li( position: relative; )
Dws-menu > ul li > a i.fa( position: absolute; top: 15px; left: 12px; font-size: 18px; )
Let's assign a separator to the lists in the form of a border, select the first LI element, and set the border. We select the last LI element and assign it a similar border.
Dws-menu > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )
We make list separators LI :
.dws-menu > ul li( position: relative; border-right: 1px solid #c7c8ca; )The menu has acquired its appearance, and then you can start describing hover styles.
Animating the horizontal menu on hover
Dws-menu li a:hover( background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; )
And to make this effect disappear smoothly, add this style to the link at rest:
.dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; )We have finished the main menu and can begin to describe the submenus and their nested menus.
Describing a CSS/HTML Dropdown MenuLet's open index.html and add, for example, an additional menu to the product. We insert UL between the LI lists; we will place five lists in it, which will contain links with the herf=”#” attribute.
ul>li*5>a
Click apply, write down the name of the items ( Clothing, Electronics, Food, Tools, Household. chemistry).
- Cloth
- Electronics
- Food
- Tools
- Life chemistry
Then open style.css and describe the styles of the submenu.
Select the second list and assign it position: absolute; , set the minimum width to 150 pixels.
/*sub menu*/ .dws-menu li ul( position: absolute; min-width: 150px; )
Let's assign a border of 1 peak to the lists.
Dws-menu li > ul li( border: 1px solid #c7c8ca; )
For links in the submenu, set the indents to 10 pixels, remove the text transformation and make the background a couple of shades darker background: #e4e4e5; .
Dws-menu li > ul li a( padding: 10px; text-transform: none; background: #e4e4e5; )
Next, let's create another submenu. Let's go to the markup file and, for example, in "Electronics" we create a menu similar to what we did before. We describe the headings of the paragraphs ( Cameras, Computers, Phones) and save.
- Electronics
- Cameras
- Computers
- Phones
- home
- Products
- Cloth
- Shoes
- Jackets
- Trousers
- Electronics
- Cameras
- Computers
- Phones
- Samsung
- Flf
- Apple
- Food
- Tools
- Life chemistry
- Cloth
- Services
- Service 1
- Service 2
- Service 3
- News
- Contacts
- settings — link picture;
- search — a block with a search and a corresponding button;
- options - contains a submenu (implemented through a list with the subnav class).
-
- Application
- Board
- Options
-
- Application
- Board
- Options
They are displayed, but hidden under the main menu, now position: absolute; nested UL and shift it by 150 pic. to the side:
Dws-menu li > ul li ul( position: absolute; right: -150px; top: 0; )
/*sub menu*/ .dws-menu li ul( position: absolute; min-width: 150px; display: none; )And for their appearance, we will select lists on hover and display them using display: block; .
Dws-menu li:hover > ul( display: block; )
Now you can add multi-level menus by simply copying the UL block and changing its items.
Then let's complete the final steps by decorating the buttons with an ingredient. I use a CSS generator, I have created several Presets, you can create your own, in my case I just copy this code and place it in the place of the background that I wrote before.
If desired, this menu can be designed to match the style that suits you on the site; simply generate a color and replace it in the code. The result is a simple and at the same time nice horizontal menu, made in pure CSS.
Most classic websites on the Internet use a horizontal menu as the main navigation element. Sometimes it may contain various additional features - multi-level structures, icons for sub-items, a search block, complex lists, etc. Recently there was a small selection on the blog, and today we’ll look at 4 practical examples of how to make a drop-down menu using CSS + HTML. The information will be useful for novice developers and those who want to change the navigation on their website.
The first CSS3 Dropdown Menu tutorial is the newest in the collection (from April 2016). Pros of the solution: in this horizontal drop-down menu for the site, the sub-items contain icons, the implementation and the CSS code itself are quite simple to understand and implement.
Step1 - HTML markup
The first step is to create an unordered list in HTML with anchor links (#) for its elements. There, in one of the items, we add another nested list, which will be responsible for the submenu.
Step2 - Display the menu
We remove unnecessary indents in CSS for elements of the site's horizontal drop-down menu. At the same stage, we will set a fixed width and height of the menu items, and also add rounded corners.
| .menu, .menu ul, .menu li, .menu a ( margin : 0 ; padding : 0 ; border : none ; outline : none ; ) .menu ( height : 40px ; width : 505px ; background : #4c4e5a ; background : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -o-linear-gradient (top , #4c4e5a 0% , #2c2d33 100% ) ; background : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : linear-gradient(top , #4c4e5a 0% , # 2c2d33 100% ) ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius : 5px ; ) .menu li ( position : relative ; list-style : none ; float : left ; display : block ; height : 40px ; ) |
Menu, .menu ul, .menu li, .menu a ( margin: 0; padding: 0; border: none; outline: none; ) .menu ( height: 40px; width: 505px; background: #4c4e5a; background: - webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient( top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li ( position: relative; list-style: none; float: left; display: block ; height: 40px; )
Step3 - linking
In addition to the basic features in styles (font, color, height), we use and create a smooth transition of text color when hovering. We also add separators to the menu, removing the border from the first element on the left and from the last on the right.
| .menu li a ( display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font -family : Helvetica, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; color : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit- transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in -out; transition : color .2s ease-in-out; ) .menu li: first-child a ( border-left : none ; ) .menu li: last-child a( border-right : none ; ) .menu li : hover > a ( color : #8fde62 ; ) |
Menu li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font- family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in- out; transition: color .2s ease-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( color: #8fde62; )
Step4 - submenu
Since we have a drop-down site menu using CSS, we should also set a design for the nested list. First, set a margin of 40px on top and 0px on the left + add rounded corners. To show/hide the submenu, initially set the opacity property to zero, and when hovering it to one. To create the effect of a submenu appearing, set the value of the list height to zero, and with hover = 36px.
| .menu ul ( position : absolute ; top : 40px ; left : 0 ; opacity : 0 ; background : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; border -radius : 0 0 5px 5px ; -webkit-transition: opacity .25s ease .1s ; -moz-transition: opacity .25s ease .1s ; -o-transition: opacity .25s ease .1s ; -ms-transition: opacity .25s ease .1s ; transition : opacity .25s ease .1s ; ) .menu li: hover > ul ( opacity : 1 ; ) .menu ul li ( height : 0 ; overflow : hidden ; padding : 0 ; -webkit-transition : height .25s ease .1s ; -moz-transition: height .25s ease .1s ; -o-transition: height .25s ease .1s ; -ms-transition: height .25s ease .1s ; transition : height .25s ease .1s ; ) .menu li: hover > ul li ( height : 36px ; overflow : visible ; padding : 0 ; ) |
Menu ul ( position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity . 25s ease .1s; transition: opacity .25s ease .1s; ) .menu li:hover > ul ( opacity: 1; ) .menu ul li ( height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease . 1s; ) .menu li:hover > ul li ( height: 36px; overflow: visible; padding: 0; )
We set the width of the links = 100px, a border-bottom border is added at the bottom of all elements except the last one. Also, if you wish, you can place pictures for the submenu items (attention! do not forget to change the paths to the images in the code to the ones you use).
| .menu ul li a ( width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; ) .menu ul li : last-child a ( border : none ; ) .menu a.documents ( background : url (../img/docs.png ) no-repeat 6px center ; ) .menu a.messages ( background : url (../img/bubble.png ) no-repeat 6px center ; ) .menu a.signout ( background : url (../img/arrow.png ) no-repeat 6px center ; ) |
Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . menu a.documents ( background: url(../img/docs.png) no-repeat 6px center; ) .menu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( background: url(../img/arrow.png) no-repeat 6px center; )
I personally like the ease of implementation and the use of icons. Here is the final code from codepen:
Josh Riser's option is visually similar to the previous HTML and CSS dropdown menu. The code does not have a child selector ">" (useful in multi-level designs), but the author makes good use of CSS3 effects (transition, box-shadow and text-shadow) for a more beautiful result. The link in the source does not describe the process of creating a horizontal drop-down menu, so I will immediately provide the final code:
In this example, we will look at how to make a drop-down menu using CSS, which, in addition to the items, will contain a search block. A similar implementation can often be found in modern . In terms of implementation time and complexity, the solution is a little more complicated than the previous ones. It was published in May 2013, so you may need to tweak some things, although it worked fine in our testing.
HTML code
For navigation, as always, an unordered list (with the nav class) is used. Regular menu items are list items (li) and contain links (a href) without any classes or IDs. The exception is 3 specialized elements of this horizontal drop-down menu with the following IDs:
Also in the code you will see a prefixfree script for using CSS properties without prefixes. The final HTML for the dropdown menu looks like this:
| |
Menu CSS
1. Basic styles and menu elements
First, we specify the Montserrat font, a dark gray background, and a fixed height for the menu items. All elements have float: left alignment and relative positioning so that later you can add a submenu with position: absolute;
| @import url (http: //fonts.googleapis.com/css?family= Montserrat) ; * ( margin : 0 ; padding : 0 ; ) .nav ( background : #232323 ; height : 60px ; display : inline-block ; ) .nav li ( float : left ; list-style-type : none ; position : relative ; ) |
@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margin: 0; padding: 0; ) .nav ( background: #232323; height: 60px; display: inline-block; ) .nav li ( float: left; list-style-type: none; position: relative; )
2. Formatting links
Menu items use the basic design + . The height is the same as in the nav class. For #settings the image link at the beginning of the menu, the alignment is set.
| .nav li a ( font-size : 16px ; color : white ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : none ; border-left : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover ( background-color : #2e2e2e ; ) #settings a ( padding : 18px ; height : 24px ; font-size : 10px ; line-height : 24px ; ) |
Nav li a ( font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; height: 24px; font-size: 10px; line-height: 24px; )
3. Search block
This element has a fixed width and consists of several parts - an input field (#search_text) with a green background and a search button (#search_button). In some browsers, the background color may be gray.
| #search ( width : 357px ; margin : 4px ; ) #search_text ( width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; border : 0 none ; height : 52px ; margin-right : 0 ; color : white ; outline : none ; background : #1f7f5c ; float : left ; box-sizing : border-box ; transition : all 0.15s ; ) :: -webkit-input-placeholder ( /* WebKit browsers */ color : white ; ) : -moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color : white ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color : white ; ) #search_text : focus ( background : rgb (64 , 151 , 119 ) ; ) #search_button ( border : 0 none ; background : #1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer;) |
#search ( width: 357px; margin: 4px; ) #search_text( width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: 0; color: white; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s; ) ::-webkit-input-placeholder ( /* WebKit browsers */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus ( background: rgb(64, 151, 119); ) #search_button ( border: 0 none; background: #1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; )
4. Dropdown submenu
The final touch will allow us to make a drop-down menu in CSS that fires for the last #options item.
| #options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav ( visibility : hidden ; position : absolute ; top : 110% ; right : 0 ; width : 200px ; height : auto ; opacity : 0 ; transition : all 0.1s ; background : #232323 ; ) .subnav li ( float : none ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( visibility : visible ; top : 100% ; opacity : 1 ; ) |
#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; ) .subnav li ( float : none; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( visibility: visible; top: 100%; opacity: 1; )
In the styles you will find the insertion of a triangle background image (triangle.png) to indicate the submenu - do not forget to indicate the correct path for this and other images in the example. The appearance of a submenu is implemented using the opacity property. Final solution on codepen:
This option mainly uses CSS2.1 techniques, the solution plus or minus is new - for March 2015. If you are missing one sublevel in a horizontal drop-down menu for a site, then this example contains three at once. Using the pseudo-class:only-child, a “+” symbol is added to items to indicate the presence of a submenu.
Overall, a good and simple example. We will not describe the implementation process in detail, because... it is similar to the previous ones - first you create an HTML framework, and then gradually add styles for it. Download the final code using the link to the source; you can partially view it in Codepen:
Total
Above we looked at 4 options for how to make a drop-down menu using CSS + HTML for, although there are many more similar examples on the Internet. There are solutions with jQuery, but this is most likely only useful for implementing some special effects and non-standard tasks. In most cases, a combination of CSS + HTML will be enough, especially since now the main requirements for a menu are convenience and fast loading speed.
Finally, two notes on the codes above. Some examples use images in the CSS for the dropdown menu, so you'll need to carefully review the image paths and provide the correct values for your site. Secondly, some of the solutions are 2-3 years old, so you should once again additionally check their performance in different browsers.
If you know any other interesting modern implementations of horizontal drop-down menus for a website, send links in the comments.