Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Expanding Menu

  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Expanding Menu

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


  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    (X)HTML and CSS is widely regarded to be the best way to achieve that. Try 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="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. 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.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    t_arnold (04-21-2009)

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Will that stretch the center, if i use an image as a background?

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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.
    matt | design | blog

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thumbs up

    Worked like a charm!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •