...

View Full Version : Expanding Menu



t_arnold
04-21-2009, 08:47 PM
Ok, i am working on my site and i want to make an expanding menu. I have included a screen shot to show you what i mean. The red part with be swapped out with an image. So the top and bottom will stay the same, but the center will stretch, if needed. When you mouse over portfolio, i would like it to expand to reveal the other links in it. What would be the best way to accomplish this css, java, flash......?????

http://i100.photobucket.com/albums/m30/arnold_travis/menu-1.jpg

BoldUlysses
04-21-2009, 08:58 PM
(X)HTML and CSS is widely regarded to be the best way to achieve that. Try 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="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Untitled</title>

<style type="text/css">

* {
padding:0;
margin:0;
}

a:link, a:visited, a:hover, a:active {
text-decoration:none;
}

a:hover {
color:#f00;
background:#aaa;
}

ul {
list-style:none;
font-family:arial, sans-serif;
width:200px;
}

ul li a {
display:block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
background:#ccc;
}

ul li ul li a {
height:30px;
line-height:30px;
}

ul ul {
display:none;
}

ul li:hover ul {
display:block;
}

</style>

</head>

<body>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Stuff</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>

</body>
</html>

It's patterned after the excellent Suckerfish Dropdowns (http://www.alistapart.com/articles/dropdowns). You'll probably need a bit of JavaScript to get it to work with IE, since IE doesn't like to respond to :hover on anything but link tags, and the menu's functionality relies on assigning a :hover behavior to a list item.

t_arnold
04-21-2009, 09:04 PM
Will that stretch the center, if i use an image as a background?

BoldUlysses
04-21-2009, 09:17 PM
Try it and see. Background images won't stretch the elements they're assigned to like images placed in the markup (using the <img> tag) will. If your background images are sized appropriately you shouldn't have a problem. I just picked some random numbers for dimensions when I threw together the test page.

t_arnold
04-21-2009, 10:23 PM
Worked like a charm!!! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum