We continue the series with a lesson on drop-down menus. Next up is a do-it-yourself horizontal drop-down menu using css.
If you got here by accident or you were looking for another implementation of the drop-down menu, I advise you to go to the parent section.
This section will describe a horizontal dropdown menu in CSS and HTML.
in the code. Dropdown horizontal menu html First of all, before we start writing code, we need to do html template for the menu.
Due to the fact that we are making a universal menu, I want to make it as similar as possible to the WordPress menu output. In my opinion, this is one of the simplest and most versatile Html menu codes. It looks like this:
- Home
- About Us
- Our services
- Our service No. 1
- Our service No. 2
- Our service No. 3
- Our service No. 4
- Service 5
- News
- Contacts
As you can see from the code, our drop-down menu will be implemented on the ul and li lists. This is what the menu looks like without CSS styles:
Let's face it, it looks ugly, like a regular list. Next we need to decorate this menu using CSS styles.
Horizontal dropdown menu in CSS CSS styles for drop-down menus and more are as necessary as air. After all, the drop-down tab is made based on the pseudo-class:hover.
For a horizontal drop-down menu we need these styles:
#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- family:Arial, sans-serif; line-height:1.3em; font-weight:uppercase; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )
This is not the end yet, just part of the CSS for the main horizontal menu. Next we will write styles for the menu dropdown list:
#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*this line implements drop-out mechanism*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li li a:hover( background:#FDDC96;color:#6572BC)
That's it now. The drop-out mechanism itself is implemented in one line.
See the skin with this menu:
Rice. 2 (horizontal dropdown menu)
Below is a demo of the operation of the drop-down menu, as well as a link to download the sources. (The demo will be opened with a drop-down on top of this page, no need to click open in a new window 🙂 or the mouse wheel)
Full width horizontal dropdown menu Most of you can reproach me, saying that such menus as I showed above are a hello from the past and in part you are right, although I have seen recent layouts with such menus.
I hope you downloaded the example above. Our Html remains the same, but we will change the CSS completely. You can simply take the CSS code from here and paste it into the downloaded example, or watch in demo mode how it works.
#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; vertical-align:left) #menu1 ul li a( display:block; padding:9px 35px; font-size :14px; font-family:sans-serif; line-height:1.3em; font-weight:uppercase; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left :0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*the last item will be attached to the right edge*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this line implements the mechanism dropouts*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% ; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li li a:hover( background: #FDDC96;color:#6572BC;
This example also differs from the first one in that the drop-down menu, the drop-down itself, stretches depending on the width of all menu items.
For very long menu items, this option may not be very convenient, since they will go beyond the limits. To disable this property, just find the property "white-space:nowrap;" at the selector #menu1 ul li ul, and delete it.
Below you can watch a demo or download the sources of the horizontal drop-down menu:
Without separators, this menu looks so-so. Separators can be added to HTML manually, but if you have a CMS, such as WordPress, then adding them manually is not very convenient.
Horizontal dropdown menu with dividers There are several dozen options for adding a stripe (separator) between menu items using pure CSS. I will not duplicate the options that use::before or::after , or much simpler border-left, border-right.
There are situations when the layout is built so wonderfully that you can’t do without jquery.
Our HTML code remains the same, we just include the jQuery library and the file that uses it at the very beginning:
Immediately after.
As you understand, you need to create a file script-menu-3.js and add this little code there:
$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
The CSS styles for such a menu should be left as they are, + add this piece to the end:
#menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; )
A horizontal drop-down menu with delimiters in jQuery will look like this:
You can view in demo mode or download the horizontal menu template below:
The advantages of this solution are:
- the menu will be drawn dynamically;
- the indents from the separator to the paragraph are the same everywhere;
- more beautiful and flexible design.
Horizontal multi-level dropdown CSS menu+HTML Since we are talking about multi-level drop-down menus on hover, it’s probably worth dividing them into subgroups:
with a vip pad when pointing to the side
with a pop-up drop-down of the third level
In my examples I will show multi-level menu CSS for 3 levels, then I think it won’t be difficult to guess what needs to be done.
Multi-level drop-down menu with a sidebar on hover First, we need to slightly correct our HTML. A couple of lines will be added there for level 3:
- Home
- About Us
- Our services
- Our service No. 1
- Addition to service 1
- Addition to service 2
- Our service No. 2
- Addition to service 3
- Addition to service 4
- Our service No. 3
- Our service No. 4
- Service 5
- News
- Contacts
- Directions map
- Map add-on
- Addition for map 2
- Feedback form
#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; height:auto; text-align:left; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3 em; text-decoration:none; text-transform:uppercase; box-sizing:border-box; ) #menu1 ul li > a:hover ( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*the last item will be attached to the right edge*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*this line implements the drop-out mechanism*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)
We copy the files for jQuery as they were from the previous example. I decided to leave the dividers so that the menu would look at least a little better. Of course you can do it without them.
This is how it happened:
I made 2 skins in one to show how the drop looks on the right and in the middle.
Below you can watch a demo and download an example:
Multi-level drop-down menu with pop-up pad on hover There's a little bit of oil in the title, but it'll work, the main thing is the code.
The essence of this example is to create a full-width horizontal drop-down menu with a full-width drop-down + multi-level.
I will not change the HTML code; it can be taken from the previous example. We also leave separators in jQuery.
Only the CSS will change completely:
#container( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; vertical-align:left) #menu1 > ul > li(position:static;) #menu1 ul li.razd :28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-family:Arial, sans- serif; line-height:1.3em; font-weight:bold; height:36px; a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" " ) #menu1 ul li:hover > ul(display:block;)/*this line implements the drop-out mechanism*/ #menu1 ul li li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(display: block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )
This is how the menu will look: The only point is that the site must have enough space, since the last item on the right does not have room for a drop-down. This problem can be solved through:nth-child, but I didn’t bother.
See demo of horizontal multi-level dropdown menu:
As you may have noticed: the bottom die is also full width. This is how drops in several blocks are made.
That's all for me, I hope at least one of my examples suits you. Thank you for your attention.
it will benefit both them and me :) If you read the entire post, but did not find how to make your own horizontal drop-down menu in css, ask a question in the comments or use the site search.
Also, I advise you to visit the parent page https://site/vypadayushhee-menu/, all examples and types of drop-down menus are collected there.
Hello, dear blog readers. Today we will learn how to make a cool, colorful and drop-down menu with pure CSS3. A huge plus this menu The thing is that no scripts are used here, only CSS.
We will also make it in several colors that the user can choose himself. I’ll honestly tell you that it looks very cool and practical.
Well, now let's make it ours.
Drop-down and color menu for a website using pure CSS3 ι HTML First, let's make the HTML code itself and see how it will look. As usual, there is nothing complicated here. Here we will display the list of colors that are located above the menu and that the user can choose. We will also display the code itself. This is what all this code will look like:
- Home
- Menu 1
- Submenu 1
- Submenu 2
- Submenu 3
- Submenu 4
- Submenu 5
- Menu 2
- Submenu 2-1
- Submenu 2-2
- Submenu 2-3
- Submenu 2-4
- Submenu 2-5
- Submenu 2-6
- Submenu 2-7
- Submenu 2-8
- Menu 3
- Submenu 3-1
- Submenu 3-2
- Submenu 3-3
- Submenu 3-4
- Submenu 3-5
- Menu 4
- Menu 5
- Menu 6
CSS Now, let's directly set the CSS style for the menu and for the color. Here is the CSS code itself:
#nav,#nav ul ( list-style: none outside none; margin: 0; padding: 0; ) #nav ( background-color: #000000; border-radius: 5px 5px 5px 5px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); display: table padding: 10px; position: relative; border -width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); overflow: hidden: 20px 0 10px; moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); -origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; linear; ) #nav li ( float: left; position: relative; ) #nav li a ( color: #FFFFFF; display: block; font-size: 16px; padding: 7px 20px; text-decoration: none; ) #nav li:hover > a ( background-color: red; border-radius : 5px 5px 5px 5px; color: #FFFFFF; ) #nav li:hover > a.hsubs ( border-radius: 5px 5px 0 0; ) #nav li:hover ul.subs ( left: 0; top: 34px; width : 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); : 100%; ) #nav ul li:hover > a ( background-color: #222222 !important; border-radius: 5px 5px 5px 5px; ) /* colors */ .colorScheme ( height: 32px; list-style: none outside none; margin: 0 auto 25px; width: 320px; .colorScheme a ( cursor: pointer; float: left; height: 30px; margin: 0 5px; width: 30px; ) .colorScheme .red ( background-color: red ; ) .colorScheme .orange ( background-color: orange; ) .colorScheme .pink ( background-color: pink; ) .colorScheme .green ( background-color: green; ) .colorScheme .blue ( background-color: blue; ) .colorScheme .indigo ( background-color: indigo; ) .colorScheme .violet ( background-color: violet; ) .colorScheme .grey ( background-color: gray; ) #red:target ~ #nav ul ( background-color: red; border: 1px solid red; ) #orange:target ~ #nav ul ( background-color: orange; border: 1px solid orange; ) #pink:target ~ #nav ul ( background-color: pink; border: 1px solid pink; ) #green:target ~ #nav ul ( background-color: green; border: 1px solid green; ) #blue:target ~ #nav ul ( background-color: blue; border: 1px solid blue; ) #indigo: target ~ #nav ul ( background-color: indigo; border: 1px solid indigo; ) #violet:target ~ #nav ul ( background-color: violet; border: 1px solid violet; ) #grey:target ~ #nav ul ( background-color: gray; border: 1px solid gray; ) #red:target ~ #nav li:hover > a ( background-color: red; ) #orange:target ~ #nav li:hover > a ( background-color: orange; ) #pink:target ~ #nav li:hover > a ( background-color: pink; ) #green:target ~ #nav li:hover > a ( background-color: green; ) #blue:target ~ #nav li:hover > a ( background-color: blue; ) #indigo:target ~ #nav li:hover > a ( background-color: indigo; ) #violet:target ~ #nav li: hover > a ( background-color: violet; ) #grey:target ~ #nav li:hover > a ( background-color: grey; )
Task
Create a dropdown menu using CSS and HTML tools.
Solution
First, let's create a list, place it horizontally and style it appearance. This will be the main menu, and then we will make a drop-down menu for its items.
Drop-down menu ul.menu( padding: 3px; /* remove padding */ margin-top: 50px; /* for beauty, move it down */ text-align: center; /* align spask elements to the center */ ) ul.menu > li( list-style: none; /* remove list markers */ display: inline-block; /* arrange lists horizontally */ background-color: #D87171; padding: 5px 15px; ) /* set the style of links in the menu */ ul.menu > li > a( color: #FFFFFF; text-decoration: none; ) /* set the style of links when hovering */ ul.menu > li > a:hover( text-decoration: underline; )
We ended up with a list like this:
Figure 1. Preparatory work.
Please note: the style of the link changes when you hover over it. This is implemented using the :hover pseudo-class. This pseudo-class specifies the style of an element when the cursor is hovered 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 a tag
Let's create this list and add styles that describe its appearance.
Drop-down menu ul.menu( padding: 3px; /* remove padding */ margin-top: 50px; /* for beauty, move it down */ text-align: center; /* align spask elements to the center */ ) ul.menu > li( list-style: none; /* remove list markers */ display: inline-block; /* arrange lists horizontally */ background-color: #D87171; padding: 5px 15px; ) /* set the style of links in the menu */ ul.menu > li > a( color: #FFFFFF; text-decoration: none; ) /* set the style of links when hovering */ ul.menu > li > a:hover( text-decoration: underline; ) /* set style for the internal menu */ .menuInner( list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; )
Now we have this 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 mouseover. You can hide an element using the rule rule (display : none ). And when you hover the cursor, you need to activate it by making the rules visible again (display: inline-block).
Dropdown menu ul.menu( padding: 3px; margin-top: 50px; text-align: center; ) ul.menu > li( list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px; ) /* set the style of links in the menu */ ul.menu > li > a( color: #FFFFFF; text-decoration: none; ) /* set the style of links on hover */ ul.menu > li > a :hover( text-decoration: underline; ) /* set the style for the internal menu */ .menuInner( display: none; /* make it invisible */ list-style: none; padding: 4px; border: 1px solid #000000; border -radius: 5px; background-color: #FFFFFF; text-align: left; ) /* make it visible when hovering over the li block */ .menu > li:hover > .menuInner( display: block; )
Now our menu fades in and out, but we need it to appear on top of existing elements without changing the already set 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 .
Dropdown menu ul.menu( padding: 3px; margin-top: 50px; text-align: center; ) ul.menu > li( position: relative; /* add positioning */ list-style: none; display: inline-block ; background-color: #D87171; padding: 5px 15px; /* add height */ ) /* set the style of links in the menu */ ul.menu > li > a( color: #FFFFFF; text-decoration: none; ) /* set the style of links when hovering the cursor */ ul.menu > li > a:hover( text-decoration: underline; ) /* set the style for the internal menu */ .menuInner( display: none; /* make it invisible */ list-style: none; border: 1px solid #000000; background-color: #FFFFFF; text-align: left) .menu > li:hover > .menuInner( : block; position: absolute; top: 30px;
What we did here:
positioning rule (position : relative ;). This is done so that the report of the absolute positioning coordinates of the nested list starts from the upper left corner of this block, and not the corner of the screen.
Added to parent element rule (height : 20px ;). We set its height to make it more convenient to position the drop-down list.
Set the absolute positioning (position : absolute ;) to the dropdown list and set the coordinates: top and left .
The dropdown menu now works correctly.
Figure 3. Final version. Of course, here you can make the drop-down menu look more beautiful, but for the purposes of our task, this is enough.
The educational problem is solved. Bye.
Habr, hello!
A lot appears on Codepen good decisions from different specialists, and I believe that the best of them should be collected in one place. Therefore, 2 years ago I started saving interesting scripts on various topics on my computer.
I used to post them in the mr cloud IDE product group. 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 more specialists. That's why I'm posting them on Habr. I hope they will be useful to you.
In this review we will look at multi-level menus.
Flat Horizontal Navigation
Beautiful navigation bar with smoothly appearing submenus. The code is well structured and uses js. Judging by the features used, it works in ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Adaptive link bar with two-column submenu. Everything is done in css and html. Used css3 selectors that are not supported in ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Stylish vertical menu with smoothly opening elements. Transition, transform js code is used.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Dark vertical navigation bar with icons from ionicons. JavaScript is used. 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. It will definitely look terrible in ie8, but in other browsers everything is cool.
Vertical link: http://codepen.io/rizky_k_r/full/sqcAn/
Link to horizontal: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
Horizontal menu with large elements 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 but stylish horizontal menu. Uses font-awesome. Everything works with css and html, without js. It will work in ie8.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
An excellent solution for online stores. Displays several levels of categories and large images (for example, a product on sale). It is based on boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Stylish navigation bar with smooth submenu. In older browsers it will display 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 mobile version It's a little lame. CSS, html and js are used.
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
Colorful drop-down menu with one nesting level. Icons from font-awesome, html and css are used.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
A fairly 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 a nested list of elements appearing. I'm glad that this solution is also without javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Primitive, but effective solution. Only css and html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu - Menu Interaction Concept
Interesting menu concept for mobile phone. I've never seen anything like this before. Uses 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 it uses too many classes. I'm glad there's 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 website well. The code is simple and clear. Javascript is not used.
http://codepen.io/ibeeback/pen/qdEZjR
Beautiful solution with a lot of code (html, css and js). 3 submenu formats have been created. 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 be useful in everyday life.
http://codepen.io/cmcg/pen/ofFiz
P.S.
I hope you liked the collection of 23 solutions. If you want to continue reading them, take the survey below.
Enjoy your work everyone.
For a website, its loading time and ease of use are among the most important aspects. Therefore, you shouldn't clutter your site with extra JavaScript and large images. But what if you want a beautiful CSS dropdown menu? You don't need to use JavaScript for this; today, a drop-down menu can be made using only CSS. In this tutorial, you will learn how to create a CSS dropdown menu.
Before we start this guide, you will need the following:
- Access to your hosting control panel
Step 1 - Create an HTML File First, you need to create an empty HTML file. In this tutorial we will create new file called menu.html. For this we will use File manager. However, the same result can be achieved using (create a menu.html file on your computer and upload it to your hosting).
Step 2 - Adding HTML Menu Code Our menu will be made from one parent element called Main Menu and five subsections. By changing the address inside the href attribute, you can associate each subsection with different pages on your site. You may have noticed that each element has a different class - dropdown , mainmenubtn and dropdown-child . Classes are required to apply CSS rules.
Main menu Subsection 1 Subsection 2 Subsection 3 Subsection 4 Subsection 5
Here's what it looks like without any CSS rules applied:
As you can see, a regular HTML menu is not optimized and does not look very nice. However, we will apply the CSS rules and change this in the next step.
Step 3 - How to Create a CSS Dropdown Menu We style our HTML code using the following CSS rules:
Mainmenubtn ( background-color: red; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; ) .mainmenubtn:hover ( background-color: red; ) .dropdown ( position: relative; display: inline-block; ) .dropdown-child ( display: none; background-color: black; min-width: 200px; ) .dropdown-child a ( color: white; padding: 20px; text-decoration: none; display : block; .dropdown:hover .dropdown-child ( display: block; )
As you can see, the .dropdown-child class has a CSS rule of display: none . However, as soon as the user hovers (.dropdown:hover) over the parent element, this rule will change its display to display: block . This will create the effect of a drop-down menu.
Below is the final output of our menu.html file:
.mainmenubtn ( background-color: red; color: white; border: none; cursor: pointer; padding: 20px; margin-top: 20px; ) .dropdown ( position: relative; display: inline-block; ) .dropdown-child ( display: none; background-color: black; min-width: 200px; ) .dropdown-child a ( color: white; padding: 20px; text-decoration: none; display: block; ) .dropdown:hover .dropdown-child ( display: block; ) Main menu Subsection 1 Subsection 2 Subsection 3 Subsection 4 Subsection 5
In this example we are using internal style sheets, which means the CSS styles are in the actual HTML file. However, there are many ways to do this.
Once you're done, the final result should look like this:
Don't be afraid to experiment c CSS style, changing colors and size. Adapt the menu to suit your needs.
Conclusion By finishing this tutorial, you have learned how to create a CSS dropdown menu. The code provided in this guide is quite simple and will not affect the loading time of your site.
Facebook
VKontakte
Google+
Instructions
