1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with horizontal css menu

Discussion in 'CSS' started by ken.sweet, May 2, 2012.

  1. #1
    I need a css menu like this:
    http://www.cssplay.co.uk/menus/pro_horizontal.html

    This has been designed by using big hover buttons. Is there any otehr simple way to design this menu? Maybe by breaking this image into 2 parts.
    Please let me know asap.
     
    ken.sweet, May 2, 2012 IP
  2. MarkTheUser

    MarkTheUser Member

    Messages:
    208
    Likes Received:
    0
    Best Answers:
    4
    Trophy Points:
    26
    #2
    Something i put together in a hurry:

    I used only 3 buttons but you can just add more in html if you like. Just add another <div class="button"><a>BUTTON TEXT HERE</a></div> under the 3rd one.
    HTML:
    <div id="menu">
    <div class="button"><a href="[B]HOME PAGE LINK HERE[/B]">Home</a></div>
    <div class="button"><a href="[B]SEARCH PAGE LINK HERE[/B]">Search</a></div>
    <div class="button"><a href="[B]CONTACT PAGE LINK HERE[/B]">Contact</a></div>
    </div>
    Code (markup):
    CSS:
    #menu {
        height: 35px;
        width: 750px;
        background: url(http://i23.photobucket.com/albums/b363/CompressorX/button1.gif) top right repeat-x;
    }
    
    .button {
        margin: 0pt auto;
        width: 70px;
        height: 30px;
        float: left;
        text-align: center;
        color: #FFFFFF;
        font-weight: bold;
        padding-top: 4px;
    }
    
    .button a {
        color: #F4F4F4;
    }
    
    .button a:hover {
        color: #FFFFFF;
        text-decoration: none;
    }
    
    .button a:active { 
        color: #FFFFFF;
        background: url(http://i23.photobucket.com/albums/b363/CompressorX/button2.gif);
    }
    
    .button:hover {
        background: transparent url(http://i23.photobucket.com/albums/b363/CompressorX/button2.gif);
    }
    Code (markup):
    There is room for improvement but for the most part that is it. Notice that you have to add links to pages to each <a> in html in order for a:active background to be shown (the button of the page you are on atm).

    EDIT: I have uloaded the images for backgrounds of the menu and buttons to my photobucket account and will keep them there for a while to give you the chance of downloading but since my account is overcrowded as it is i will have to remove them after that.
     
    Last edited: May 3, 2012
    MarkTheUser, May 3, 2012 IP
  3. ken.sweet

    ken.sweet Active Member

    Messages:
    674
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #3
    ok thanks, i did the same with two images.
     
    ken.sweet, May 4, 2012 IP
  4. MarkTheUser

    MarkTheUser Member

    Messages:
    208
    Likes Received:
    0
    Best Answers:
    4
    Trophy Points:
    26
    #4
    The one i did has only 2 images also.. button1 and button 2. I would like to see what you did and how if possible.
     
    MarkTheUser, May 22, 2012 IP