Habr, hello!
There are a lot of good solutions from different specialists on Codepen, and I believe that the best of them should be collected in one place. Therefore, 2 years ago, I began to save interesting scripts on various topics on my computer.
I used to post them in the product group of the cloud IDE mr. Gefest, these were assemblies of 5-8 solutions. But now I have started to accumulate 15-30 scripts in different topics (buttons, menus, tooltips, and so on).
Such large sets should be shown to a larger number of specialists. Therefore, I post them on Habr. I hope they will be useful to you.
In this review, we will look at multi-level menus.
Flat Horizontal Navigation
A beautiful navigation bar with a smoothly appearing submenu. The code is well structured, js is used. Judging by the features used, it works in ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Responsive link bar with two-column submenu. Everything is done in css and html. Applied css3 selectors which are not supported in ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Stylish vertical menu with smoothly opening elements. Used transition, transform js code.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Dark vertical navigation bar with ionicons icons. javascript is applied. In ie8 it will most likely work without animation.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Stylish menu with two output formats: horizontal and vertical. Icons and css3 animation are used. In ie8 it will definitely look terrible, but in other browsers everything is cool.
Link to vertical: http://codepen.io/rizky_k_r/full/sqcAn/
Link to horizontal: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
A horizontal menu with large items and a dropdown list of links. Clean and minimalistic code without js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Simple but stylish horizontal menu. Font-awesome is used. Everything works on css and html, without js. Will work in ie8.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
Great solution for online stores. Displays multiple levels of categories and large images (such as stock items). It is based on boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Stylish navigation bar with smooth submenus. In older browsers it will display with problems.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Horizontal menu with very cool animation without js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsive Mega Menu - Navigation
Horizontal responsive menu. Looks good, but the mobile version is a little lame. Used css, html and js.
http://codepen.io/samiralley/pen/xvFdc
Pure CSS3 Menu
original menu. With simple and clean code without js. Use for "wow" effects.
http://codepen.io/Sonic/pen/xJagi
Full CSS3 Dropdown Menu
Colorful drop-down menu with one level of nesting. Icons from font-awesome, html and css are used.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Pretty good horizontal menu with three levels of nesting. Works without js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown menus
Minimalistic menu with the original effect of the appearance of a nested list of items. Pleased that this solution is also without javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
A primitive but effective solution. Only css and html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu - Menu Interaction Concept
An interesting menu concept for a mobile phone. I haven't seen this yet. Used html, css and javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Clean and simple code, no js. It will definitely work in ie8.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown
The solution is not bad, but too many classes are used. I am glad that there is no js.
http://codepen.io/jonathlee/pen/mJMzgR
Drop Down Menu
Nice vertical menu with minimal javascript code. jQuery is not used!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
A horizontal menu with additional captions can decorate your site well. The code is simple and clear. Javascript is not applied.
http://codepen.io/ibeeback/pen/qdEZjR
Beautiful solution with lots of code (html, css and js). There are 3 submenu formats. For online stores, the solution is well suited.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (special solution)!
Dark horizontal menu with thirteen (13) animation options! Definitely recommend to read, useful in everyday life.
http://codepen.io/cmcg/pen/ofFiz
P.S.
I hope you enjoyed the assembly of 23 solutions. If you want to continue reading them, then take the survey below.
All pleasant work.
If your website is not limited to a single web page, then you should consider adding a navigation bar (menu). A menu is a section of a website designed to help the visitor navigate the site. Any menu is a list of links leading to the 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 menu
The 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 id "navbar". Each element
Our next task is to reset the default list styles. We need to remove the outer and inner indents from the list itself and the markers 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, size and saturation of the font, remove the underline, add small indents and redefine the display element from inline to block. Additionally, the left and bottom frames were added to the list items.
The most important part of our changes is the redefinition of inline elements to block elements. Now our links take up the entire available space of the list items, meaning we no longer need to hover over the exact text to follow the link.
#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 above into one example, now by clicking on the try button, you can go to the example page and see the result:
When you move the mouse cursor over a menu item, its appearance can change, drawing the user's attention to itself. You can create such an effect using the :hover pseudo-class.
Let's go back to our earlier vertical menu example and add the following rule to the stylesheet:
#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Try »
Horizontal menu
In 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 a web page.
A horizontal menu can be created by styling a regular list. Display property for elements
To arrange menu items horizontally, first create a bulleted list with links:
Let's write a couple of rules for our list that reset the style used for lists by default, and redefine the list items from block to inline:
#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Try »
Now we just need to 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 menu
The menu we will create will have main navigation links located in the horizontal navigation bar and sub-items that will only be displayed when the mouse cursor is hovered over the menu item to which these sub-items belong.
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 sub-items in a separate list by nesting it in an element
Try »
Now let's start writing the CSS code. The first step is to hide the list with sub-items with a display: none; declaration so that they don't show up on the web page all the time. To display sub-items, we need that when hovering over an element
#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 that our submenu dropdown doesn't push the content below the navigation bar down. To do this, we will set the list items to position: relative; , but a list containing subitems 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 a 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 our dropdown 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; )
Hello dear readers of my blog! Today's article will be very useful for beginners. Since today we will be designing a simple horizontal menu. Before we proceed directly to the layout, I want to say a few words about why I decided to choose this particular topic for the article.
In fact, everything is quite simple, when I was thinking about the topic of the next lesson for the site, I began to recall and analyze my experience in studying layout, what I had to face at the initial stage of becoming myself as a layout designer, which was most incomprehensible to me when studying this area etc. I asked myself all these questions in order to better understand what might be interesting to a person who starts his way as a layout designer. And personally, as soon as I started learning layout, most of all I had questions about the layout of various menus, especially when it comes to multi-level menus. And so today we will talk about the menu, and more specifically about the horizontal menu. So let's start!
Let's start layout of our horizontal menu!
As you probably guess, the first thing we need to do is to create an html page with standard markup and include a style file to it. I will not dwell on this step in detail, because I still hope that you are not so beginner as to tell you in detail what body and head are and how styles are included. Let me just say that in addition to the styles for our menu, I will write the simplest reset to the css file in order to reset the styles and achieve the same display of indents in all browsers. This is how my simplest reset looks like:
I won’t say anything about zeroing styles yet, since in fact this is a topic for another article, the only thing you need to know about the above code is that thanks to this code, all page elements that we will write will have their margins and padding, we need to do this so that our page looks the same in all browsers.
So what do we have at this stage? We have an html page with standard markup:
And we have a style file connected to this page (I have style.css), with the following content:
The next step is to create the html markup for our menu.
Creating the markup for the menu
In our markup, we will use the new tag
And since we have already started talking about support for new html 5 tags, so that we do not have problems with this in older browsers, we need to include a special library in our document - html5shiv. This is done by inserting
the head section of your page with the following code:
Everything after this tag
Let's go back to our markup. Next we need in our tag
So, with the markup, we seem to have finished it's time to proceed directly to writing styles, since now our menu looks, to put it mildly, not very good:
Styling Our Horizontal Menu
And so, first of all, when laying out the menu, we need to remove the list markers, we obviously don’t need them, it’s done like this:
Ul( list-style:none; )
After that, our menu will look like this:
I don't really like that our menu sticks to the edges of the browser, let's fix that:
With this code, we set the width of our menu, gave it 50px top and bottom indents, and centered it. Who does not know if a block element has a width, then in order to position this element strictly in the center, we just need to set its outer indent (margin) to the right and left with a value of auto.
The next step, we need to finally make our menu horizontal, this is done by setting the elements
Menu li( float:left; )
Everything now our menu has become horizontal.
If you do not understand what exactly happened and what the float property does, I recommend that you google information about this property and study it well, since
not a single page of layout can do without it, I can tell you for sure. Well, okay, let's continue!
Menu li a( display:block;/* Make the link a block element*/ padding:12px 20px;/* Set the padding */ text-decoration: none; /* remove the underline */ color:#fff;/* make the color white links */ background:#444;/* make background color dark */ font:14px Verdana, sans-serif;/* set font size and name */ )
One of the most important rules here is display:block;. The fact is that links are inline elements by default, and indents are applied to inline elements differently in different browsers, so it is advisable to make the link a block element and only then apply properties associated with external or internal indents to it. Now I don’t want to load you with unnecessary information over time, using real examples, you yourself will understand why such an emphasis is placed here.
Let's see what we got, refresh the browser page and tadam!:
As you can see, it looks not bad, we can say that, in principle, our menu is ready. The only thing that needs to be done is to set the light of links on hover, well, it seems to me that the menu will look better with separators between items.
Let's start with delimiters:
Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )
What have we done here? Yes, everything is very simple, we asked for our items (
Again, let's see what we've got:
In my opinion, with separators is much better.
Menu li a:hover( background:#888; )
Again using a special pseudo-class, this time hover, we set the color of the link when hovering over it, look:
In my opinion, cool 🙂, I hope you have the same menu as mine.
This is where I will end this lesson, I really hope that it was useful to you and now you know how to make a simple horizontal menu using pure html and css. Of course, we have laid out a single-level menu, it will be a little more difficult with a two-level menu (with a nested list), but this is a topic for another lesson, that's all for me. Come again, I will be glad!!!
A task
Make a horizontal menu, the items of which have an arbitrary slope (Fig. 1).
Rice. 1. Menu view with slanted items
Solution
The transform style property is responsible for transforming the element, and the skewX function is used as its value, which sets the desired slope. The tilt angle is easier to set in degrees, for example, 30deg is 30º from the vertical. The transformation affects all child elements, so the text inside the element will also be skewed, which is not the best way to reflect on its readability and beauty. Therefore, it is important to apply the slope to the text again, but in the other direction, for this it is enough just to change the sign in front of the degrees value.
Browsers support the transform property predominantly with their own prefixes, so for consistency in styling, repeat it several times with the same value, adding -moz- for Firefox, -webkit- for Safari and Chrome, -o- for Opera and -ms - for the Internet Explorer browser as shown in example 1.
Example 1: Menu item slant
HTML5 CSS3 IE Cr Op Sa Fx
- Joker
- Pazuzu
- Palpatine
- Doctor Doom
In this example, the horizontal menu is created using a bulleted list. In order for the list to be exactly horizontal, the display property with the value inline-block is added to the li element in styles. For skew, the transform property is used with the skewX function and a value of -30º. This property is also applied to links inside the list, but with a positive value of 30º, this ensures that the letters are displayed correctly, rather than slanted.
Chrome, Safari, and Firefox browsers use the transform property for block or inline-block elements, so links have their display property set to block .
A task
Create a dropdown menu with CSS and HTML tools.
Solution
First, let's create a list, lay it out horizontally, and style its appearance. This will be the main menu, and then we will make a drop-down menu for its items.
We have a list like this:
Figure 1. Preparatory work.
Please note that the style of the link changes when you hover over it. This is implemented using the :hover pseudo-class. This pseudo-class sets the style of an element when hovering over it without the mouse button being pressed. If there is a button press, this is another pseudo-class.
Now let's move on to solving our problem. Let's make a drop-down menu for the "Services" item, add drop-down sections: "Buy", "Sell", "Exchange". These items are a separate list that is nested in the tag
Let's create this list and add styles to describe its appearance.
Now we have the following list:
Figure 2. Preparatory work. Of course, this is not what we need. By default, this list should be hidden and only become visible on hover. You can hide an element using a rule rule ( display : none ). And when you hover over it, you need to activate it by making the rules visible again ( display : inline-block ).
Now our menu disappears and appears, but we need it to appear on top of existing elements without changing the already established borders of existing blocks.
In order for an element to be displayed without affecting the display of other elements, it must be positioned with a value of absolute .
What we did here:
- positioning rule (position : relative ;). This is done so that the nested list's absolute position coordinates report starts from the upper left corner of this block, and not the corner of the screen.
- added to parent element
- rule (height : 20px ;). We gave it a height so that it would be more convenient to position the drop-down list.
- Set absolute positioning (position : absolute ;) to the dropdown list and set coordinates: top and left .
Now the dropdown menu works correctly.
Figure 3. Final version. Of course, here you can make a more beautiful appearance of the drop-down menu, but within the framework of our task, this is enough.
The learning problem has been solved. Bye.
