Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Vertical CSS Menus: Here

Wire Frame Menu

Author: Dynamic Drive

This is a vertical CSS menu with a simple frame around the menu items. It's "minimalist" style allows you to customize its style further as you see fit.

Demo:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/03/2006

Revision History: None

Usage Terms: Click here

Your Comments (29)

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.

Comment Pages 1 of 3 pages  1 2 3 >

I've been needing a "wireframe" nav bar for awhile. This was very useful.
Posted by Hanzyfranzy on 06/06, 12:14 PM
Nice menu. I had no idea this section of Dynamic Drive existed...I will definitely return
Posted by John on 09/04, 12:53 AM
Great modern menu!
Posted by kieren on 09/18, 01:36 PM
This is cool. But, how I wish that this also can be applied within a table. Or, maybe, a <table> and <td> version of this, instead of using <li>.
Posted by Amir on 09/28, 12:07 AM
in reply to amir

This is a much simpler and much better way to do links, the point of CSS is to navigate away from tables.
Posted by henry on 10/28, 05:53 PM
This looks great in IE, but in Mozilla the menu crosses the entire page. Any help please?
Posted by Mr Dennis on 11/13, 10:28 AM
Great site lots of info i am kinda new too this and i seem to favor FireFox Browser over IE no offence to any one here but i just think it is a better browser

You say

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;

so then for FireFox i just leave this alone

Sorry for the stupid question

G
Posted by search engine on 12/24, 07:51 AM
Thanks for sharing ! I love this menu.
Posted by Farooq on 12/27, 05:32 AM
Can get code for css cascade menu
Posted by Doupload on 01/14, 07:10 AM
i suggest

.wireframemenu ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
this is better
Posted by engin on 01/26, 10:21 AM

Comment Pages 1 of 3 pages  1 2 3 >


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