Page 1 of 1

how can I make menus like on this site

Posted: Sun Jul 26, 2009 4:49 am
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

Re: how can I make menus like on this site

Posted: Sun Jul 26, 2009 8:01 am
by jackpf
I think they're using flash. I hate flash personally :)

Re: how can I make menus like on this site

Posted: Sun Jul 26, 2009 8:16 am
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 ??

Re: how can I make menus like on this site

Posted: Sun Jul 26, 2009 10:05 am
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.