Hello dear readers of my blog! Today's article will be very useful for novice layout designers. Since today we will be creating a simple horizontal menu with you. 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 remember and analyze my experience of 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 of interest to a person who starts his journey as a layout designer. And for me personally, as soon as I started to study layout, the most questions arose 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 here we go!
Let's start the layout of our horizontal menu!
As you probably guess, the first thing we need to do is create an html page with standard markup and connect the stylesheet to it. I will not dwell on this step in detail, since I still hope that you are not beginner enough to tell you in detail what body and head are and how styles are connected. I will 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 indentation in all browsers. This is how my simplest reset looks like:
I will not say anything in detail about resetting styles either, 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 margins reset to zero. padding, this must be done in order for our page to look the same in all browsers.
So what do we have at this stage? We have a html page with standard markup:
And we have a stylesheet connected to this page (mine is style.css), with the following content:
The next step is to create the html markup for our menu.
How to create the markup for the menu
In our markup we will use a 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 old browsers, we need to connect a special library to our document - html5shiv. This is done by inserting into
the head section of your page with the following code:
Everything after this tag
Let's go back directly to our markup. Next, we need in our tag
So with the markup, we seem to have finished, it's time to start writing the styles directly, since now our menu does not look very good, to put it mildly:
Writing Styles for Our Horizontal Menu
And so, first of all, when laying out the menu, we need to remove the list markers, we obviously do not need them, it is done like this:
Ul (list-style: none;)
After that, our menu will become like this:
I don't really like that our menu is sticky 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 margins and positioned it in the center. 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 it an external margin (margin) on the right and left with the value auto.
The next step we need to finally make our menu horizontal, this is done by setting the elements
Menu li (float: left;)
All 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 the information about this property and study it thoroughly, since
Not a single page of layout is complete without it, I am telling you that for sure. Well, okay, let's continue!
Menu li а (display: block; / * Making the link a block element * / padding: 12px 20px; / * Setting internal padding * / text-decoration: none; / * removing the underline * / color: #fff; / * making the color links white * / 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, by default, links are inline elements, and indentation is applied to inline elements differently in different browsers, so it is advisable to make the link a block element and only then apply the properties associated with external or internal indentation to it. Now I don't want to burden you with unnecessary information over time, using real examples, you yourself will understand why such an emphasis is made here.
Let's see what happened, refresh the browser page and tadam !:
As you can see, it doesn't look bad, we can say that, in principle, our menu is ready. The only thing that still needs to be done is to set the link light on hover, well, I also think the menu will look better with separators between the items.
Let's start with the 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 set for our points (
Again, let's see what we got:
In my opinion, with delimiters 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 the cursor is hovered over it, look:
In my opinion, cool 🙂, I hope you have the same menu as mine.
On this I will end this lesson, I really hope that it was useful to you and now you know how to typeset a simple horizontal menu in pure html and css... Of course, we 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 already a topic for another lesson, that's all for me. Come back again, I will be glad !!!
Habr, hello!
Many good solutions from different specialists appear 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 cloud IDE product group mr. Gefest, these were assemblies of 5-8 solutions. But now I began to accumulate 15-30 scripts in different topics (buttons, menus, tips, and so on).
Such large sets should be shown to more professionals. Therefore, I post them on Habr. I hope they will be useful to you.
In this review, we'll take a look at layered menus.
Flat Horizontal Navigation
Nice navigation bar with smoothly appearing submenus. 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 that are not supported in ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Stylish vertical menu with smoothly drop-down elements. Transition, transform js-code is used.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Dark vertical navbar with icons from ionicons. 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 awful, but in other browsers everything is cool.
Vertical link: http://codepen.io/rizky_k_r/full/sqcAn/
Horizontal link: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
A horizontal menu with large items and a drop-down list of links. Clean and minimalistic code without js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Simple yet stylish horizontal menu. Used by font-awesome. Everything works in css and html, no js. In ie8 will work.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
An excellent solution for online stores. Displays multiple levels of categories and large images (for example, stock items). It is based on boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Stylish navigation bar with smooth submenus. It will display with problems in older browsers.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Horizontal menu with very cool animations 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/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
A colorful dropdown menu with one nesting level. Icons from font-awesome, html and css are used.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Quite a good horizontal menu with three levels of nesting. Works without js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown menus
A minimalistic menu with the original effect of the appearance of a nested list of items. I am glad 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 concept of a menu for a mobile phone. I have not seen this before. Used html, css and javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Clean and simple code, no js. In ie8 it will definitely work.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown
Not a bad solution, but there are too many classes used. I am glad that there is no js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown 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 straightforward. Javascript does not apply.
http://codepen.io/ibeeback/pen/qdEZjR
Nice solution with a lot of code (html, css and js). 3 submenu formats were invented. The solution is well suited for online stores.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (Special Solution)!
Dark horizontal menu with thirteen (13) animation options! I definitely advise you to read it, it will come in handy in everyday life.
http://codepen.io/cmcg/pen/ofFiz
P.S.
I hope you enjoyed the assembly of 23 solutions. If you want to read them further, then go through the survey below.
Enjoy your work, everyone.
Centering a horizontal menu can be a tricky task, especially for those new to CSS. Finding solutions leads to a very limited list of methods, most of which rely on CSS, JavaScript tricks or the use of non-standard rules that are not supported by all browsers. In this tutorial, we'll walk you through the method for centering a horizontal menu, which uses only standard CSS rules and works in all browsers.
An example of a centered menu
Below is a horizontal menu centered in this column, in which the second tab is activated. You can try resizing the browser window or page to make sure the menu always stays centered and responsive.
On the demo page, you can see several design options for a horizontally centered menu. Any of them can be used in your projects.
HTML markup
All the menus shown in this lesson use a simple structure. This is an ordinary unordered list of links placed in an element div.
Centered Menu CSS Code
Below is the complete CSS that will center the menu. And explanations of the principle of work are given later in the lesson.
#centeredmenu (float: left; width: 100%; background: #fff; border-bottom: 4px solid # 000; overflow: hidden; position: relative;) #centeredmenu ul (clear: left; float: left; list-style : none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center;) #centeredmenu ul li (display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%;) #centeredmenu ul li a (display: block; margin: 0 0 0 1px; padding: 3px 10px; background: #ddd; color: # 000; text-decoration: none; line-height: 1.3em;) #centeredmenu ul li a: hover (background: # 369; color: #fff;) #centeredmenu ul li a.active, #centeredmenu ul li a.active: hover (color: # fff; background: # 000; font-weight: bold;)
How the centering method works
The method is based on the relative positioning of floating block elements in one another. First, let's see how the elements are resized when displaced.
Element div(block), without offset, stretches to the full width available to it.
But if we move the div element to the left, it will automatically shrink to fit its content. Compression is key to implementing this method for centering menus. It helps to move the menu to the correct position.
Standard left aligned menu
Let's take a standard left aligned menu and redesign it step by step. For clarity, the items are colored in different colors, so it is immediately clear what is invested where.
Pay attention to the following points:
- Element centeredmenu div(blue rectangle) is offset to the left, but is 100% wide, so it stays stretched to fill the entire page.
- Element ul(pink rectangle) is inside the element centeredmenu div and shifts to the left. This means that it will be shrunk to the width of its content, that is, to the total width of all bookmarks.
- All li elements (green rectangles) are inside the element ul and move to the left. Thus, they shrink to the size of the links in them and line up in one horizontal line.
- Inside each link (orange rectangles) the text of the bookmark is displayed: Bookmark 1, Bookmark 2, and so on.
Shifting the position of the unordered list
Then we offset the element ul to the right by 50% using position: relative; ... When an element is offset by a percentage under these conditions, it is important to remember that the total width of the elements it contains is not its width. In our case, the offset occurs by half of the browser window (or available space for displaying). As a result, our menu starts in the middle of the window and partially extends outside of it. And move on to the next step.
Shifting the position of all menu items
It remains only to move all the elements li left by 50%. This is 50% of the width of our ul element (the container that contains the menu). Thus, the tabs are shifted exactly to the center of the window.
A few important notes
There are several important points to keep in mind when using this centering method:
- Since the element ul partially extends outside the window, this leads to the display of scroll bars. Therefore, you need to use the overflow: hidden rule; for element centeredmenu div... Thus, the protruding part of the element div will be cut off.
- Since the element ul is not aligned to bookmarks, you cannot use any visual styles for it. Leave the ul element with no background color and no border so it is completely invisible. And the styles for bookmarks should only be used for elements. li.
- If you need to set special styles for the first and last bookmarks, you need to add a class for the first and last elements. li so you can style them individually.
Conclusion
The proposed solution is compatible with all browsers, does not use JavaScript, and supports resizable text.
1. Vertical bright jQuery menu
2. Cool effect. Dancing menu.
4. Dropdown list using jQuery
Great styling of the UI element as a dropdown.
When you hover the mouse over the button, the panel slides out from above.
6. jQuery plugin "MobilyBlocks" for displaying the radial menu
7. Menu using sprites
Animated javascript menu with glow effect.
Fresh and pretty jQuery menu.
9. jQuery GarageDoor menu
10.jQuery vertically scrolling menu
Implementation of a menu with a large number of items. Scrolls when you move the mouse cursor up or down.
11.jQuery dropdown styling
12. Page navigation plugin
Smooth scrolling to the desired section on the page. Plugin "jQuery One Page Navigation".
13. Plugin "Animated Content Menu"
New jQuery plugin. Excellent implementation of animated site navigation. When you navigate through the menu items, a block with a description and possible links pops up, and depending on the selected item, the background of the page changes, which stretches to full screen regardless of the size of the browser window. Be sure to take a look at the demo page.
14. jQuery Sweet Menu plugin
Animated menu with moving items.
15. Fixed jQuery menu
As you scroll down the page, the menu remains fixed at the top of the screen.
16. Slider Kit Scrolling Menus
To implement a vertical menu with a large number of items. Scrolling through items is carried out using the mouse wheel, or using the links "Previos" and "Next".
17. Stylish CSS3 Menu
18. New CSS3 Apple Style Menu
New Apple-style menu. Looks darker than before, but no less cute.
19. Original jQuery menu
Dropdown menu with background effect. Sub-menu items expand upward. When you hover over a menu item, the background image changes.
20. Animated jQuery menu
Animated menu. Menu items are presented in the form of icons and descriptions. some great effects on hovering over a menu item. There are 8 effects, to see them all - follow the links Exemple1-Exemple8 on the demo page.
21. "Scrolling menu" XML scrolling menu
Scrolling vertical and horizontal menus. A good solution when there are a lot of items on the menu.
22. Context menu on the site on jQuery
A menu pops up when you right-click on a specific area.
23. A circular two-level menu for the site
When a menu item is selected, the submenu items are displayed on the right.
24. jQuery CSS3 Menu with Blur Menu CSS3
The original jQuery CSS3 menu comes in 7 different styles. When you hover the mouse cursor over one of the menu items, the rest are blurred, as it were.
25. Several spectacular animated jQuery CSS3 menus
10 creative animated menus. Horizontal and vertical CSS3 menus with various effects and transitions.
The archive also includes the original PSD file of the menu.
27. MagicLine Menu
The background or underline of a menu item follows the mouse with a slight delay, while the background smoothly changes its color as you move from item to item. A very beautiful effect, it looks unusual. Attention: the effect does not work in opera
28. Image Bubbles
Great effect when you hover the mouse over one of the images. The effect is somewhat similar to the jQDock described above.
31. Interesting jQuery menus with different effects
Horizontal, vertical menu. Interesting effects.
32. Great jQuery Apple Style Menu
34. jQuery menu with interesting effect
36. Fresh menu with interesting jQuery effect
A very interesting effect. Perfect for portfolio sites.
Interesting thumbnail pop-up effect on hover.
40. Drop-down list with auto-scrolling
Nice transition effect between paragraphs.
42. Great jQuery menu
43. Nice big jQuery menu
44. Scrolling jQuery menus
Menu items are presented as thumbnails.
46. jQuery Navigation Radial Menu
47 CSS and jQuery menus
A navigation bar with a search box that becomes semi-transparent as you scroll down the page.
48. Horizontal jQuery menu
49. Vertical jQuery menu
Excellent upright menu. When you hover the cursor, a menu item pops up.
50. Horizontal jQuery menu
Interesting effect when hovering over a menu item.
52. jQuery dropdown menu
When you hover the mouse cursor over the menu, its items will appear. The items that appear are displayed as an arc, the radius of which you can set when configuring the plug-in. In some browsers you won't see the arc display, the menu will display directly, but it still won't ruin the overall impression of this jQuery menu implementation.
53 CSS and jQuery navigation bar
Interesting effect when you hover the mouse cursor over a menu item.
54. jQuery popup panel
Fresh animated menu in grayscale.
58. Column site navigation with jQuery
An interesting solution for navigation, which is presented in the form of vertical bars. When you hover the mouse cursor over these strips, an image for the item and a list of submenus appear. When you click on a submenu item, a description page appears. This implementation is perfect for promotional sites or presentations. Be sure to check out the plugin demo.
59 jQuery site navigation
The site navigation is presented in the form of 4 pictures, when you hover over which you will notice an interesting animated effect.
60. The navigation bar scrolls with the content
Navigation bar. Clicking on the arrow scrolls the page. Navigation scrolls along with the page content.
61. jQuery panel with various social services
62. Neat animated jQuery menu
63. jQuery Watercolor Brushes Menu
Most of the classic sites on the Internet use a horizontal menu as their main navigation element. Sometimes it can contain various additional features - multilevel structures, icons for sub-items, a search block, complex lists, etc. Recently, the blog has already had a small collection, and today we will look at 4 practical examples of how to make a drop-down menu in CSS + HTML. The information is useful for novice developers and those who want to change the navigation on their site.
The first CSS3 Dropdown Menu tutorial is the newest in this collection (for April 2016). Pros of the solution: this horizontal drop-down menu for the site contains icons in sub-items, the implementation and the CSS code itself are quite simple to understand and implement.
Step1 - HTML markup
The first step is to create an unordered list in HTML with anchor links (#) for its elements. There, in one of the items, add another nested list, which will be responsible for the submenu.
Step2 - display the menu
Remove unnecessary CSS padding for horizontal dropdown menu elements of the site. At the same stage, we will set a fixed width and height of the menu items, as well as add rounded corners.
| .menu, .menu ul, .menu li, .menu a (margin: 0; padding: 0; border: none; outline: none;) .menu (height: 40px; width: 505px; background: # 4c4e5a; background: -webkit-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -moz-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -o-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -ms-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (position: relative; list-style: none; float: left; display: block; height: 40px;) |
Menu, .menu ul, .menu li, .menu a (margin: 0; padding: 0; border: none; outline: none;) .menu (height: 40px; width: 505px; background: # 4c4e5a; background: - webkit-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -moz-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -o-linear-gradient ( top, # 4c4e5a 0%, # 2c2d33 100%); background: -ms-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (position: relative; list-style: none; float: left; display: block ; height: 40px;)
Step3 - link design
In addition to the basic style features (font, color, height), we use and create a smooth transition of the text color on hover. We also add separators to the menu, removing the border from the first element to the left and from the last to the right.
| .menu li a (display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid # 393942; border-right: 1px solid # 4f5058; font -family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: # f3f3f3; text-shadow: 1px 1px 1px rgba (0, 0, 0, .6); -webkit- transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in -out; transition: color .2s ease-in-out;) .menu li: first-child a (border-left: none;) .menu li: last-child a (border-right: none;) .menu li : hover> a (color: # 8fde62;) |
Menu li a (display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid # 393942; border-right: 1px solid # 4f5058; font- family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: # f3f3f3; text-shadow: 1px 1px 1px rgba (0,0,0, .6); -webkit-transition : color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in- out; transition: color .2s ease-in-out;) .menu li: first-child a (border-left: none;) .menu li: last-child a (border-right: none;) .menu li: hover> a (color: # 8fde62;)
Step4 - submenu
Since we have a drop-down menu of the site on CSS, we should also set the appearance of the nested list. First, set the padding to 40px from the top and 0px to the left + add rounded corners. To show / hide the submenu, we initially set the opacity property to zero, and on hover, to one. To create the effect of the appearance of a submenu, set the height of the list to zero, and with hover = 36px.
| .menu ul (position: absolute; top: 40px; left: 0; opacity: 0; background: # 1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border -radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s;) .menu li: hover> ul (opacity: 1;) .menu ul li (height: 0; overflow: hidden; padding: 0; -webkit-transition : height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s;) .menu li: hover> ul li (height: 36px; overflow: visible; padding: 0;) |
Menu ul (position: absolute; top: 40px; left: 0; opacity: 0; background: # 1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity. 25s ease .1s; transition: opacity .25s ease .1s;) .menu li: hover> ul (opacity: 1;) .menu ul li (height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease. 1s;) .menu li: hover> ul li (height: 36px; overflow: visible; padding: 0;)
We set the width of the links = 100px, at the bottom of all elements except the last one, a border-bottom border is added. Also, if you wish, you can place pictures for submenu items (attention! Do not forget to change the paths to the images in the code to the ones you use).
| .menu ul li a (width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid # 353539;) .menu ul li: last-child a (border: none;) .menu a.documents (background: url (../img/docs.png) no-repeat 6px center;) .menu a.messages (background: url (../img/bubble.png) no-repeat 6px center ;) .menu a.signout (background: url (../img/arrow.png) no-repeat 6px center;) |
Menu ul li a (width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid # 353539;) .menu ul li: last-child a (border: none;). menu a.documents (background: url (../ img / docs.png) no-repeat 6px center;) .menu a.messages (background: url (../ img / bubble.png) no-repeat 6px center; ) .menu a.signout (background: url (../ img / arrow.png) no-repeat 6px center;)
I personally like the ease of implementation and the use of icons. Here's the final code with codepen:
Josh Riser's version is visually similar to the previous dropdown in HTML and CSS. There is no ">" child selector in the code (useful in multilevel constructs), but the author makes good use of CSS3 effects (transition, box-shadow and text-shadow) for a prettier result. According to the link in the source, there is no description of the process of creating a horizontal drop-down menu, so I will immediately give the final code:
In this example, we will look at how to make a drop-down menu in CSS, in which, in addition to items, there will be a search block. A similar implementation can often be found in modern ones. In terms of implementation time and complexity, the solution is slightly more complicated than the previous ones. It was published in May 2013, so you may need to tweak a few things, although it worked great in our testing.
HTML code
For navigation, as always, an unordered list (with the nav class) is used. Regular menu items are list items (li) and contain links (a href) without any classes and IDs. The exception is the 3 specialized elements of this horizontal drop-down menu with the following IDs:
- settings - link picture;
- search - a block with a search and a corresponding button;
- options - contains a submenu (implemented through a list with the subnav class).
Also in the code you will see a prefixfree script for using CSS properties without prefixes. The final HTML for the dropdown menu looks like this:
|
-
- Application
- Board
- Options
CSS for the menu
1. Basic styles and menu elements
First, we specify the font Montserrat, a dark gray background, and a fixed height for the menu items. All elements are aligned float: left and positioned relative so that later you can add a submenu with position: absolute;
| @import url (http: //fonts.googleapis .com / css? family = Montserrat); * (margin: 0; padding: 0;) .nav (background: # 232323; height: 60px; display: inline-block;) .nav li (float: left; list-style-type: none; position: relative; ) |
@import url (http://fonts.googleapis.com/css?family=Montserrat); * (margin: 0; padding: 0;) .nav (background: # 232323; height: 60px; display: inline-block;) .nav li (float: left; list-style-type: none; position: relative; )
2. Link design
The basic skin + is applied to the menu items. The height is the same as in the nav class. For #settings of the link-image at the beginning of the menu, alignment is set.
| .nav li a (font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid # 2e2e2e; font-family: Montserrat , sans-serif; text-shadow: 0 0 1px rgba (255, 255, 255, 0.5);) .nav li a: hover (background-color: # 2e2e2e;) #settings a (padding: 18px; height: 24px ; font-size: 10px; line-height: 24px;) |
Nav li a (font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid # 2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba (255, 255, 255, 0.5);) .nav li a: hover (background-color: # 2e2e2e;) #settings a (padding: 18px; height: 24px; font-size: 10px; line-height: 24px;)
3. Search block
This element has a fixed width and consists of several parts - an input field (#search_text) with a green background and a search button (#search_button). In some browsers, the background color may be gray.
| #search (width: 357px; margin: 4px;) #search_text (width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: 0; color: white; outline: none; background: # 1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s;) :: -webkit-input-placeholder (/ * WebKit browsers * / color: white;): -moz-placeholder (/ * Mozilla Firefox 4 to 18 * / color: white;) :: -moz-placeholder (/ * Mozilla Firefox 19+ * / color: white;): -ms-input-placeholder (/ * Internet Explorer 10+ * / color: white;) #search_text: focus (background: rgb (64, 151, 119);) #search_button (border: 0 none; background: # 1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer;) |
#search (width: 357px; margin: 4px;) #search_text (width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: 0; color: white; outline: none; background: # 1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s;) :: - webkit-input-placeholder (/ * WebKit browsers * / color: white;): -moz-placeholder (/ * Mozilla Firefox 4 to 18 * / color: white;) :: - moz-placeholder (/ * Mozilla Firefox 19+ * / color: white;): -ms-input-placeholder (/ * Internet Explorer 10+ * / color: white;) #search_text: focus (background: rgb (64, 151, 119);) #search_button (border: 0 none; background: # 1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer;)
4. Drop-down submenu
The final touch will allow us how to make a dropdown menu in CSS that fires for the last #options item.
| #options a (border-left: 0 none;) #options> a (background-image: url (triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav (visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: # 232323;) .subnav li (float : none;) .subnav li a (border-bottom: 1px solid # 2e2e2e;) #options: hover .subnav (visibility: visible; top: 100%; opacity: 1;) |
#options a (border-left: 0 none;) #options> a (background-image: url (triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav (visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: # 232323;) .subnav li (float : none;) .subnav li a (border-bottom: 1px solid # 2e2e2e;) #options: hover .subnav (visibility: visible; top: 100%; opacity: 1;)
In the styles you will find an insert of a triangle background image (triangle.png) to indicate a submenu - do not forget to specify the correct path for this and other pictures in the example. The appearance of a submenu is implemented using the opacity property. Final solution on codepen:
This version mainly uses CSS2.1 techniques, plus or minus new solution - for March 2015. If you are missing one sublevel in the horizontal drop-down menu for the site, then this example contains three at once. With the help of the: only-child pseudo-class, a "+" symbol is added to the items to indicate the presence of submenus.
In general, a good and uncomplicated example. We will not describe the implementation process in detail, since it is similar to the previous ones - first you create an HTML wireframe, and then gradually add styles for it. Download the final code from the link to the source, you can partially look at it in the Codepen:
Total
Above, we looked at 4 options for making a drop-down menu in CSS + HTML for, although there are many more similar examples on the net. There are solutions with jQuery, but this is most likely useful only for the implementation of some special effects and non-standard tasks. In most cases, a bunch of CSS + HTML will be enough, especially since now the main requirements for the menu are convenience and fast loading speed.
Finally, two comments on the codes above. Some examples use images for the dropdown menu in CSS, so you'll have to look carefully at the paths to the images and provide the correct values for your site. Secondly, some of the solutions are 2 or 3 years old, so you should additionally check their performance in different browsers.
If you know any other interesting modern implementations of horizontal drop-down menus for the site, send links in the comments.
