everyonesdesign 23 мая 2013 в 21:01

Справочник фронт-энд девелопера: виды горизонтальных панелей навигации

4 мин

57K

CSS*HTML*

+57

Комментарии 16

crea7or 23 мая 2013 в 21:37

1 и 3 — остальные не нужны.

-5

Pierre_b 23 мая 2013 в 21:46

мой стандарт:

.menu ul li{
position:relative;
display:inline-block;
vertical-align:top; /*FIX IE*/
//float:left; /*FIX IE*/
}

и в IE можно не проверять)

oWeRQ 3 июн 2013 в 22:37

Беглый тест в IE6-7 показал:
1. position:relative; не влияет на раскладку
2. не ведет себя как inline-block, а ведет себя как float
3. vertical-align:top; делает ul высотой равной высоте строки внутри .menu (что поначалу сбило с толку)

Вывод:
Решение не рабочее, избыточное, запутывающее(коммент про vertical-align и хак с 2 слешами вместо звездочки).

Решение давно известно:

display: inline-block;
*display: inline;
zoom: 1;

З. Ы. Если нужна поддержка IE — надо проверять, особенно в вашем случае.

JiLiZART 23 мая 2013 в 22:28

Для html5 есть flexbox umaar.github.io/css-flexbox-demo/, но жаль что пока не все браузеры это умеют.

JiLiZART 23 мая 2013 в 22:38

css3*
Вот еще статейка на эту тему www.html5rocks.com/ru/tutorials/flexbox/quick/

Piterski 23 мая 2013 в 23:48

Не совсем понятно зачем в примере на :hover дополнительно прописаны transition-duration

li a:hover {
    padding-bottom: 3px;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
    border-bottom: 1px solid #dd9999;
}

Piterski 23 мая 2013 в 23:55

Да и border повторяется

li a:hover {
    padding-bottom: 3px;
}

crwin 24 мая 2013 в 00:22

Для того, чтобы вернуть исходное состояние с заданным эффектом, без него это был бы просто скачок.

Piterski 24 мая 2013 в 00:42

Ничего подобного, не будет никакого скачка. Все данные анимации задаются один раз, как правило главному классу. А дальше всем манипуляциям типа :hover или просто через добавление класса, добавляются только свойства которые нужно поменять — jsfiddle.net/kjCL7/20/