SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question css menu - Help me

    Hi,

    Any idea, How can i bulid this menu in css?

    Actually the menu hover is emboss

    Please help me. The font is Arial. Also i have attached sample menu in this thread.

    Anybody sample menu url like this.
    Attached Images Attached Images
    Last edited by ajaxdinesh; Jun 5, 2009 at 01:24.
    Cheers,
    Dinesh

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using your attached image the code could be like this.

    As a stand alone example you can start testing your idea with:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Untitled Page</title>
    <style type="text/css">
    #nav{
    	margin:0;
    	padding-left:6px;
    	width:480px;
    	height:117px;
    	background:#e33 url(images/emboss_css_menu.png) no-repeat;
    	font:10px/1.2 arial;
    }
    #nav li{
    	float:left;
    	list-style:none;
    }
    #nav li a{
    	float:left;
    	position:relative;
    	width:79px;
    	height:117px;
    	color:#fff;
    	text-transform:uppercase;
    	text-decoration:none;
    	text-align:center;
    }
    #nav li a span{
    	position:absolute;
    	bottom:0;
    	left:0;
    	padding:0 5px 8px;
    	width:69px;
    }
    #nav li a:hover{
    	margin:0 -6px;
    	padding:0 6px;
    	background:#d00 url(images/emboss_css_menu.png) no-repeat;
    }
    #nav li a:hover span{
    	left:6px;
    	cursor:pointer;
    }
    </style></head><body>
    
    <ul id="nav">
    	<li><a href="#"><span>products</span></a></li>
    	<li><a href="#"><span>services</span></a></li>
    	<li><a href="#"><span>exports</span></a></li>
    	<li><a href="#"><span>financials</span></a></li>
    	<li><a href="#"><span>mrf & sports</span></a></li>
    	<li><a href="#"><span>find your type</span></a></li>
    </ul>
    
    </body></html>
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Nice job, Erik.

  4. #4
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Erik,

    Thanks a lot.
    Cheers,
    Dinesh


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
  •