Выпадающее меню как у Рамблера?

Question

[Justin Bieber]

Ищу меню похожее на news.rambler.ru, с выпадающим списком новостей и переходом в категорию.
А еще лучше как у Рамблера, или у них самопис? :)

Comments

[Justin Bieber]

Начал верстать, блоки поползли вниз, ul>li короче, как сделать их горизонтально ))

[Justin Bieber]

s.m0n1.ru/d6og3y21.jpg получается ))

Answer 1

[Владислав Бойченко]

Вам нужно что-то вроде этого: codepen.io/anon/pen/WrJjeE

Comments

[Justin Bieber]

конечно оно, пытался вырезать но не смог, научите ))

[Владислав Бойченко]

Justin Bieber: да там все просто. Объясняю логику.
У вас есть список.

<ul>
...
</ul>

В нем есть элементы списка.

...
<li></li>
<li></li>
<li></li>
...

Помимо того, что в элементе списка есть ссылка, в нем также есть и скрытый блок, который и появляется как выпадающее меню.

...
<li>
    <a href="#"></a>
    <div class="block"></div>
</li>
<li>
    <a href="#"></a>
    <div class="block"></div>
</li>
<li>
    <a href="#"></a>
    <div class="block"></div>
</li>
...

Так вот, реализация такова. Для начала скрытому блоку задаем значение none свойства display, а при наведении на его родительский, то есть на lo, задаете ему значение block свойства display.
То есть примерно так:

<ul>
<li>
    <a href="#"></a>
    <div class="block"></div>
</li>
<li>
    <a href="#"></a>
    <div class="block"></div>
</li>
<li>
    <a href="#"></a>
    <div class="block"></div>
</li>
<ul>

ul{ваши стили и обязательно position: relative;}
ul li{ваши стили}
ul li a{ваши стили}
ul li a div.block{position: absolute; left: 0; display: none;}
ul li a:hover div.block{display: block;}

Абсолютно позиционирование дочерному блоку относительно списка вы задаете для того, что бы выпадающий блок появлялся в начале списка и ему можна было бы указать ширину в 100% ширины списка. Если свойство position: relative вы укажите не ul a li, то список блок будет выпадать не в начале списка, а под непосредственно пунктом меню. Вот и все.

Answer 2

[Wheelie]

А вы думаете , что это адски сложный скрипт? Любой фронтэндщик в их штате за рабочий день сделает, с перерывом на чаи и игрой в мортал комбат и фифа =)
Это "самопис"...

Comments

[Андрей Саныч]

за рабочий день с перерывами?? Ахахахах. Тогда это должно выглядеть так: рабочее время - 2 часа, время для перерывов 6 часов =)

[Wheelie]

Андрей Саныч: Примерно =)

[Wheelie]

Андрей Саныч: вы думаете хорошая партия в фифу или мортал дело быстрое?))

[Андрей Саныч]

Wheelie: я же выделил под них 6 часов =D

Answer 3

[Александр Борисович]

гуглите css tabs :-)

Comments

[Justin Bieber]

далеко не css tabs ))

Answer 4

[Михаил Чирский]

Это самое обычное выпадающее меню, кто знает верстку, ничего сложного тут нет, и подобное можно и без скриптов сделать, и рабочий день на такой пустяк вы загнули сильно) если только учесть время на верстку и дизайн, а так подобная штука делается за 5-10 минут, если не быстрее

Comments

[Justin Bieber]

а на DLE такое сможете посадить? )

[Михаил Чирский]

Justin Bieber: Очень давно не работаю с этой CMS, т.к с ним была печальная история, через него ломали и спамили по чем зря, посадить можно на, что угодно, ну сам понимаете не free

[Justin Bieber]

Михаил Чирский: почем ))

[Михаил Чирский]

Justin Bieber: Такие вещи обычно в личку, и я же сказал, что с этой CMS давно не работаю, я имел ввиду, что сложность не в CMS, а в понимании элементарных вещей.

Answer 5

[Sanes]

Ищите по запросу Mega menu

Comments

[Justin Bieber]

ага уже подсказали ))