Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Responsive Iconic Menu

Author: Dynamic Drive

This sleek horizontal menu bar stays tucked away until the user clicks on an icon, revealing the menu. Using CSS3, various parts of the menu are animated, from the menu unveil to the icon flip when clicked on. Pizzazz aside, at its core this is a menu that's highly responsive to various devices and screen sizes. The menu intelligently switches between the standard menu bar, a slightly truncated menu, to a drop down menu based on the user's available screen real estate. It's a beautiful thing when style and function come together!

Demo: (Click on icon below to reveal menu)

To better see the responsive nature of the menu in action, click here and try resizing your browser window.

The CSS:

The HTML:

Near the end of the style sheet is where you'll find the CSS media query portion of the code that dictate the responsive settings of the menu:

@media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */
.iconicmenu input[type="checkbox"]:checked ~ label {
display: none;
}
.iconicmenu input[type="checkbox"]:checked ~ ul {
margin-left: 0;
}
}

@media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */
.iconicmenu {
overflow: visible;
}
.iconicmenu ul {
height: auto;
}
.iconicmenu ul li {
min-width: 200px;;
display: block;
}
.iconicmenu ul li a {
float: none;;
text-align: left;
}
}

By default two break points are defined- one when the user's viewable screen size is 580px or less, and the other, 560px. Depending on your menu's width and at what screen width the menu starts to get truncated, you'll want to edit the above two values accordingly.

Code Info

Rate this code:

Date Posted: 04/02/2014

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.