How To Create a Pure CSS Dropdown Menu

Transcription

1 1 of 6 10/26/2015 9:21 AM Menu How To Create a Pure CSS Dropdown With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. ( The menu we ll be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action. View the pure CSS dropdown menu demo (

2 2 of 6 10/26/2015 9:21 AM The HTML Structure <nav> </nav> <li><a href="#">home</a> <li><a href="#">tutorials</a> <li><a href="#">articles</a> <li><a href="#">inspiration</a> First up we ll need to create the HTML structure for our CSS menu. We ll use HTML5 to house the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list. <nav> </nav> <li><a href="#">home</a> <li><a href="#">tutorials</a> <li><a href="#">photoshop</a> <li><a href="#">illustrator</a> <li><a href="#">web Design</a> <li><a href="#">articles</a> <li><a href="#">web Design</a> <li><a href="#">user Experience</a> <li><a href="#">inspiration</a> The first sets of sub-menus can then be added under the Tutorials and Articles links, each one being a complete unordered list inserted within the <li> of its parent menu option. <nav> </nav> <li><a href="#">home</a> <li><a href="#">tutorials</a> <li><a href="#">photoshop</a> <li><a href="#">illustrator</a> <li><a href="#">web Design</a> <li><a href="#">html</a> <li><a href="#">css</a> <li><a href="#">articles</a> <li><a href="#">web Design</a> <li><a href="#">user Experience</a> <li><a href="#">inspiration</a> The secondary sub-menu is nested under the Web Design option of the first sub-menu. These links are placed into another unordered list and inserted into the Web Design <li>.

3 3 of 6 10/26/2015 9:21 AM So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents. The CSS Styling nav ul ul { display: none; nav ul li:hover > ul { display: block; Let s begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any UL s within a UL with the display:none; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once. nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; nav ul:after { content: ""; clear: both; display: block;

4 4 of 6 10/26/2015 9:21 AM We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing. nav ul li { float: left; nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f %); background: -moz-linear-gradient(top, #4f5964 0%, #5f %); background: -webkit-linear-gradient(top, #4f5964 0%,#5f %); nav ul li:hover a { color: #fff; nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text. nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a;

5 5 of 6 10/26/2015 9:21 AM position: relative; nav ul ul li a { padding: 15px 40px; color: #fff; nav ul ul li a:hover { background: #4b545f; The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom). The LI s of each UL in the sub menu don t need floating side by side, instead they re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue. nav ul ul ul { position: absolute; left: 100%; top:0; The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>. The Completed Pure CSS Dropdown Menu (

6 6 of 6 10/26/2015 9:21 AM menu/demo/index.html) View the pure CSS dropdown menu demo ( Website design and hosting Starting at $ Join the mailing list to have new content delivered straight to your inbox. Every subscriber gets a free pack of realistic web shadows (/subscribe). Written by Iggy Iggy (/about) is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Iggy's design tutorials and articles at his Web Design Blog ( or follow his daily findings on Twitter (