RSS Feed Twitter Posts RSS Comments RSS

Tuesday, June 29, 2010

Experiments with fluid width CSS dropdown menu's

In the middle of my current work flood I had another idea involving dropdowns, it seems my brain can't stop thinking about it until it's solved. Where the "fixed width" limitation has been my current gripe with my dropdown. The new experimental solution seems to work in IE5-7 and Firefox.
This method uses line alignment and inline-block to create a dropdown, it's 100% functional for all browsers if the dropdown links are horizontally aligned, but needs work for vertical alignment, For those who think IE6 does not support inline-block, well, it does :P
Here is a sample of what I have so far, move your mouse over the "main" link and then down.

Inline-Block Dropdown

Example
Only Firefox, IE6-7





Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inline-Block Dropdown Test</title>
<style type="text/css">
/*new method testing*/
/*does not work in IE7-8 or Opera*/
/*reset*/
#nav,
#nav ul {
padding:0;
margin:0;
}

#nav a {
color:#000;
}

/*colors*/
.main {
padding:0 50px;
background:orange;
}
.one {
padding:0 50px;
background:blue;
}
.two {
padding:0 50px;
background:green;
}
.three {
padding:0 50px;
background:purple;
}

.main:hover {
background:#ffd485;
}
.one:hover {
background:#8383ff;
}
.two:hover {
background:#3f823f;
}
.three:hover {
background:#783d78;
}







/*functionality*/
li {
display:inline;
}
#nav a {
display:inline-block;
}
#nav li a.main {
vertical-align:top;
}
#nav a:hover {
margin-top:100px;
}
#nav li a.main:hover {
vertical-align:baseline;/*for ie6*/
position:relative;
top:-100px;
}



/*horizontal to vertical*/
#nav {
float:left;
}
#nav ul {
margin-top:-100px;
}

#nav ul a {
margin-right:-300px;
position:relative;
height:25px;
line-height:25px;
}

/*dirty trick, for now*/
#nav .one {

}
#nav .two {
top:25px;
}
#nav .three {
top:50px;
}


#nav {
margin-left:300px;
}

</style>
<!--[if lte IE 7]>
<style type="text/css">

</style>
<![endif]-->
</head>
<body>
<ul id="nav">
<li><a href="#main" class="box main">main</a><ul><li><a href="#1" class="one">link 1</a></li><li><a href="#2" class="two">link two</a></li><li><a href="#3" class="three">link three</a></li></ul></li>
</ul>
</body>
</html>

UPDATE

Stu Nicholls from cssplay.co.uk made this method work cross browser :D
http://www.cssplay.co.uk/menus/inline-dropdown.html
This is just experimentation for fun. If you have any suggestions or tips then feel free to comment.
»»  read more