SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile how can i make this menu?

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

  2. #2
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  3. #3
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  4. #4
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by glenngould View Post
    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

  5. #5
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  6. #6
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by glenngould View Post
    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

  7. #7
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  8. #8
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works like a charm..thanks a lot


Bookmarks

Posting Permissions

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