CODEWITHSUNDEEP
htmlcssmenu
Chris
Chris

Reputation: 805

Creating menu in html and css

I want to create menu like this:

Menu

I want to see red square on acitve page and after hover. Menu is created by:

<div id="menu">
    <ul>
    <li><a href="#"><span>Home</span><a></li>
    <li><a href="#"><span>About</span><a></li>
    <li><a href="#"><span>Contact</span><a></li>
    </ul>
</div>

I am trying to create this for 2 hours and nothing:( Can you give me an advice?

Upvotes: 2

Views: 1359

Answers (3)

Stefan Brendle
Stefan Brendle

Reputation: 1564

Here is a working jsfiddle for you:

http://jsfiddle.net/6sCZh/

li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px;   }

ul {  }

li a { display: block;   color: #fff; text-decoration: none; margin: 14px;   }

li a.active, li a:hover {  background-color: brown;  padding: 11px; margin: 3px; }

I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)

But maybe it helps a bit ;-)

Upvotes: 3

Kaloyan
Kaloyan

Reputation: 7352

For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/

The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)

http://jsfiddle.net/23zZE/

Upvotes: 0

Jeff
Jeff

Reputation: 2871

The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.

Then create a rule that targets li.selected and li:hover which places the red box.

I cannot be more specific without seeing your HTML AND CSS.

Upvotes: 0

Related Questions