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
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.