Responsive horizontal menu with pure CSS3. Vertical menu with CSS Vertical menu with css icons

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

Once 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

Standard CSS styles for horizontal menus

ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ ) a ( text-decoration: none; /*remove underline link text*/ ) li ( float:left; /*Place the list horizontally to implement the menu*/ margin-right:5px; /*Add indentation to menu items*/ )

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 menu

Everything 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 website

Now 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.

Simple blue menu with separate items

CSS styles for the top menu

Below 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*/ )

Main menu located on a colored line with a red background

CSS menu styles on color line

ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*make padding at 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 padding*/ font-family: arial; /*change the font*/ line-height:50px; /*align the menu vertically*/ display: block; border-right: 1px solid #F36262; /*add a border to 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.3s 0.01s ease; ) a:hover ( background:#D43737;/ *add a hover effect*/ ) li ( float:left; /*Place the list horizontally to implement a menu*/ )

Dropdown menu in HTML+CSS

For implementation 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 styles we will use a simple trick - changing the display of the drop-down menu by means of hovering over the item we need in top menu. For example, let’s take the “services” item.

Example of creating a simple dropdown menu

Dropdown Menu HTML Code

home
Services
- Service 1
- Long service 2
- Service 3
Prices
Contacts

Dropdown Menu CSS Styles

ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*make padding at top*/ background:#819A32; /*add a background to the entire menu*/ height: 50px; /*set the height*/ ) a ( text-decoration: none; /*remove the underlining of the link text*/ background:#819A32; /*add a background to menu item*/ 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 by verticals*/ display: block; border-right: 1px solid #677B27; /*add a border to 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.3s 0.01s ease; ) a:hover ( background:#D43737;/*add a hover effect*/ ) li ( float:left; /*Place the list horizontally to implement a menu* / position:relative; /*set the position for positioning*/ ) /*Styles for the hidden drop-down menu*/ li > ul ( position:absolute; top:25px; display:none; ) /*Make the hidden part visible*/ li:hover > ul ( display:block; width:250px; /*Set the width of the drop-down menu*/ ) li:hover > ul > li ( float:none; /*Remove horizontal positioning* / )

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.

There are a lot of ready-made solutions for creating such panels using jQuery, separate plugins and modules for various systems site management.
This is all very good, but is it possible to implement side slide panels using CSS exclusively? Of course you can! But be careful))), keeping in mind that not all browsers support modern CSS3 properties equally well.

Not so long ago, he “produced on-the-mountain” a solution and an example of work. One of the first comments was: “let’s move it to the side...”. Why not? Let's)).

Today I’ll tell you and show you an example of how you can use “CSS magic” to create a completely functional click-to-click menu.
To begin with, according to established tradition, we look at a live example of the panel’s operation, then, together with those who need it, we will consider the entire layout, what, how and why. Anticipating questions, I prepared options for the menu location, both on the left and on the right:

HTML Markup

Let's start the analysis with a panel switch, for which we use a standard flag ():

Place the checkbox at the top of the document, preferably right after the tag . We write the hidden attribute, directly indicating the “hidden” state of this element, and also assign a unique identifier, id="nav-toggle" for example, to link with the for attribute of the tag , which we will design and use as a panel toggle button.

I used the tag as a wrapper for the sidebar content

with a specific class class="nav" , since Internet Explorer up to version 8.0 inclusive ignores this tag, you can use the usual

.
Inside the base container we place the content we need.
First of all, let's write a label (tag ) formed in css in the form of that very “hamburger button”, with the help of which we will establish a connection with the hidden checkbox flag. To do this, it is necessary that the name of the for attribute must match the id of the checkbox. The empty onclick attribute is used for in iOS

website

< ul> < li>< a href= "#1" >One < li>< a href= "#2" >Two < li>< a href= "#3" >Three < li>< a href= "#4" >Four < li>< a href= "#5" >Five < li>< a href= "#6" >Six < li>< a href= "#7" >Seven

One
Two
Three
Four
Five
Six
Seven

This concludes our side menu markup. True, there is one more completely optional feature, this is the background darkening of the main content when the panel is on. If you need it, just
Write below the menu, or anywhere else in the body of the page, an additional div container with a specific class:

< div class = "mask-content" >

In the demo, I excluded this feature from work by default, commenting out this block; if you suddenly need it, you can easily find it and just as easily enable it))).
In general, to make it easier to understand the html of the demo page, I wrote detailed comments for each element, so you will have to try very hard to get lost.

