how can I make menus like on this site

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
isaac_cm
Forum Commoner
Posts: 44
Joined: Wed May 17, 2006 8:47 am

how can I make menus like on this site

Post by isaac_cm »

Hello,
I saw this site , and it is done very well

Code: Select all

http://www.babycenter.com
I dont know if this site is based on CMS engine but I really wish to learn how to make the top navigation bar manu and also the drop down menu on the left.

Or what CSS script can do that ?

Is there tools that can help to design sites like this ?

any advice ?

Thanks
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: how can I make menus like on this site

Post by jackpf »

I think they're using flash. I hate flash personally :)
isaac_cm
Forum Commoner
Posts: 44
Joined: Wed May 17, 2006 8:47 am

Re: how can I make menus like on this site

Post by isaac_cm »

jackpf
the flash is the age selector underneath the menu, Main Menu is CSS

I really guys wish for some professional guide, how I can create CSS menu like that ??
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: how can I make menus like on this site

Post by jackpf »

Oh, I thought that was what you meant.

I'd imagine it's something like this

Code: Select all

<style>
    ul
    {
        -moz-border-radius: 5px;
        background-color: #EBECE4;
        border: 1px solid #838B8B;
        list-style: none;
        overflow: auto;
        clear: both;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    ul li a
    {
        display: block;
        float: left;
        width: 30%;
        color: blue;
        border-right: 1px solid blue;
        text-decoration: none;
        padding: 0.5% 1.5%;
        font-size: 1.2em;
    }
    ul li a:hover
    {
        background-color: #C1CDCD;
    }
</style>
 
<ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
</ul>
Except it looks like they have a background image that they're moving around on hover. I couldn't find the image they used, and I couldn't be bothered to make one myself tbh, so I just did it with colours. You can adapt it to use images though.

Also, I reckon they use round corner images instead of border-radius, but again, I don't have the images.

You could apply the css to the li tag, but because IE doesn't support :hover of anything except anchor tags, it wouldn't work in IE.

Anyway, I reckon that's how they basically do it.
Post Reply