Need some help creating a menu

by robinsden

Posted: 13 years ago 6 replies

WEB DESIGN

I'm trying to come up with something unique and different from the normal menus out there.

My idea is to have Four round buttons to represent my categories.

Then the idea is to have it that when the visitor scrolls over top of one of them to have it slowly change to a different color. At the same time I'd like to have it make a word appear below it to say what the category is?

Dose anyone have any idea's on how this menu could be created using CSS?

I got lots of other menus but none that do this specifically?

It would also go horizontally and be centered.

I'd even be willing to give 5 bucks Canadian if that helps.

#creating #menu

carolinaaram 13 years ago

Use ul and li tag to create an menu and give them internal or external css.
- Thanks
{{ DiscussionBoard.errors[4661881].message }}

Istvan Horvath

13 years ago

For $5 (even Canadian) I am not going to tell you. I am way more expensive than that!

But I will give you the directions for free

What you want is rollover images in the menu:
http://en.wikipedia.org/wiki/Rollover_(web_design)
(a general description of the idea)

Now that you know the term for it... you can find many web sites providing the code, instructions, tutorials re: how to do it.

Thanks
1 reply

Signature

{{ DiscussionBoard.errors[4662311].message }}

robinsden

13 years ago

Originally Posted by Istvan Horvath

For $5 (even Canadian) I am not going to tell you. I am way more expensive than that!

But I will give you the directions for free

I found the following bit of code but when I try to add a class in front of it, it no longer seems to work.

ul {color:#000066}
ul li a {color:#CC0000;}

ul{
margin: 0;
padding: 0;
font: 13px 'Lucida Grande', Arial, sans-serif;
list-style-type: none;
}
ul li{
display: inline;
}
ul li a{
text-decoration: none;
padding: .2em 1em;
color: #000;
background-color: #b0f664;
border:1px solid #8bda35;
}

ul li a:hover{
background-color: #ccf69f;
border:1px solid #a8e765;
}

What I mean is for example the bottom bit as such,

menub.ul li a:hover{background-color: #ccf69f;
boarder: 1px solid #a8e765;}

How can I resolve this problem?

Thanks

Signature

Photograph repairs, online computer help and simple site design. http://robinsden.com

{{ DiscussionBoard.errors[4662621].message }}

Istvan Horvath 13 years ago

You can solve the problem by learning the basics

WRONG:
menub.ul li a:hover{background-color: #ccf69f;
boarder: 1px solid #a8e765;}

CORRECT:
.menub ul li a:hover{background-color: #ccf69f;
boarder: 1px solid #a8e765;}

In the stylesheet the convention for classes is like this:
.class-name (notice the period is IN FRONT!)
for IDs
#id-name
- Thanks
Signature
{{ DiscussionBoard.errors[4663257].message }}