- Pure CSS / HTML drop down menu In this tutorial we will make a classic horizontal menu on pure CSS....
- We animate the horizontal menu while pointing.
- Describe the CSS / HTML drop down menu
Pure CSS / HTML drop down menu
In this tutorial we will make a classic horizontal menu on pure CSS. It has icons in the lists. When pointing to an item, it smoothly changes the color of the button and the text, a shadow is added. Drop-down lists can be made multi-level and the main thing is all quite simply implemented on pure CSS3.
The continuation of this lesson here - part 2 MOBILE VERSION horizontal menu ".
See the Pen POyzbW by Denis ( @Dwstroy ) on Codepen .
In the lesson use:
- display: flex;
- use transition;
- position the elements with position.
HTML horizontal menu structure
First, write the markup below the horizontal menu. We open our development environment in my case, this is PhpStorm, create an index.html file, prescribe the frame html: 5, replace lang with ru.
All meta will be deleted except for the encoding, I will register my title “ Tom menu ”.
Between the body we write the header tag, and in it there is a block with the class .dws-menu which will contain our menu. Next, the structure will be as follows, create lists in the amount of five pieces. In each list there will be a link with the href = "#" attribute. Then I will go to the icon with the class .fa .fa-
<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>
We press to apply.
Let's write down the name of menu items ( Home, Products, Services, News, Contacts ).
Next, select and connect the icons. Go to the site, we will select the icons for these menu items:
<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa fa- cogs "> </ i> <i class = "fa fa- th-list "> </ i> <i class = "fa fa- envelope-open "> </ i>
Download the archive from the site with icons, extract its contents to your computer, copy the fonts folder and the css folder to your development environment.
The fonts folder contains icon fonts, and the css folder contains their styles. Compressed styles can be removed font-awesome.min, we connect the uncompressed font-awesome.css.
In index.html we connect icons, and we register each item with its own icon style ( home , shopping-cart , cogs , th-list , envelope-open ).
We have made the main frame, create a submenu after the description of 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, create an img folder, in it I will place an arbitrary picture on the background. Let's write the picture connection using background.
body {background-image: url ("../ img / ep_naturalwhite.png"); }
As we see, everything has been displayed and then we will proceed to the description of styles.
First of all, let's reset all indents, which different browsers can set by default:
.dws-menu * {margin: 0; padding: 0; }
Set the header to 200 peaks. and assign which you can download and separately connect to yourself on the site, just in case, write additional fonts.
header {margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Hide the markers in the lists:
.dws-menu ul, .dws-menu ol {list-style: none; }
The lists will be displayed horizontally with display: flax, and we will do it in the center:
.dws-menu> ul {display: flex; justify-content: center; }
In the header we will indent only the top, we will write a margin-top.
header { margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Let's design our menu, set the color of the buttons, the font, etc.
Select links nav> ul li, and make them block elements. Set the menu background, write indents, specify the size, color, remove the underscore, and make the headings in capital letters.
.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 position the icons, assign the lists to position: relative; for further alignment of icons:
.dws-menu> ul li {position: relative; }
Next, we select icons, position them absolutely, make indentation from above at 15 peaks, from the left 12 peaks, increase the size to 18 peaks.
.dws-menu> ul li> a i.fa {position: absolute; top: 15px; left: 12px; font-size: 18px; }
Assign the separator in the form of a border to the lists, select the first LI element, set the border. We select the last element LI 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; }
Making delimiters for LI lists:
.dws-menu> ul li {position: relative; border-right: 1px solid # c7c8ca; }
The menu has acquired the appearance, then you can proceed to the description of styles during hover.
We animate the horizontal menu while pointing.
Select links and assign a color to the block, and assign the color of the link itself with the icon to white. Let's add another dark shadow. With the help of transition in 0.3 seconds we will make a smooth appearance:
.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 ease:
.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; }
The main menu is finished and you can proceed to the description of the submenu and the submenus embedded in them.
Describe the CSS / HTML drop down menu
About we open index.html and add, for example, an additional menu to the products. Insert the UL between the LI lists and place five lists in it, which will contain links with the herf = ”#” attribute.
ul> li * 5> a [href = "#"]
We press to apply, write the name of the items ( Clothing, Electronics, Food, Tools, Life. Chemistry ).
<ul> <li> <a href="#"> Clothing </a> </ li> <li> <a href="#"> Electronics </a> </ li> <li> <a href = "#"> Food </a> </ li> <li> <a href="#"> Tools </a> </ li> <li> <a href="#"> Life. chemistry </a> </ li> </ ul>
Then open style.css and describe the submenu styles.
We select the second list and assign it position: absolute; , let's set the minimum width to 150 peaks.
/ * sub menu * / .dws-menu li ul {position: absolute; min-width: 150px; }
Let's write to the border lists at 1 peak.
.dws-menu li> ul li {border: 1px solid # c7c8ca; }
For the links in the submenu, we will set indents at 10 peaks., Remove the text transformation and make the background a couple of tones darker background: # e4e4e5; .
.dws-menu li> ul li a {padding: 10px; text-transform: none; background: # e4e4e5; }
Then create another submenu. Go to the markup file and for example in the "Electronics" form by analogy menu as we did before. We describe the headings of the items ( Cameras, Computers, Telephones ) and save.
<li> <a href="#"> Electronics </a> <ul> <li> <a href="#"> Cameras </a> </ li> <li> <a href="#"> Computers </a> </ li> <li> <a href="#"> Phones </a> </ li> </ ul> </ li>
They were brought out, but hidden under the main menu, now position: absolute; nested UL and move it to the 150 peak. to the side:
.dws-menu li> ul li ul {position: absolute; right: -150px; top: 0; }
Next, we will make the submenu appear when targeting the main items of the top menu, for this we add display: none; and thereby hide all internal points.
/ * sub menu * / .dws-menu li ul {position: absolute; min-width: 150px; display: none; }
And for their appearance, we will select the lists on hover and display them with the help of display: block; .
.dws-menu li: hover> ul {display: block; }
Now you can add multi-level menus simply by copying the UL block, changing its items.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Home </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Products </a> <ul> <li> <a href="#"> Clothing </a> <ul> <li> <a href = "#"> Shoes </a> </ li> <li> <a href="#"> Jackets </a> </ li> <li> <a href="#"> Trousers </a> < / li> </ ul> </ li> <li> <a href="#"> Electronics </a> <ul> <li> <a href="#"> Cameras </a> </ li> <li> <a href="#"> Computers </a> </ li> <li> <a href="#"> Phones </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Food </a> </ li> <li> <a href="#"> Tools </ h a> </ li> <li> <a href="#"> Gen. chemistry </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Services </a> <ul > <li> <a href="#"> Service 1 </a> </ li> <li> <a href="#"> Service 2 </a> </ li> <li> <a href = "#"> Service 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> News </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Contacts </a> </ li> </ ul>
Then let's finish the buttons with the buttons. I use, I have created several Presets, you can create your own, in my case, I just copy this code and place it in the background place that I wrote before.
.dws-menu> ul li a {display: block; / * Permalink - this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Old browsers * / background: -moz-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: linear-gradient (to bottom, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; font-size: 14px; color: # 454547; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; } .dws-menu li a: hover {/ * Permalink - this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Old browsers * / background: -moz-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: linear-gradient (to bottom, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }
If you wish, this menu can be designed for the style that we are suitable for you on the site, it is enough just to generate a color and replace it in the code. It turned out a simple and at the same time nice horizontal menu, made in pure CSS.