Создание меню в HTML и CSS

Я хочу создать меню, как это:Создание меню в HTML и CSS

Я хочу увидеть красный квадрат на acitve странице и после висения. Меню создается:

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

Я пытаюсь создать это в течение 2-х часов и ничего :(Можете ли вы дать мне совет

источник

2013-04-24 Chris

Можете ли вы предоставить [jsFiddle] (http://jsfiddle.net) или шоу ваш текущий CSS? – Adrift

Пожалуйста, закройте свой -Tag! Это должно быть после –

главной проблемой для меня является то, что этот красный квадрат больше, чем меню. Я не могу показать это надлежащим образом. В каждом случае он начинается с той же высоты, что и этот граффик. – Chris

Вот рабочая jsfiddle для вас:

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; }

Я добавил класс CSS "активный" , который должен быть установлен на сервере с вашим php-кодом или установить его как статичный в разметке html. К сожалению, я не знаю лучшего способа. Также «ясно» -tag бы неплохо из поплавка :)

Но, возможно, это поможет немного ;-)

источник

2013-04-24 20:36:35

Спасибо, много. У меня была более сложная ситуация, но пример мне помог :) – Chris

Самый простой способ сделать это, чтобы дать свои метки анкерные (или ., лучше, их родитель Ли элементы) класс, когда они выбраны

Затем создать правило, что цели li.selected и Ли:. парить, который помещает красную коробку

Я не могу быть более конкретным, не видя ваш HTML И CSS.

источник

2013-04-24 20:24:55 Jeff

Для градиента вам понадобится CSS3 или изображение. Я использовал генератор градиента для демонстрации - http://www.colorzilla.com/gradient-editor/

Идея - это активная ссылка, которая будет выше, чем в меню, и с отрицательными верхними и нижними полями, которые компенсируют разницу в высоте. И не надо overflow: hidden в меню :)

http://jsfiddle.net/23zZE/

источник

2013-04-24 20:26:14 Kaloyan

Создание меню в HTML и CSS

ответ

Смежные вопросы