Beautiful css3 menu. Clock on css3 and jquery
Hello again everyone!
In my articles, I have repeatedly referred to in various ways creating navigation for websites. We considered menus for every taste and color, navigation in the popular “” style, horizontal and vertical, with using javascript and pictures, a lot of attention was paid. As you understand, the ways to create a menu are limited only by the imagination of the developers, and for them it is truly limitless.
Today I would like to tell and show by example another option for executing a menu exclusively using 3 tools, without javascript and additional images. In the menu design we will use rounded corners, background gradient and simple effects when hovering the cursor. All this together works quite well and stably, of course only in modern browsers, which support 3, even new versions of mossy IE, with a creak, but still display the final result.
And so, armed with patience and cheat sheets (who needs it), let’s start from the “minced meat” of dead code to create living and dynamic menu navigation. Let's start, as always, by building in Html the simplest list of our menu.
HTML markupAs you can see, the markup looks outrageously simple, executed in the form of a rudimentary unordered list. To breathe life and make this list attractive, we will resort to the help of “magic”, or rather, we will work with the parameters of cascading style sheets. Having assigned the identifier id="main-navigation" to the list, and class="first" to the first item, and already in the css, we will freely conjure up the shape, color, and functionality of our future menu.
In the menu design we use rounded corners border-radius and function linear gradient, by the way, not long ago, and my beloved Opera, starting with version 11, finally included . Well, IE is also puffing up and keeping up with its peers, even if not without the help of a special filter.
| #main-navigation ( width: 100%; border- radius: 8px; - moz- border- radius: 8px; - khtml- border- radius: 8px; - webkit- border- radius: 8px; background: - webkit- gradient( linear, left top, left bottom, from(#444444), to(#666666)); background: - moz- linear- gradient(top, #444444, #666666); background: - ms- linear- gradient(top, #444444, #666666); background- image: - o- linear- gradient(top, rgb(68, 68, 68), rgb(102, 102, 102)); filter: progid: DXImageTransform. Microsoft. gradient(startColorstr = "#444444" , endColorstr= "#666666" ) ; border: 1px solid #444; list- style: none; padding: 0 ; margin: 0 ; float: left; ) #main-navigation li ( float: left; border- right: 1px solid #777; ) #main-navigation li a ( font: 13px Georgia, "Times New Roman", Times, serif; letter- spacing: 1px; padding: 12px 20px; border- right: 1px solid # 333; display: block; color: #fff; ) |
#main-navigation ( width: 100%; border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; background: -webkit-gradient( linear, left top, left bottom, from(#444444), to(#666666)); background: -moz-linear-gradient(top, #444444, #666666); background: -ms-linear-gradient(top, #444444, #666666); background-image: -o-linear-gradient(top,rgb(68,68,68), rgb(102,102,102)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#444444 ", endColorstr="#666666"); border: 1px solid #444; list-style: none; padding: 0; margin: 0; float: left; ) #main-navigation li ( float: left; border-right: 1px solid #777; ) #main-navigation li a ( font: 13px Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; padding: 12px 20px; border-right: 1px solid #333; display: block; color: #fff; )
Having done everything described above, you will get an excellent result on the exhaust and it will look like this:
Everything turned out just great. In the first example, when hovering over a menu item, we used a standard underline. Let's make the style a little more complex, remove the link underline and add more beautiful effect. Let’s not get too fancy, but simply change the direction of the gradient when hovering the pointer over the menu item:
| #main-navigation li a:hover ( background: - webkit- gradient(linear, left top, left bottom, from(#666666), to(#444444)); background: - moz- linear- gradient(top, #666666 , #444444); background: - ms- linear- gradient(top, #666666, #444444); filter: progid: DXImageTransform. Microsoft. gradient(startColorstr= "#666666" , endColorstr= "#444444" ) ; text- decoration: none; ) |
#main-navigation li a:hover ( background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444)); background: -moz-linear-gradient(top, #666666 , #444444); background: -ms-linear-gradient(top, #666666, #444444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444"); text- decoration: none; )
Dropdown menu in CSS3 based on the UI created by Vladimir Kudinov - Impressionist UI
HTMLFirst, let's create a simple list:
CSS
Let's start by removing padding (inner and outer), borders and outlines from all our menu elements.
Then we'll add a fixed height and width, round the corners, and add a CSS3 gradient. In order to position the links horizontally, use float:left , plus set relative positioning to further align the sub-menus:
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; )
To design the menu links, let's add some basic CSS properties, such as color, padding, fonts, etc.
Then we will add a shadow for the text and a transition for smooth change link colors when hovered. To create a link separator, let's add a border to the left and right sides, and then remove the left border for the first link, and the right border for the last link.
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; )
Now let's move on to the sub-menu.
First let's install absolute positioning with a margin of 40px at the top and 0px on the left for the menu items and add roundings for the corners. Let's set the opacity to 0, and on hover to 1. For the slide effect (up/down), we need to set the list height to 0px when hidden, and 36px when hovered.
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; )
Let's set the width of the sub-menu to 100px and add a bottom border as a separator. For the last link, we will remove the bottom border.
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; )
Finally, we need to add icons to each sub-menu link. To do this, for each link we will create our own class and assign it as background your image:
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; )
2. Creative CSS3 Animated Menu
Some interesting ideas for the menu using css3 animation.
3. Menu with blur effect
Some interesting ideas for a blurred menu using css3 for flat design.
4. Circle Navigation
Beautiful css3 navigation with circle slider thumbnails.
5. Gallery with floating thumbnails
Gallery using HTML5, CSS3 and jQuery. The highlight is that after hovering the element slightly changes its position.
6. CSS3 regulator
Control knob, well suited for volume control. Made using css3 and jquery.
7. Classic breaking news animation
Interesting idea for a news site. The appearance of hot news in the classic cinema style but with new css3 technologies.
8. Service “Photo from web camera” on css3
A cool service where you can take your photo from a web camera and look at those who have already left them. Here, of course, not only css3 is used, but also php + jquery
9. css3 dropdown menu
Drop-down menu for a website with thumbnails using jquery and css3.
10. Responsive template css3
Responsive template using only css3. The template displays correctly on any screen size.
11. Loading animation
Beautiful loading animation using css3.
12. Hover-2 css3 effect
Another css3 effect when hovering over a block.
13. Loading animation 2
Loading bar for a website using css3
14. css3 loading loop
Animation endless loading for your website using css3.
15. Original presentation contact pages
Interesting and smooth effect css3 for information to appear when hovering over a thumbnail.
Hints for a site using css3.
17. Clock on css3 and jquery
Lungs Digital Watch for your website.
18. Polaroid Gallery
A gallery in the form of scattered Polaroid photos that you can move with your cursor.
20. Juicy Tabs
21. Circles on the background
An interesting idea for a website background using pure css3 and a little jquery.
22. Dropdown, flying menu CSS3
Fly-out menu, or rather information about the menu item using css3 and jquery
23. CSS3 Miniature Menu
CSS3 menu in minimalist style.
24. Site Notices
Notifications for your site in the form of a drop-down block, everything works on css3 and jquery.
25. Thumbnails with pseudo elements
An interesting idea for thumbnails on a website with photographs.
26. Menu accordion
Convenient and beautiful menu accordion for a website without jquery.
27. Original tooltip
Tips for your website on new technology using css3.0 and jquery.
28. Folded Ribbons in CSS3
Now, to create the effect of folded ribbons, you don’t need to use a graphical editor, just write a few lines of CSS.
29. Navigation using pure html and css3
The main menu on the site using just one code.
30. CSS tags
Tags in the form of tickets for the site.
31. Motion Animation with CSS3
When you point at a block, the object begins to move.
32. Teaser for the site
Easily tease with just one code.
33. CSS3 Image Rotation
Rotate an image by a specific angle using rotate.
34. Tooltip with image
Hints that work when hovering or clicking on mobile devices.
35. Radial menu
A circular menu is a rather interesting and proven idea over the years, which is still relevant today.
36. Form feedback CSS3
The feedback form is made with field validation and hints in html5 and css3.
37. Navigator
Most classic sites on the Internet use horizontal menu as the main navigation element. Sometimes it may contain various additional features - multi-level structures, icons for sub-items, a search block, complex lists, etc. Recently there was a small selection on the blog, but today we’ll look at 4 practical examples how to make a dropdown menu using CSS + HTML. The information will be useful for novice developers and those who want to change the navigation on their website.
The first CSS3 Dropdown Menu tutorial is the newest in the collection (from April 2016). Pros of the solution: in this horizontal drop-down menu for the site, the sub-items contain icons, 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, we add another nested list, which will be responsible for the submenu.
Step2 - Display the menu
We remove unnecessary indents in CSS for elements of the site's horizontal drop-down menu. At the same stage we will install fixed width and the height of the menu items, and also 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 - linking
In addition to the basic features in styles (font, color, height), we use and create smooth transition hover text colors. We also add separators to the menu, removing the border from the first element on the left and from the last on 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 site menu using CSS, we should also set a design for the nested list. First, set a margin of 40px on top and 0px on the left + add rounded corners. To show/hide the submenu, initially set the opacity property to zero, and when hovering it to one. To create the effect of a submenu appearing, set the value of the list height 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, a border-bottom border is added at the bottom of all elements except the last one. Also, if you wish, you can place pictures for the 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 is the final code from codepen:
Josh Riser's option is visually similar to the previous HTML and CSS dropdown menu. Not in the code child selector" > " (useful in multi-level designs), but the author makes good use of CSS3 effects (transition, box-shadow and text-shadow) for a more beautiful result. The link in the source does not describe the process of creating a horizontal drop-down menu, so I will immediately provide the final code:
IN in this example We will look at how to make a drop-down menu using CSS, which in addition to the items will contain a search block. A similar implementation can often be found in modern . In terms of implementation time and complexity, the solution is a little more complicated than the previous ones. It was published in May 2013, so you may need to tweak some things, although it worked fine 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 or IDs. The exception is 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 the prefixfree script for use CSS properties without prefixes. Final HTML option for the drop-down menu looks like:
|
-
- Application
- Board
- Options
Menu CSS
1. Basic styles and menu elements
First, we specify the font Montserrat, dark Gray background and fixed height for menu items. All elements have float: left alignment and relative positioning 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. Formatting links
Menu items use the basic design + . The height is the same as in the nav class. For #settings the image link at the beginning of the menu, the 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. Dropdown submenu
The final touch will allow us to make a drop-down 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 background image triangle (triangle.png) to indicate a submenu - do not forget to indicate the correct path for this and other images in the example. The appearance of a submenu is implemented using the opacity property. Final solution on codepen:
IN this option CSS2.1 techniques are mainly used, the solution plus or minus is new - for March 2015. If you are missing one sublevel in a horizontal drop-down menu for a site, then this example contains three at once. Using the pseudo-class:only-child, a “+” symbol is added to items to indicate the presence of a submenu.
Overall, a good and simple example. We will not describe the implementation process in detail, because... it is similar to the previous ones - first you create an HTML framework, and then gradually add styles for it. Download the final code using the link to the source; you can partially view it in Codepen:
Total
Above we looked at 4 options for how to make a drop-down menu using CSS + HTML for, although there are many more similar examples on the Internet. There are solutions with jQuery, but this is most likely only useful for implementing some special effects and non-standard tasks. In most cases, a combination of CSS + HTML will be enough, especially since now the main requirements for a menu are convenience and fast speed downloads.
Finally, two notes on the codes above. Some examples use images for the dropdown menu in CSS, so you will have to carefully review the image paths and specify correct values for your site. Secondly, some of the solutions are 2-3 years old, so you should once again additionally check their performance in different browsers.
If you know any other interesting modern implementations of horizontal drop-down menus for a website, send links in the comments.