Ribbon Style Navigation Menu With No Images

Want a different type menu for your next project? A 3d ribbon style navigation menu adds some pop to a plain jane site. This site currently utilizes this type of menu, but using images and multiple containers. This technique uses some CSS3 for shading, a CSS trick called CSS triangles, and some pseudo selectors. Dropdown menus are beyond this tutorial but also compliment the menu very well. First the basic menu is structured with div container and an unordered list containing children list items.

<div id="nav"><ul id="menu">
<li class="child">Menu Item</li>
<li class="child">Menu Item 2</li>
<li class="child">Menu Item 3</li>
</ul></div>

Now for the basic styles to make the menu a horizontal menu. This creates a 35px high block that is offset to the left and right of the main block. The shadow is also created with the vendor specific and W3C box-shadow. This helps create the illusion of the menu being above the page below it.

#nav{
	margin-left: -10px;
}
#menu{
	height:35px;
	line-height:30px;
	list-style-image:none;
	list-style-type:none;
	margin:auto;
	padding:0 0 0 10px;
	position:relative;
	width:100%;
	background-color: #eee;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
	border-top: 1px solid #bbb;
}
#menu li{
	background-color:#E3E3E3;
	float:left;
	position:relative;
	padding: 0 4px;
	height: 35px;
	font-size: 16px;
	border-right: 1px solid #bbb;
}

Now comes the css trick using borders to create the angular pieces the finish the illusion of the menu popping out of the page layout. Notice how the one border is less than the others, this is to make the triangle shorter, this is just personal preference and can be adjusted to fit different designs.

#menu:before{
        border-right: 10px solid #ccc;
        border-left: 10px solid rgba(255, 255, 255, 0);
        border-top: 6px solid rgba(255, 255, 255, 0);
        content: " ";
        display: block;
        height: 0;
        position: absolute;
        left: -10px;
        top: -7px;
        width: 0;
}
#menu:after{
        border-left: 10px solid #ccc;
        border-right: 10px solid rgba(255, 255, 255, 0);
        border-top: 6px solid rgba(255, 255, 255, 0);
        content: " ";
        display: block;
        height: 0;
        position: absolute;
        right: -10px;
        top: -7px;
        width: 0;
}

Demo

About Jeremy Clark

Small town IT worker with interests in all things technological and technical. Biggest interests are in web development especially the WordPress publishing platform and the community supporting it. Currently developing and maintain the free WordPress theme Techozoic. I'm also always available for hire.
This entry was posted in guides, tech, tips and tagged , . Bookmark the permalink.

Leave a reply

Comments will be sent to the moderation queue.