What is one of the main elements of every Internet site? Of course, navigation menu. Each menu is a useful part of the website, as it is through it that the user can navigate to other sections of the site. The main interaction of the visitor with the website is carried out through the navigation menu. Nowadays, on the pages of websites, you can meet more and more attractive and convenient navigation menus.
Today we present to you 62 attractive navigation menus based on CSS, javascript or Flash technology.
CSS navigation menu
Games like a casino or snakes and ladders, decorated with a beautiful colorful menu.
Here we see a great soft color scheme and interesting effect when opening a submenu.
03.
Steven Wittens offers us a different perspective on this menu.
04.
On the UX Booth website, you can see a stylish, but very simple menu.
05.
The MacRabbit site apparently uses a MAC OS or Apple style menu.
06.
Joyent's website uses a simple, businesslike-looking menu that lists the company's work.
07.
The sophistication and simplicity of this portfolio will definitely appeal to you.
08.
Large menus in the form of images will definitely grab your attention. As you can see, not a very traditional way of designing a menu.
09.
A dropdown menu that uses 2 colors that symbolize the active menu item and the inactive one.
10.
The American record label Small Stone recordings used a menu in the form of a radio, or in the form of a Space Echo Roland SE-201.
11.
Something like a map with which you can "scout" the entire website.
12.
An Apple-style round menu featuring iPhone apps.
13.
Clearleft used something like a calendar with scheduled tasks as a menu.
14.
The selected menu item appears to be in the pressed state.
15.
Clicking on a menu item expands an additional submenu. The menu looks quite simple, although it is painted black.
16. .
This menu uses a simple and nice cool hover effect.
17.
The size of the letters is so cute and unusual and that's what grabs your attention.
18.
Great solution for using block navigation with a great hover effect.
19.
A great green color and leafy menu look will catch your eye. It also has a great effect that will help you determine which subsection you are currently in.
20.
Ronny Pries' website designers took advantage of a great navigation menu concept. Users are guided according to the plan on the floor.
21.
Another creative way to implement the navigation menu is to use an image of a fruit tree, through which you can get to other subsections.
22.
Check out Matt Dempsey's creative use of brush strokes.
23.
An excellent implementation of the navigation menu.
24.
Vertical tabs that look like folders that work directly on the website. Very rarely used this method but works and looks great.
25.
Navigation menu implemented in the style of punk rock music. See how Jeff Sarmiento implemented this idea.
26.
Kind of like a hierarchy. Another creative way to implement the navigation menu.
27.
Icons enhance the feeling of interacting with the menu.
Navigation menus developed with Flash technology
AT this menu navigation implemented a very interesting effect when hovering the mouse cursor.
29.
Navigation that allows you to make some adjustments using special sliders.
30.
An interesting and attractive menu in the style of Tarot cards. If you click on the card, it will immediately go to the fire.
31.
Fluid navigation menu that will give you the feeling of waves moving on the lake.
32.
The Nick Jones website uses a simple but dynamic navigation menu to navigate through the portfolio.
33.
On the Marc Ecko website, navigation is presented in the form of an image gallery. It allows visitors to walk through the pages of art and philosophy.
34.
HBO is something of a movie document archive. Using the navigation menu interactive selection films.
35. ?
An interesting navigation menu with a simple hover effect. When you hover over an icon, the contents of the menu are displayed.
36.
Navigation menu design agency based in New York and Fort Lauderdale.
37.
Stylish neo-antiquity navigation design with frescoed background.
38.
The Nick Ad website uses a flexible yet easy to use navigation menu. Click anywhere on the page and you will see an interesting effect.
39.
A creative person uses their own work to attract visitors to the portfolio.
40. .
Section Seven has an interesting brochure style menu with submenus.
41.
A navigation menu that opens and closes when certain items are selected.
42.
On the Beside website, the navigation menu is implemented in a rainbow style.
43.
Cardboard portfolio concept. Very interesting hover effect.
44.
Small cubes stacked together act as a navigation menu.
45.
A color-rich map with an overtone of the texture of national Hawaiian slippers, which all the people are proud of.
46.
A table with things that symbolize the menu: a phone for contacting the administration, a magazine for going to the portfolio, a newspaper for watching news and more.
It is very interesting when real things are used as navigation.
47.
A great creative way to implement a navigation menu. Each element is beautiful in its own way, they all give life to the entire website. Very rarely use such methods, but it is really magical.
Navigation menus developed with javascript technology
Simple and eye-pleasing navigation menu in different colors.
49.
It looks like the menu is implemented with Flask, but it's not. A neat, cool and stylish navigation menu with mouse hover effects.
For easy navigation around the site, menus are used on all pages so that the user understands what and where you have. Almost always at the top of the page (in the header) they have horizontal menu by sections (categories) of the site, and the vertical menu is written in the sitebar (in the column) and used to navigate through the articles.
From the article, you will understand how to make a menu for an html site, what you need to write in order to get a horizontal and vertical menu in css, or a menu with a drop-down list.
In order to make a menu (any) we will use bulleted list, to which we will directly attach our own class and write our parameters for this class with the necessary values.
For example, to create a menu, we use a list with the class class="menu" (any class name, only Latin letters), and the html code will look like this:
AT menu styling I specified the required properties with the desired values:
Required CSS Parameters and Values
- margin: 0; - remove all indents of the list, otherwise the browser will substitute the default values of 20px;
- list-style-type: none; - remove the markers from the menu items, otherwise the browser will add dots or numbers.
This is how the menu is made on html pages, and now let's move on to creating a horizontal menu and look at everything with examples.
How to make a horizontal menu in CSS
To display a horizontal menu using a list, we just need to write in the above code just one parameter display: inline; so that the menu items are aligned on one line and follow each other horizontally. And also add padding between menu items using margin .
And it will look like this:
We have the horizontal menu ready, it remains to give it a beautiful appearance.
Let's give each item in the horizontal menu a border and make it have beveled edges, fill certain color background-color (add a background for the menu item), and change the appearance of the link.
The horizontal menu will already be displayed in this way:
Since the horizontal menu in most cases is written in the header of the site, in the example I added a background to the menu, which you will change to match your header color.
And for clarity, I made the menu items centered by applying the property text-align: center; , which can be deleted (automatically aligned to the left), or set text-align value:right; and the horizontal menu will be displayed on the right side.
By the way, you can also use, which you can see with your own eyes and download for free.
How to make a vertical menu with CSS
Vertical menu in CSS is done and styled on the page in much the same way as the horizontal one, only here it changes in .menu-2 li (... the parameter with the value display: block; (points to a block element), which gives it a vertical display of menu items.
And one more addition to the vertical menu: since in most cases it is located in the side column of the site, which has a fixed width, we are also forced to set the width width: 100%; our vertical menu so that it spans the full width of the column.
Let's look at the CSS vertical menu with an example:
This is how the vertical menu will be displayed on the page:
Be careful!
How to make a drop down menu with CSS
Make a drop down menu with using CSS pretty simple. We will just add a few parameters to the existing code from the vertical menu, which will be responsible for the drop-down list of menu items.
Be sure to remember!
In order for the drop-down menu to strictly appear opposite the leading link, you need to write position: relative in CSS for the li tag where this link is located; , and for the dropdown menu position: absolute;
Let's write html code for the dropdown menu in CSS.
See how the CSS dropdown menu will look on the page.
In the same way, a drop-down menu is written with a horizontal navigation layout. The only thing is do not forget to change the values of the top and left parameters (top and left indent).
Look!
With just 3 changes to CSS, our vertical dropdown navigation layout will turn into a horizontal dropdown navigation.
Changes to the CSS for the dropdown menu
- Replace in .saitbar - width: 240px; on width: 100%;
- Replace in .menu-4 li - display: block; on display:inline-block;
- Replace in .menu-4 ul.submenu - top: 0; on top: 34px;
- Replace in .menu-4 ul.submenu - left: 214px; on left: 7px;
Horizontal menu is a list of sections of the site, so it is more logical to mark up inside the element
- and then apply CSS styles to its elements. This arrangement of the menu is the most common due to the obvious advantages in its positioning on a web page.
- Menu item
- Menu item
- Menu item ...
- .
As discussed in previous publications, the paired element
- creates a bulleted list, and
- is one element of the list. For clarity, let's write the code simple menu:
Navigation Site navigation
- home
- News of the week
- Technological advances
- Chat
However, with the advent of the platform, the markup language was replenished with additional tags. That is why the menu of modern websites is created using a special tag< menu>. In use, this element is no different from bulleted lists.
Instead of a unit < ul> prescribed < menu>. However, significant differences appear if judged from the side of work. So, the second example speeds up the work of search programs and robots in . When analyzing the structure of the site, they immediately understand that this piece of code is responsible for the site map.
There are horizontal, vertical and drop-down menus. Sometimes the navigation bar is designed as an image. Since the technology segment has expanded, web services are being made adaptive, i. page structure automatically adapts to the screen size of devices. Consider the listed menu groups.
Let's create a horizontal navigation model
This type of navigation is the most popular. With a horizontal design of the panel, all menu items are located in the page header or in the "footer" (sometimes navigation elements are duplicated, being displayed both above and below).
As an example, we will create a horizontal panel, the menu items of which will be styled using css (cascading style sheets), or rather transformed. So, each individual element will be in a beveled rectangle. Intrigued?
For transformation we use a css property called transform. To specify a transformation, use the built-in function skewX, in which the angle of inclination is specified in degrees.
Unfortunately, each browser works with this property in its own way, despite the prescribed standards. Therefore, special prefixes were created to indicate that or:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
And now the acquired knowledge is applied to writing an example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Horizontal panel Horizontal panel And now vertically. I said vertical!
For the second program, we use the previous code as a basis. I wanted my vertical menu items not to be slanted, but with rounded corners.
For this, I used another css property border-radius.
In previous articles, I have already worked with this parameter, so I think there will be no difficulties in understanding its functioning.
Vertical panel As you can see, the main change in this code is the absence of the declaration display: inline-block, which actually was responsible for the horizontal arrangement of navigation items.
Sub-items in the menu: drop-down list
We have reviewed the main groups of navigation bars, but there are several more varieties, or better to say add-ons.
Sometimes situations arise when some of the points complement the main ones. In this case, you can not do without drop-down lists. They are created by transformations with css tools.
Below I have attached the code of a small program that implements this approach.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Drop-down list Drop-down list Horizontal
Navigation bar
Having easy to use navigation is essential for any website.
With CSS, you can turn boring HTML menus into beautiful navigation bars.
Navigation bar = list of links
The navigation bar needs standard HTML as a base.
In our examples, we will build a navigation bar from a standard HTML list.
The navigation bar is basically a list of links, so using elements
- and naturally
- :
Example
- home
- News
- Contacts
- About Us
Now let's remove the bullets, margins and padding from the list:
Example explanation:
- list-style-type: none; - Removes markers. Navigation bar doesn't need bullets for list
- Set margin: 0; and padding: 0; to remove default browser settings
The code in the example above is standard code, used on both vertical and horizontal navigation bars.
Vertical navigation bar
To create a vertical navigation bar, you need to set the element style in the list, in addition to the code above:
Example explanation:
- display:block; - Displaying links as block elements constitutes the area of clickable links (not just text), and allows you to specify the width (and padding, margins, height, etc. whatever you want)
- width: 60px - Block elements take up the full width available by default. We want to set the width to 60px
You can also set the width
- and remove the width , because they will take up the full width available when displayed as block elements. This will produce the same result as the previous example:
- or links in the center.
Add property border to
- . Add borders around the navigation. If you also want to set borders inside the panel, you need to add border-bottom to all elements
- , except for the last one:
Fixed vertical navigation
Create a full-height, "fixed" sidebar navigation:
Example
ul(
Code Editor »
list-style-type: none;
margin: 0;
padding: 0;
width: 25%
background color: #f1f1f1;
height: 100%; /* Total height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if sidenav has too much content */
}Note: This example may not work correctly on mobile devices.
Horizontal navigation bar
There are two ways to create a horizontal navigation bar. Usage embedded or floating list items.
Built-in List Items
One way to build a horizontal navigation bar is to specify elements
- as built-in, in addition to "standard" in the code above:
Example explanation:
- display: inline; - By default, items
- are block elements. Here we will remove the line breaks before and after each list item to display them on the same line.
Floating List Items
Another way to create horizontal navigation, floating elements
- they need to specify the location for the navigation links:
Example explanation:
- float: left; - Use float to make block elements float next to each other
- display:block; - Displaying links as block elements makes up the entire area of clickable links (not just text), allows us to specify padding (and height, width, margins, etc. if you want)
- padding: 8px - Because block elements take up the entire available width, they cannot float next to each other. So, point out some additions to make them look nice.
- background-color: #dddddd; - Add grey background colors for each element
Advice: Add background-color: #dddddd; in
- , except for the last one:
Vertical Navigation Bar Example
Creating a basic vertical navigation bar with a gray background color and changing the background color of links when you hover over them:
Example
ul(
list-style-type: none;
margin: 0;
padding: 0;
width: 200px
background color: #f1f1f1;
}li a (
display:block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}/* Change the link color on hover */
Code Editor »
li a: hover (
background-color: #555;
color:white;
}Center links and add borders
Add text-align:center alignment to
- is one element of the list. For clarity, let's write the code simple menu:
How to make a horizontal menu: markup and design examples
HTML markup and basic styles for the horizontal menu
By default, all list items are located vertically, spanning the entire width of the container element, which in turn spans the entire width of its container block.
HTML markup for horizontal navigation
A horizontal menu located inside the tag can additionally be placed inside the element and/or
There are several ways to place them horizontally. First you need to reset the default browser styles for navigation elements:
Ul ( list-style: none; /*remove the list markers*/ margin: 0; /*remove the top and bottom margins of 1em*/ padding-left: 0; /*remove the left padding of 40px*/ ) a ( text-decoration: none; /*remove the underlining of link text*/)
Method 1. li (display: inline;)
Make list items inline. As a result, they are arranged horizontally, on the right side, a gap equal to 0.4em is added between them (calculated relative to the font size). To remove it, add a negative right margin to li li (margin-right: -4px;) . Next, style the links as you wish.
Method 2. li (float: left;)
We make the elements of the list floating. As a result, they are arranged horizontally. The height of the ul container block becomes zero. To solve this problem, we add (overflow: hidden;) to ul , expanding it and thus allowing it to contain floating elements. For links, add a (display: block;) and style them as you wish.
Method 3. li (display: inline-block;)
Making list items inline-block. They are arranged horizontally, a gap is formed on the right side, as in the first case. For links, add a (display: block;) and style them as you wish.
Method 4. ul (display: flex;)
Making the ul list a flexible container using the . As a result, the elements of the list are laid out horizontally. Add a (display: block;) for links and style them as you wish.
1. Responsive menu with underline effect when hovering over a link
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;) .menu- main li:after ( content: "|"; color: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a ( text-decoration: none; font-family: "Ubuntu Condensed", sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom : -5px; left: 50%; background: #feb386; transition: .8s; ) .menu-main a:hover:before, .menu-main .current:before (left: 0;) .menu-main a: hover:after, .menu-main .current:after (right: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li:after (content: none;) .menu- main a ( padding: 25px 0 20px; margin: 030px; ) )2. Responsive menu for a wedding website
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ).top-menu:after ( border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; ) .menu-main:before, .menu-main:after ( content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50% ); ) .menu-main:before (left: 15px;) .menu-main:after (right: 15px;) .menu-main li ( display: inline-block; padding: 5px 0; ) .menu-main a ( text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom : 1px solid transparent n: .3s linear; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) )3. Responsive menu with scallops
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; ) .menu-main:after ( content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; color: #777777; transition: .3s linear; position: relative; ) .menu -main a:before, .menu-main a:after ( content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; ) .menu-main a:before (left: 5px;) .menu-main a:after (right: 5px;) .menu-main a. current:before, .menu-main a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (opacity: 1;) .menu-main a.current, .menu-main a:hover (color: #F58262; ) @media(max-width:680px) ( .menu-main li (display: block;) )4. Responsive Ribbon Menu
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); ) ; z-index: 2; left: 0; width: 100%; height: 3px; ) .top-menu:before ( top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); ) .top- menu:after ( bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) . menu-main:before, .menu-main:after ( content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotate(360deg); z-index: -1; ) .menu-main:before ( left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px solid rgba(2 55, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; color: white; transition: .3s linear; ) .menu-main a.current, .menu-main a:hover (background: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (content: none;) .menu-main a (display: block;) )5. Responsive menu with a logo in the middle
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( position: relative; background: rgba(34,34,34,.2); ) .menu-main ( list-style: none; margin: 0; padding: 0; ) .menu-main:after ( content: ""; display: table; clear: both; ) .left-item (float: left;) .right-item (float: right;) .navbar-logo ( position: absolute; left: 50%; top : 50%; transform: translate(-50%,-50%); ) .menu-main a ( text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; letter-spacing: 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: white; transition: .3s linear; ) .menu-main a:hover (background: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-top: 90px; text-align: center; ) .navbar-logo ( position: absolute; left: 50% ;top: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; display: inline-block; ) .menu-main a ( line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) )6. Responsive menu with logo on the left
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( content: "" ;display: table; clear: both; ) .navbar-logo (display: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; ) .menu-main a:hover:before (opacity: 1;) @media (max-width: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:be fore (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )Good day to everyone who is currently reading this publication. Today I want to tell you about one of the site building tools that no web resource can do without. This is the site menu, or as they say, the site map. To date, there is an infinite number of types and subspecies of the menu.
Developers of online stores, blogs, educational services and other resources are experimenting and creating more and more new and unusual cards. After reading the article, you will find out what main groups all types of navigation bars are divided into, you will be able to try each of them, and also learn how to write menu code for an html site. And now let's get straight to the point!
Navigation bar creation tools
In the markup language, there are several ways to create a menu. Their main concept is to use an unordered list. Thus, in the usual html 4 for us, developers write tags on the page
- and