blenderNetwork patreon blender-logos d heart user th book photo pencil map-marker chevron-right comment comments twitter facebook rss chain navicon google-plus envelope linkedin calendar-o tumblr reddit stumbleupon share-alt blogger flattr flag

Slideout Menus: The HTML and CSS

Blender 3d article

Many websites make popout menus in their navigation. You know, the ones where you hover over one of the navigation links and you see more options appear. In many cases it just pops up, more rarely you will see the menu slide out or fade in or some animation that makes the appearance of those extra destinations smoother than before. This is what I am writing about in this post. I am going to show you how you can make popout menus with CSS, then show you how add effects to it with jQuery. This first part will go over the HTML and CSS.

The HTML

The first thing we need to do is set up the HTML. At this point, I assume you already know how to create the basic outline of an HTML page so I am only going to show you the code for the menu itself. Here is what I have whipped up:

<div id=\"navigation\">
<div class=\"menu_item\">Menu Title
<div class=\"submenu\">
<a href=\"#\">Link</a>
<a href=\"#\">Link</a>
<a href=\"#\">Link</a>
<a href=\"#\">Link</a>
</div>
</div>
</div>

First off, I have a container for our navigation. This would hold our entire navigation bar, which contains all of the main navigation links. These main navigation links are in a menu_item class. I only have one in this example, but if I were to really use this, I would probably have more. Within the menu_item class, we have the submenu class. This is what is going to appear when we hover over the menu_item class. Lastly we have all of our links that we want to use under our main menu item.

The CSS

Before I move on, I would like to mention that this is certainly not the only way that you can do this. Most of the tutorials that I have run into when I was looking into menus with just CSS and HTML would use lists and list items. The reason I do not like that is because I feel like it adds unnecessary coding (mainly in the CSS) and that looking at tons and tons of <ul> and <li> tags screw with my vision. In any case, I wanted much smaller CSS code that works in modern browsers, so I quit searching and figured it out myself. Here is my CSS before I added the hover states.

#navigation{
width: 1000px;
height: 30px;
background: #101010;
color: #e0e0e0;
}
.menu_item{
width: 200px;
height: 30px;
line-height: 30px;
text-indent: 8px;
overflow: hidden;
}
.submenu{
position: absolute;
top: 30px;
}
.submenu a{
display: block;
width: 200px;
height: 30px;
background: #e0e0e0;
color: #101010;
}

The important part of this CSS is the stuff that has to do with the popout menu. Those pieces are the \"overflow: hidden;\" and, well...that\'s it. Ok, that is the key to how I do it. To really make it look right, you have to set up .submenu div so that it is outside of the .menu_item area. To do this you must have the \"position:relative;\" property for .menu_item and the \"position:absolute;\" for the .submenu. Setting \"top:30px;\" pushes the submenu down and out of view (note that the height of the menu_item is the same) when not hovering. A few of you may stop and think...wait, why do I need this position, relative, absolute stuff? Can\'t I do the same thing without it? Yes, in fact, that is what I did at first. However, since this whole popout menu relies on overflow being visible, it will present a problem when you have other stuff right below the menu. Visible overflow is automatically put behind other elements, text, etc. So, if we hovered without absolute positioning, we wouldn\'t be able to click on the links. Positioning our submenu like this also gives us good control over where it is. Pretty much all of the rest of the CSS is for looks.

Now we want to add the hover effects. For now, we will just use CSS and we will add the fancy stuff a little later. Here is the code for hovering:

.submenu a:hover{
background: #101010;
color: #e0e0e0;
}
.menu_item:hover{
overflow: visible;
background: #e0e0e0;
color: #101010;
}

Once again, the key to this is the overflow property. When we hover over .menu_item, the overflow becomes visible meaning that .submenu become visible. All the rest of the CSS there is to make it look better. Here is what the menu currently looks like:

Menu Title

You can see the second part of this tutoria here: Slideout Menus: The jQuery

Popular Now

Comments