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:
    206
    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:
    683
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    93
    #3
    ok thanks, i did the same with two images.
     
    ken.sweet, May 4, 2012 IP
  4. MarkTheUser

    MarkTheUser Member

    Messages:
    206
    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