Log in

View Full Version : 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/csslibrary/item/clean_arrow_underline_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:

<!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' :eek:
Check out the symptoms here...

Divitis:- what it is, and how to cure it (http://csscreator.com/?q=divitis)

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...


<!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. ;)