how can i make this menu?

**mihealaanca** · Jul 5, 2009 08:57

can anyone tell me how to achieve this menu with the big arrow that hovers?
i43.tinypic.com/2iszjwg.jpg
thank you

**glenngould** · Jul 5, 2009 10:02

Code HTML4Strict:

<html>
 
<head>
	<style type="text/css">
		#menu {list-style:none; font-family:arial,sans-serif; font-size:14px;}
		#menu li a {color:#333; width:100%; display:block; text-decoration:none; margin:0; padding:20px 30px;}
		#menu li a:hover {color:#fff; background:url('arrow.gif') left center no-repeat;}
	</style>
</head>
 
<body>
	<ul id="menu">
		<li><a href="#">OVERVIEW</a></li>
		<li><a href="#">TEAM</a></li>
		<li><a href="#">NEWS</a></li>
		<li><a href="#">CAREERS</a></li>
		<li><a href="#">LOCATION</a></li>
	</ul>
</body>
 
</html>

If the menu is not fixed-width, you'll need some modifications.

**mihealaanca** · Jul 5, 2009 10:35

Originally Posted by glenngould

Code HTML4Strict:

<html>
 
<head>
	<style type="text/css">
		#menu {list-style:none; font-family:arial,sans-serif; font-size:14px;}
		#menu li a {color:#333; width:100%; display:block; text-decoration:none; margin:0; padding:20px 30px;}
		#menu li a:hover {color:#fff; background:url('arrow.gif') left center no-repeat;}
	</style>
</head>
 
<body>
	<ul id="menu">
		<li><a href="#">OVERVIEW</a></li>
		<li><a href="#">TEAM</a></li>
		<li><a href="#">NEWS</a></li>
		<li><a href="#">CAREERS</a></li>
		<li><a href="#">LOCATION</a></li>
	</ul>
</body>
 
</html>

If the menu is not fixed-width, you'll need some modifications.

thank you very much

i modified it as

Code:

        #menu {list-style:none; font-family:arial,sans-serif; font-size:14px;background-color: #999999;width:150px;border:1px solid #000;}
        #menu li a {color:#333; width:203px; display:block; text-decoration:none; margin:0; padding:20px 30px;}
        #menu li a:hover {color:#fff; background:url('arrow.gif') left center no-repeat;}

i have added a background to the menu and a border..the widths are just random..when i modify it like this, the arrow doesn't come over the menu as it should.
you can look at this
i44.tinypic.com/30248b6.jpg

**Jake Arkinstall** · Jul 5, 2009 10:05

Edit:

Ouch, beaten by 3 mins! I really need to speed up

The above solution is much more detailed than mine. I'll keep mine up for the sake of not deleting the post

Well, first start off with a menu:

Code html:

<ul class="Menu">
    <li><a href="#">Overview</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Location</a></li>
</ul>

And add some CSS. This isn't going to be the actual CSS you use, and you'll need to change measurements, colors and make images, but it should help (the best I can do without trying it out):

Code css:

.menu{
    background: url(--path-to-gradient-image--) #ccc repeat-x;
    width: 20em;
    padding: 0;
}
.menu li{
    padding: 0;
    margin: 0;
}
menu li a{
    margin-left: 2em;
    width: 18em;
    background: #ccc;
    color: #666;
}
.menu li a:hover{
    background: url('arrow.jpg') #333;
    color: #ccc;
}

**glenngould** · Jul 5, 2009 10:44

Do you mean the arrow doesn't fit to the full width of the menu? As I said, for this you should either rescale the image to fit, or if the menu width is not fixed you need to slice the arrow and add some other CSS rules.

**mihealaanca** · Jul 5, 2009 10:49

Originally Posted by glenngould

Do you mean the arrow doesn't fit to the full width of the menu? As I said, for this you should either rescale the image to fit, or if the menu width is not fixed you need to slice the arrow and add some other CSS rules.

what i am trying to achieve is the menu to have a background and a border but most important is that the arrow to go over the menu on the left and right side as well...so the menu must be smaller in width than the arrow. if you look at the first image on my post you will notice the menu background and then the arrow which goes over him when you hover

**glenngould** · Jul 5, 2009 11:26

Try this:

Code HTML4Strict:

<html>
 
<head>
	<style type="text/css">
		#leftcol {padding:0; width:400px; background:#bbb;}
		#menu {list-style:none; font-family:arial,sans-serif; font-size:14px; margin:0 0 0 100px; padding:0; background:#ccc; border:1px solid #000;}
		#menu li {margin:0 0 0 -20px; padding:0 0 0 0px;}
        #menu li a {color:#333; width:100%; display:block; text-decoration:none; margin:0; padding:20px 30px;}
        #menu li a:hover {color:#fff; background:url('arrow.gif') left center no-repeat;}
	</style>
</head>
 
<body>
	<div id="leftcol">
		<ul id="menu">
			<li><a href="#">OVERVIEW</a></li>
			<li><a href="#">TEAM</a></li>
			<li><a href="#">NEWS</a></li>
			<li><a href="#">CAREERS</a></li>
			<li><a href="#">LOCATION</a></li>
		</ul>
	</div>
</body>
 
</html>

Now if you need a full-width arrow, change the width of the arrow image with an image editor. If you prefer it to be scalable then study these tutorials:

http://www.jankoatwarpspeed.com/post...technique.aspx

http://www.oscaralexander.com/tutori...-with-css.html

**mihealaanca** · Jul 5, 2009 11:34

works like a charm..thanks a lot

User Tag List

Thread: how can i make this menu?

Thread Tools

Display

Hybrid View

how can i make this menu?

Bookmarks

Bookmarks

Posting Permissions