how to design this menu please help

Discussion in 'HTML & Website Design' started by anindya420, Aug 18, 2013.

  1. #1
    how to design this menu polo360 copy.png
     
    anindya420, Aug 18, 2013 IP
  2. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #2
    Okay I needed something to procrastinate on...so lucky you I guess. My methodology may not be perfect, but it works and should work (with the exception of the hover span effect) back to IE6.

    Easy enough to do, just an unordered list, wrap everything in a link and put the titles in their own span.

    HTML:
    <ul id="mainMenu">
        <li><a href="#">
            <span>HOME</span> Back to home
        </a></li>
        <li><a href="#">
            <span>PRODUCTS</span> What we have for you
        </a></li>
        <li><a href="#">
            <span>SERVICES</span> What we do
        </a></li>
        <li><a href="#">
            <span>BLOG</span> Follow our updates
        </a></li>
        <li><a href="#">
            <span>CONTACT</span> Ways to reach us
        </a></li>
    </ul>
    HTML:
    Set the <li> to display: inline-block, the span to display:block to force a line and apply hover effects.

    CSS:
    #mainMenu{
        list-style:none;
        width:50%;
        margin:0 auto;
    }
    
    #mainMenu li{
        display:inline-block;
        *display:inline; /*IE6*/
        zoom:1;
    }
    
    #mainMenu a{
        color:#000;
        text-decoration:none;
        display:block;
        border-left:#ccc dotted 1px;
        padding:0.2em 1em;
        font-size:0.75em;
        color:#bbb;
    }
    
    #mainMenu a span{
        display:block;
        color:#999;
        font-weight:bold;
    }
    
    #mainMenu a:hover span{
        text-decoration:underline;
    }
    Code (markup):

    Working example:
    http://dredgy.com/examples/anyindiaMenu/

    You can grab the CSS and HTML files from that directory.
     
    blueparukia, Aug 18, 2013 IP
  3. anindya420

    anindya420 Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #3
    thanks blueparukia
     
    anindya420, Aug 19, 2013 IP