PDA

View Full Version : Snazzy drop down naviagtion in CSS


Sam
30-01-2006, 09:17 PM
I got this off pixel2life ;P Its intertesting thats all...

well, Im too lazy to break it down into little bits and explain because i want to hurry up n go and get food -.-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
[ <!ELEMENT a (#PCDATA | table)* > ]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Drop Down Menu </title>
<style type="text/css">
body {
font-size:1%;
color:#fff;
}
.menu {
display:none;
}
.container {
color:#000;
width:90px;
height:18px;
display:block;
background:#63a401;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family:tahoma, vardana, arial, sans-serif;
font-size:10px;
line-height:18px;
overflow:hidden;
}
.container:hover {
height:auto;
cursor:pointer;
color:#fff;
background:#63a401;
}
a.inside, a.inner:visited {
display:block;
width:89px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
background:#3798cb;
}
a.inside:hover {
background:#add;
}
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
.container {
display:none;
}
.menu {
display:block;
}
a.outside, a.outer:visited {
color:#000;
width:90px;
height:18px;
display:block;
background:#63a401;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family:tahoma, vardana, arial, sans-serif;
font-size:10px;
line-height:18px;
overflow:hidden;
}
a.outside:hover {
color:#fff;
background:##63a401;
overflow:visible;
}
a.outside:hover table {
display:block;
background:#3798cb;
border-collapse:collapse;
}
a.inside, a.inner:visited {
display:block;
width:88px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none; color:#000;
font-family:tahoma, vardana, arial, sans-serif;
font-size:10px;
text-align:center;
}
a.inside:hover {
background:#add;
}
/*]]>*/
</style>
<![endif]-->
</head>
<body>

<div class="menu">
<a class="outside" href="#">Menu Name
<table><tr><td>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</td></tr></table>
</a>

<a class="outside" href="#">Menu Name
<table><tr><td>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</td></tr></table>
</a>
</div>

<div class="container">
Menu Name<br />
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</div>
<div class="container">
Menu Name<br />
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</div>

</body>
</html>



http://www.pixel2life.com/twodded/staff/chris/menus/dropdown.html

:)
Coding4Newbs
31-01-2006, 01:04 PM
Thats old, but im sure itll be new to some members so well done :) its usefull if you got 10000000000000000000 links :)
Oracle:
31-01-2006, 04:42 PM
Hello.

This tutorial is quite interesting but there are better ways of doing it really and if your to post a code then you are best off explaining it.

Thanks
Dan
Anderman
31-01-2006, 04:57 PM
And had more snazzy poos than that

Its nothing special
Sam
31-01-2006, 05:06 PM
Its ok. I dont know 1000's of people who know CSS to be honest, and considering my WHOLE layout is coded in it ;P

- Sam

Want to hide these adverts? Register an account for free!