So, all the necessary elements are in place, the most important and interesting thing remains, to form appearance, color, shape, and give movement to our menu. We will do all this exclusively using CSS. No javascript or additional images.

CSS

I won’t describe every rule and property, since I did it directly in the css code.
The styles for panels located on the left or right are almost the same, differing only in a couple of values. Both versions are packaged in the source archive separate files, so choose the one you need, connect it correctly to the document and that’s it.
Here I’m posting the “minced css” for the menu that slides out from the left edge of the page:

/** * Switchable side navigation bar * slides out by clicking on the left */. nav( /* width is arbitrary, feel free to experiment */ width: 320px; min-width: 320px; /* fix and set the panel height to maximum */ height: 100%; position: fixed; top: 0 ; bottom: 0 ; margin: 0 ; /* move (hide) the panel relative to the left edge of the page */ left: - 320px; /* padding */ padding: 15px 20px; /* smooth panel offset transition */- webkit- transition: left 0. 3s; - moz- transition: left 0. 3s; transition: left 0. 3s; /* define the background color of the panel */ background: #16a085; /* on top of other elements */ z-index: 2000; ) /** * Panel toggle button * tag */ . nav-toggle ( /* absolutely positioned */ position: absolute; /* relative to the left edge of the panel */ left: 320px; /* indent from the top edge of the panel */ top: 1em; /* padding */ padding: 0.5em; /* define the background color of the switch * often in accordance with the background color of the panel */ background: inherit; /* text color */ color: #dadada; /* cursor type */ cursor: pointer; /* font size */ font-size: 1.2em; line-height: 1; /* always on top of other page elements */ z-index: 2001; /* animate the text color on hover */- webkit-transition: color. 25s ease- in- out; - moz- transition: color . 25s ease- in- out; transition: color. 25s ease- in- out; ) /* define the text of the button * Unicode character (TRIGRAM FOR HEAVEN) */. nav- toggle: after ( content: "\2630" ; text- decoration: none; ) /* hover text color */. nav- toggle: hover ( color: #f4f4f4; ) /** * Hidden checkbox (checkbox) * invisible and inaccessible :) * selector name attribute of the checkbox */[ id= "nav-toggle" ] ( position: absolute; display: none; ) /** * change the position of the switch * when viewed on mobile devices* when the navigation is expanded, we place it inside the panel */[ id= "nav-toggle" ] : checked ~ . nav > . nav-toggle ( left: auto; right: 2px; top: 1em; ) /** * When the checkbox is checked, the panel opens * use pseudo-class:checked */[ id= "nav-toggle" ] : checked ~ . nav ( left: 0 ; box- shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - moz- box- shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - webkit- box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5); overflow-y: auto; ) /* * offset the page content * by the size of the panel width, * optional feature, not for everyone */[ id= "nav-toggle" ] : checked ~ main > article ( - webkit- transform: translateX(320px) ; - moz- transform: translateX(320px) ; transform: translateX(320px) ; ) /* * change the switch symbol, * the usual cross (MULTIPLICATION X), * you can use any other icon */[ id= "nav-toggle" ] : checked ~ . nav > . nav- toggle: after ( content: "\2715" ; ) /** * fix a bug in Android<= 4.1.2 * см: http://timpietrusky.com/advanced-checkbox-hack */ body ( - webkit- animation: bugfix infinite 1s; ) @- webkit- keyframes bugfix ( to ( padding: 0 ; ) ) /** * take care of medium and small screens * of mobile devices */@media screen and (min- width: 320px) ( html, body ( margin: 0 ; overflow- x: hidden; ) ) @ media screen and (max- width: 320px) ( html, body ( margin: 0 ; overflow- x: hidden; ) . nav ( width: 100%; box-shadow: none ) ) /** * Form the style of the panel header (logo) */. nav h2 ( width: 90%; padding: 0 ; margin: 10px 0 ; text- align: center; text- shadow: rgba(255 , 255 , 255 , .1 ) - 1px - 1px 1px, rgba(0 , 0 , 0 , .5 ) 1px 1px 1px; font-size: 1. 3em; line- height: 1. 3em; opacity: 0; transform: scale(0.1, 0.1); - ms- transform: scale(0.1, 0.1) ; - moz- transform: scale(0.1, 0.1) ; - webkit- transform: scale(0.1, 0.1) ; transform- origin: 0% 0%; - ms- transform- origin: 0% 0%; - moz- transform- origin: 0% 0%; - webkit- transform- origin: 0% 0%; transition: opacity 0. 8s, transform 0. 8s; - ms- transition: opacity 0. 8s, - ms- transform 0. 8s; - moz- transition: opacity 0. 8s, - moz- transform 0. 8s; - webkit- transition: opacity 0. 8s, - webkit- transform 0. 8s; ) . nav h2 a ( color: #dadada; text- decoration: none; text- transform: uppercase; ) /*smooth appearance of the title (logo) when the panel is expanded */[ id= "nav-toggle" ] : checked ~ . nav h2 ( opacity: 1 ; transform: scale(1 , 1 ) ; - ms- transform: scale(1 , 1 ) ; - moz- transform: scale(1 , 1 ) ; - webkit- transform: scale(1 , 1 ) ; ) /** * directly form the menu itself * use an unordered list for menu items * add transformations and smooth transitions */. nav > ul ( display: block; margin: 0 ; padding: 0 ; list-style: none; ) . nav > ul > li ( line- height: 2.5 ; opacity: 0 ; - webkit- transform: translateX(- 50% ) ; - moz- transform: translateX(- 50% ) ; - ms- transform: translateX(- 50% ) ; transform: translateX(- 50 % ) ; - webkit-transition: opacity . 5s . 1s, - webkit- transform . 5s . 1s; - moz- transition: opacity . 5s . 1s, - moz- transform . 5s . 1s ; - ms- transition: opacity . 5s . 1s, - ms- transform . 5s . 1s; transition: opacity . 5s . 1s, transform . 5s . 1s; ) [ id= "nav-toggle" ] : checked ~ . nav > ul > li ( opacity: 1 ; - webkit- transform: translateX(0 ) ; - moz- transform: translateX(0 ) ; - ms- transform: translateX(0 ) ; transform: translateX(0 ) ; ) /* determine the intervals for the appearance of menu items */. nav > ul > li: nth- child(2) ( - webkit- transition: opacity . 5s . 2s, - webkit- transform . 5s . 2s; transition: opacity . 5s . 2s, transform . 5s . 2s; ) . nav > ul > li: nth- child(3) ( - webkit- transition: opacity . 5s . 3s, - webkit- transform . 5s . 3s; transition: opacity . 5s . 3s, transform . 5s . 3s; ) . nav > ul > li: nth- child(4) ( - webkit- transition: opacity . 5s . 4s, - webkit- transform . 5s . 4s; transition: opacity . 5s . 4s, transform . 5s . 4s; ) . nav > ul > li: nth- child(5) ( - webkit- transition: opacity . 5s . 5s, - webkit- transform . 5s . 5s; transition: opacity . 5s . 5s, transform . 5s . 5s; ) . nav > ul > li: nth- child(6) ( - webkit- transition: opacity . 5s . 6s, - webkit- transform . 5s . 6s; transition: opacity . 5s . 6s, transform . 5s . 6s; ) . nav > ul > li: nth- child(7 ) ( - webkit- transition: opacity . 5s . 7s, - webkit- transform . 5s . 7s; transition: opacity . 5s . 7s, transform . 5s . 7s; ) /** * design of menu item links */. nav > ul > li > a ( display: inline- block; position: relative; padding: 0 ; font- family: "Open Sans" , sans-serif; font- weight: 300 ; font- size: 1. 2em; color : #dadada; width: 100%; text- decoration: none; /* smooth transition */- webkit-transition: color. 5s ease, padding. 5s ease - moz- transition: color . 5s ease, padding. 5s ease transition: color. 5s ease, padding. 5s ease ) /** * state of menu links on hover */. nav > ul > li > a: hover, . nav > ul > li > a:focus ( color: white; padding- left: 15px; ) /** * menu link underline */. nav > ul > li > a : before { content : "" ; display : block ; position : absolute ; right : 0 ; bottom : 0 ; height : 1px ; width : 100 %; - webkit - transition : width 0s ease ; transition : width 0s ease ; } . nav > ul > li > a : after { content : "" ; display : block ; position : absolute ; left : 0 ; bottom : 0 ; height : 1px ; width : 100 %; background : #3bc1a0; - webkit - transition : width . 5s ease ; transition : width . 5s ease ; } /** * animate the underline of * links on hover */ . nav > ul > li > a : hover : before { width : 0 %; background : #3bc1a0; - webkit - transition : width . 5s ease ; transition : width . 5s ease ; } . nav > ul > li > a : hover : after { width : 0 %; background : transparent ; - webkit - transition : width 0s ease ; transition : width 0s ease ; } /* the background is dimmed on the main content * while the elements are blocked * this is a controversial feature, if you need it * just uncomment */ /* .mask-content ( display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0 , 0.4); visibility: hidden; opacity: 0; ) :checked ~ .mask-content ( visibility: visible; opacity: 1; -webkit-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility . 5s; ) */

/** * Switchable side navigation bar * pulls out by clicking on the left */ .nav ( /* width is arbitrary, feel free to experiment */ width: 320px; min-width: 320px; /* fix and set the height of the panel to the maximum */ height : 100%; position: fixed; top: 0; bottom: 0; margin: 0; /* move (hide) the panel relative to the left edge of the page */ left: -320px; /* padding */ padding: 15px 20px; / * smooth panel offset transition */ -webkit-transition: left 0.3s; -moz-transition: left 0.3s; transition: left 0.3s; /* define the background color of the panel */ background: #16a085; /* on top of other elements * / z-index: 2000; ) /** * Panel toggle button * tag */ .nav-toggle ( /* absolutely positioned */ position: absolute; /* relative to the left edge of the panel */ left: 320px; /* indent from the top edge of the panel */ top: 1em; /* padding */ padding: 0.5em; /* determine the background color of the switch * most often in accordance with the background color of the panel */ background: inherit; /* text color */ color: #dadada; /* cursor type */ cursor: pointer; /* font size * / font-size: 1.2em; line-height: 1; /* always on top of other page elements */ z-index: 2001; /* animate text color on hover */ -webkit-transition: color .25s ease-in- out; -moz-transition: color .25s ease-in-out; transition: color .25s ease-in-out; ) /* define the button text * Unicode character (TRIGRAM FOR HEAVEN) */ .nav-toggle:after ( content: "\2630"; text-decoration: none; ) /* hover text color */ .nav-toggle:hover ( color: #f4f4f4; ) /** * Hidden checkbox (checkbox) * invisible and inaccessible :) * selector name flag attribute */ ( position: absolute; display: none; ) /** * changing the position of the switch * when viewed on mobile devices * when the navigation is expanded, we place it inside the panel */ :checked ~ .nav > .nav-toggle ( left: auto; right: 2px; top: 1em; ) /* * * When the checkbox is checked, the panel opens * use pseudo-class:checked */ :checked ~ .nav ( left: 0; box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); -moz-box-shadow :4px 0px 20px 0px rgba(0,0,0, 0.5); -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); overflow-y: auto; ) /* * content offset pages * by the size of the panel width, * optional feature, not for everyone */ :checked ~ main > article ( -webkit-transform: translateX(320px); -moz-transform: translateX(320px); transform: translateX(320px); ) /* * change the toggle symbol, * the usual cross (MULTIPLICATION X), * you can use any other icon */ :checked ~ .nav > .nav-toggle:after ( content: "\2715"; ) /** * fix bug in Android<= 4.1.2 * см: http://timpietrusky.com/advanced-checkbox-hack */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { to { padding: 0; } } /** * позаботьтимся о средних и маленьких экранах * мобильных устройств */ @media screen and (min-width: 320px) { html, body { margin: 0; overflow-x: hidden; } } @media screen and (max-width: 320px) { html, body { margin: 0; overflow-x: hidden; } .nav { width: 100%; box-shadow: none } } /** * Формируем стиль заголовка (логотип) панели */ .nav h2 { width: 90%; padding: 0; margin: 10px 0; text-align: center; text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px; font-size: 1.3em; line-height: 1.3em; opacity: 0; transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; transition: opacity 0.8s, transform 0.8s; -ms-transition: opacity 0.8s, -ms-transform 0.8s; -moz-transition: opacity 0.8s, -moz-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; } .nav h2 a { color: #dadada; text-decoration: none; text-transform: uppercase; } /*плавное появление заголовка (логотипа) при раскрытии панели */ :checked ~ .nav h2 { opacity: 1; transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); } /** * формируем непосредственно само меню * используем неупорядоченный список для пунктов меню * прикрутим трансфомации и плавные переходы */ .nav > ul ( display: block; margin: 0; padding: 0; list-style: none; ) .nav > ul > li ( line-height: 2.5; opacity: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; -moz-transition: opacity .5s .1s, -moz-transform .5s .1s; -ms-transition: opacity .5s .1s, -ms-transform .5s .1s; transition: opacity .5s .1s , transform .5s .1s; ) :checked ~ .nav > ul > li ( opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0 ); transform: translateX(0); ) /* determine the intervals for the appearance of menu items */ .nav > ul > li:nth-child(2) ( -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; transition: opacity .5s .2s, transform .5s .2s; ) .nav > ul > li:nth-child(3) ( -webkit-transition: opacity .5s .3s, -webkit-transform .5s . 3s; transition: opacity .5s .3s, transform .5s .3s; ) .nav > ul > li:nth-child(4) ( -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s ; transition: opacity .5s .4s, transform .5s .4s; ) .nav > ul > li:nth-child(5) ( -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; transition: opacity .5s .5s, transform .5s .5s; ) .nav > ul > li:nth-child(6) ( -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; transition: opacity .5s .6s, transform .5s .6s; ) . nav > ul > li:nth-child(7) ( -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; transition: opacity .5s .7s, transform .5s .7s; ) /* * * design of menu item links */ .nav > ul > li > a ( display: inline-block; position: relative; padding: 0; font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 1.2em; color: #dadada; width: 100%; text-decoration: none; /* smooth transition */ -webkit-transition: color .5s ease, padding .5s ease; -moz-transition: color .5s ease, padding .5s ease; transition: color .5s ease, padding .5s ease; ) /** * state of menu links on hover */ .nav > ul > li > a:hover, .nav > ul > li > a:focus ( color: white; padding-left: 15px; ) /** * menu link underline */ .nav > ul > li > a:before ( content: ""; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 100 %; -webkit-transition: width 0s ease; transition: width 0s ease; ) .nav > ul > li > a:after ( content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: #3bc1a0; -webkit-transition: width . 5s ease transition: width .5s ease; ) /** * animate the underline of * links on hover */ .nav > ul > li > a:hover:before ( width: 0%; background: #3bc1a0; -webkit-transition: width .5s ease; transition: width .5s ease; ) .nav > ul > li > a:hover:after ( width: 0%; background: transparent; -webkit-transition: width 0s ease; transition: width 0s ease; ) /* fade background to main content * in this case, the elements are blocked * this is a controversial feature, if you need it * just uncomment */ /* .mask-content ( display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); visibility: hidden; opacity: 0; ) :checked ~ .mask-content ( visibility: visible; opacity: 1; -webkit -transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s; ) */

As you understand, almost all property values are optional, i.e. you can easily change all its elements to your taste and color; I hope the explanations will help you with this. Well, if something goes wrong, or some of my mistakes are discovered, write in the comments, we’ll definitely figure it out and fix it.

In conclusion, I would like to remind you that not all browsers handle CSS3 properties equally well. This solution is, of course, very interesting, but still still more experimental. Having adjusted it to your needs, before tightly screwing it to the working site, be sure to check its operation in different browsers and on various mobile devices.

Look at the result again, download the archive with the sources, experiment with various parameters and create, create, create...

In the near future I will try to tell and show how, based on this solution, you can easily implement retractable, side panels, with other equally important elements for interaction with users on board.

Now users have the opportunity to familiarize themselves with . All of them are presented in a separate category, which can be found on the TemplateMonster marketplace. There shouldn't be any difficulties with them. Just add your unique content and you're done - you can launch a business and attract more and more readers. It is also very important to remember that the text for each template was written by hand.

With all respect, Andrew

In this tutorial we will make a classic horizontal menu on 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 .

HTML horizontal menu structure

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-

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. 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 menu

First 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 Menu

Let'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

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.

home
Products
- Cloth
  - Shoes
  - Jackets
  - Trousers
- Electronics
  - Cameras
  - Computers
  - Phones
    - Samsung
    - Flf
    - Apple
- Food
- Tools
- Life chemistry
Services
- Service 1
- Service 2
- Service 3
News
Contacts

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 place of the background that I specified before.

.dws-menu > ul li a( display: block; /* Permalink - use to edit and share 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 - use to edit and share 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 desired this menu You can design it to match the style that suits you on the site; it’s quite simple to 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.

This is a list of links leading to different pages on the site. It looks good when the list of links, instead of simple markers, is supplemented with icons and it is not at all necessary to use graphics here. Why create unnecessary database queries?

HTML code

Between tags li write the link a(# temporary stub) with two block elements inside span. In the first span - tag i with an icon class whose code was copied from the site Font Awesome. In the second span- the name of the link, that is, the text.

Bicycles

Motorcycles

Buses

Cars

Helicopters

After connecting between tags head icon font Font Awesome- the menu looks like this.

CSS styles

To start with Google Font We’ll select an attractive font that supports Cyrillic if the vertical menu is in Russian.

Copy the connection code of the selected font and paste it on top CSS file.

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

In the selector body write the name of the selected font and set its size.

Body (
margin: 0;
padding: 0;
font-family: "Marck Script", sans-serif;
font-size: 20px;
}

We position our menu relative to the browser window, retreating from the top by 10% and from the left by 20%. Of course, these numbers are taken from the ceiling; you will have your own.

Ul(
position: absolute;
top: 10%;
left: 20%;
}

We fix the menu width at 200 pixels.

Width: 200px;

We have reached the list menu items. Removing markers from items li.

Ulli (
list-style: none;
}

We designate frames at the top and bottom that separate the menu items from each other.

Border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
margin: -1px 0;

There are not enough side frames and separators between icons and link names.

Draw the right frame for the tag a, which is an inline element, and you cannot create a border around an inline element. Therefore, we display the tag a block element.

Ulli a (
display: block;
}

Now you can set the frame, remove the underlining of the links and specify the color of the links.

Border-right: 1px solid #131313;
text-decoration: none;
color: #131313;

The left frame is still missing.

Tags span- block elements that will contain text, so span display it as an inline-block element.

Ulli a span (
position: relative;
display: inline-block;
}

We need for the first span, inside which there will be an icon, set styles that differ from the second span. For this purpose the first span denote by pseudo-class - span:nth-child(1) and style it separately. Set the right and left frame and width.

Ul li a span:nth-child(1) (
width: 30px;
border-left: 1px solid #131313;
border-right: 1px solid #131313;
}

The icons will be placed in the middle with 10 pixel margins in all directions.

Text-align: center;
padding: 10px;

The icons will be dark in color, 20 pixels in size, on a red background.

Color: #131313;
font-size: 20px;
background: #f44336;

In the second pseudo-class, you only need to set the fields.

Ul li a span:nth-child(2) (
padding: 10px;
}

Now vertical menu took its final form. See the whole code and the result.

In this post we will make a fixed side information menu. To implement icons, we will connect the font.

Step 1. Connect the font with icons, create an empty document

You can find detailed information about working with the FontAwesome font and a link to the project itself in my post -.

Here is the code for the page with the attached files:

Fixed side menu

Step 2: Add HTML markup for the fixed menu

Here is the markup code for our fixed menu:

As you noticed, I applied the tag

Step 3. Add HTML markup for the submenu

Your link text
Your link text
Your link text

The submenu is the same list as the main menu, plus a tag , which displays the “carriage on the left” icon, performs the function of a kind of “tail”, more details in the picture below :)

This element also connects the void between the menu block and the submenu, thereby allowing us to implement the transition option.

Step 4. Write styles for the fixed side menu

I tried to comment on the style code in places where it matters. In general, all uncommented points relate to the banal stylization of the background, color, etc.

#sidebar-menu ( position: fixed; /* fix our menu */ top: 200px; /* position of the menu relative to the top edge of the browser */ left: 0; /* stick the menu to the left edge */ padding: 10px; background: # 323A45; color: #FFF; border-radius: 0 8px 8px 0; ) #sidebar-menu li ( position: relative; cursor: pointer; ) #sidebar-menu li i ( /* Set the icons to a fixed size, height and line- height should be the same */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; background: #3CB7E7; text-align: center; ) #sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b ( display: none; position: absolute; /* position relative to the left edge is equal to the width of the element li */ left: 27px; top: 0; height: 27px; /* width is equal to the gap between the block menu and submenu */ width: 16px; line-height: 27px; background: transparent; color: #323A45; /* position the icon itself to the right so that it visually looks together with the submenu block */ text-align: right; ) #sidebar -menu li > ul ( display: none; position: absolute; top: -10px; left: 42px; width: 120px; padding: 10px; background: #323A45; border-radius: 8px; ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (display: block;) #sidebar-menu li a (display: block; padding: 4px 8px; border-radius: 4px; color: #FFF ; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; ) #sidebar-menu li a :hover ( display: block; background: #3CB7E7; )

If you have questions about styling, write in the comments to this post, I will be happy to answer.
That's all! Fixed side menu ready 🙂