Vertical CSS Menu (something new or not)

**TALES** · 05-08-2011, 10:28 PM

Hello all,

Im new to this forum and i like the website alot with the css stuff.
Im very new to css so dont be hard on me

I have been playing around with http://www.dynamicdrive.com/style/cs...nderline_menu/ and im hoping that im the first with this look. i did not look around further if thats the case. i was already happy it looked new to me.

And come up with this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>CSS Layout</title>
<style type="text/css">
* { 
 margin:0; 
 padding:0; 
}

html {
 font-size: 16px;
}


#trianglesmiddle ul{
border: none;
list-style: none;
}

#trianglesmiddle li {
margin: 0;
}

#trianglesmiddle li a{
display: block;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #trianglesmiddle li a{ /*Non IE6 width*/
width: auto;
}

#trianglesmiddle li a:hover{
height:18px;
background-color: blue;
color: #fff;
}


#trianglesleft{
clear: left;
width:0; 
height:0;
background-color: #FFF;
border-color: transparent blue transparent transparent;
border-style: double;
border-width: 10px;
float: left;
}

#trianglesright{
width:0;
height:0;
background-color: #FFF;
border-color: transparent transparent transparent blue;
border-style: double;
border-width: 10px;
float: left;

}
#trianglesmiddle{
width:110px; 
height:18px;
background-color: #09C;
border-color: blue;
border-style: solid;
border-width: 1px;
float: left;
}
</style>
</head>
<body>

<div id="trianglesleft"></div>
<div id="trianglesmiddle">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
</ul>
</div>
<div id="trianglesright"></div>
<div id="trianglesleft"></div>
<div id="trianglesmiddle">
<ul>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a></li>
</ul>
</div>
<div id="trianglesright"></div>

<div id="trianglesleft"></div>
<div id="trianglesmiddle">
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<div id="trianglesright"></div>

<div id="trianglesleft"></div>
<div id="trianglesmiddle">
<ul>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
</ul>
</div>
<div id="trianglesright"></div>

<div id="trianglesleft"></div>
<div id="trianglesmiddle">
<ul>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
</ul>
</div>
<div id="trianglesright"></div>

<div id="trianglesleft"></div>
<div id="trianglesmiddle">
<ul>
<li><a href="http://www.codingforums.com/">Coding Forums</a></li>
</ul>
</div>
<div id="trianglesright"></div>
</body>
</html>

I bet you experts can code this much better then me.
Some how this works in chrome and i have been tying to look at this in IE but somehow IE dont like the CSS what i coded its all messed up.

My guestion is this something new and can this be coded better?

greets,

TALES

**coothead** · 05-09-2011, 12:12 PM

Hi there TALES,

and a warm welcome to these forums.

Your page appears to be an excellent example of 'Divitis'

Check out the symptoms here...

Divitis:- what it is, and how to cure it

Also note that the id selector may only be used once per document, for repeats you must use the class selector.

I would have coded it with just the one ul element...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>CSS Layout</title>

<style type="text/css">
body {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size: 16px;
 }
#nav {
    padding:0;
    margin:0;
    list-style-type:none;
 }
#nav li {
    float:left;
    clear:both;
 }
#nav a {
    float:left;
    width:110px;
    height:18px;
    border:1px solid #00f;
    background-color:#09C;
    color:#fff;
    text-decoration:none;
 }
#nav a:hover {
    background-color:#00f;
 }
.lft-bdr, .rgt-bdr {
    float:left;
    border-width:10px;
    border-style:double;
    border-color:transparent transparent transparent #00f;
 }
.lft-bdr {
    border-color:transparent #00f transparent transparent;
 }
</style>

</head>
<body>

<ul id="nav">
 <li><span class="lft-bdr"></span><a href="http://www.dynamicdrive.com/">Dynamic Drive</a><span class="rgt-bdr"></span></li>
 <li><span class="lft-bdr"></span><a href="http://www.dynamicdrive.com/style/">CSS Examples</a><span class="rgt-bdr"></span></li>
 <li><span class="lft-bdr"></span><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><span class="rgt-bdr"></span></li>
 <li><span class="lft-bdr"></span><a href="http://www.javascriptkit.com/domref/">DOM Reference</a><span class="rgt-bdr"></span></li>
 <li><span class="lft-bdr"></span><a href="http://www.cssdrive.com">CSS Drive</a><span class="rgt-bdr"></span></li>
</ul>

</body>
</html>

This code has been tested successfully in IE8, Opera 11.1, Safari 5.3 and Firefox 3.6.16.

coothead

**TALES** · 05-09-2011, 04:08 PM

Thank you very much for your relay coothead.

The code you write looks really nice and thank for the tips
for the id and class i will study that more.

I hope somebody find it nice enough to use it on his website.
Picture include of the vertical nav

Greets,

TALES

**coothead** · 05-09-2011, 06:29 PM

No problem, you're very welcome.

Thread: Vertical CSS Menu (something new or not)

Thread Tools

Search Thread

Vertical CSS Menu (something new or not)

Bookmarks

Bookmarks

Posting Permissions