Horizontal css menu with icons. Vertical menu with CSS Vertical menu with css icons
Vertical menu done on the basis of a list, bulleted or numbered. By default, all list elements are arranged vertically, occupying the entire width of the container element, which in turn occupies the entire width of its container block.
List elements can contain not only links, but also headings, icons, and pictures. Using the vertical menu, you can create comments on the site, a list of categories, etc.
1. Vertical menu with header
Simple elegant design option. Suitable for styling categories on a website. When hovered, the list item changes the link color.
An interesting solution for designing a vertical menu; it is possible to add nested menus. “Metro line” is the left border of the list, markers are generated before each link.
Menu icons create a visual anchor, complementing the verbal description of each category. To display icons you need to connect . You can also use any other icon font or picture icons.
Good website navigation is very important for bloggers. With its help, the visitor quickly finds the desired blog page. Search engines also appreciate the clarity of the site. In this article you will learn how to make a horizontal menu for Blogger with pop-up icons. A menu with pop-up icon buttons is created in CSS. To view the menu, click on the button below:
How to insert a horizontal css menu with icons on Blogger
Go to the “Template” tab, place the cursor in the editor (anywhere),
Press Ctrl + F to search by code and find the code section ]]>
Insert the following code before this code: ..
/* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav (margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;) #btrix-nav li (float: left;) #btrix-nav li a (display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb; border-bottom: 1px solid #555;) #btrix-nav li a span.aname (font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);) #btrix-nav li a img (position: relative;top: 0;transition: top .5s ease;) #btrix-nav li a:hover (cursor: pointer;) #btrix-nav li a:hover img (top: -85px;) #btrix-nav li a:hover .aname (top: 85px;) #btrix-nav li:nth-child(1) a (background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;) #btrix-nav li:nth-child(2) a (background: #9bc704;) #btrix-nav li:nth-child(3) a (background: #0dc3ff;) #btrix-nav li:nth-child(4) a (background: #51a2ec;) #btrix-nav li:nth-child(5) a (background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;)
Now go to the “Design” tab,
Add a new HTML/JavaScript element and add the code:
Make the necessary changes to the code that you added to the HTML/JavaScript gadget:
Change the # icon to a link to the desired blog page (for example, tag page, contact page, blog home page, etc.)
link to the image highlighted in orange, replace with a direct link to the picture icon for the corresponding item.
Item highlighted in blue, this is the css menu page title.
Move the HTML element? JavaScript in the right place in the “Design” tab of the blog.
For your menu, you can use icons, logos and other png images with a transparent background. In order to find the images you need, it is better to use the icon search. For example, iconsearch.ru
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.
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.
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.
Tags span- block elements, inside of which there will be text, therefore 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.
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" /> 
