Кто-нибудь видел плагин для такого меню?

Question

[Никита]

Доброго времени суток!
Видел кто плагин для такого меню - www.dontabak.ru?
Покликайте по ссылкам что бы понять функционал

Comments

[Anton Filippov]

будь мужиком сделай сам, плагины он ищет, тут же работы на 15 минут времени

[Никита]

Anton Filippov: Сделал сам, но что-то не очень. Походу все придется переделывать с нуля=( Изначальный подход к верстке был не тот, поздно сообщили об этой фиче.

Answer 1

[Никита]

db-mb.ru/portfolio/header
Реализовал =)
Есть мелкие косячки, но думаю кому надо будет, сам подправит.
Надеюсь кому-нибудь пригодится

Comments

[Никита]

Для управления всей этой штуковиной в боди изначально нужно добавить классы:
l-inner - Если это внутренняя страница l-nav-closed - Если нужно сжать меню l-with-subnav - Соответственно раскрывает субменю, для нужного субменю нужно добавить класс submenu-active на соответствующей странице

Answer 2

[Алексей]

Судя по исходнику - это меню на чистом CSS, по крайней мере на первый взгляд я кода не нашел, нашел только описание эффектов перехода в css файле.

Comments

[Никита]

Это точно не чистый CSS, в потыкате по страницам, такого на чистом css не сделаешь

[Алексей]

Вы правы, где-то я просмотрел, грузится jquery и скрипты.

[HamSter]

Никита: у sorax есть туториал по такому меню)

[Алексей]

Название плагина не просматривается, посмотрите www.dontabak.ru/js/script.js поиск по "menu__". Там расширение для jQuery написано, без копирайтов.

[Никита]

HamSter: У кого?

[Алексей]

У www.youtube.com/user/ArtSorax/videos наверное.

[HamSter]

Алексей: да, у него

Answer 3

[Василий]

Ок, тыкну пальцем - www.dontabak.ru/js/script.js
CSS пока классы по событиям переключать не умеет :)

Comments

[Алексей]

Каюсь, проглядел внизу <script src="/js/script.js"></script>
Сразу за ним идет аналитика - думал это она и есть.

[Никита]

Я в курсе, что там js есть и в нем можно посмотреть, но там не написано, готовое это решение или самопис

[HamSter]

"CSS пока классы по событиям переключать не умеет :) " ааа ну ессли для этого плагин нужен, то да, конечно)))!

[Василий]

Явный самопис, причем ничего сложного - просто переключает классы, а анимация свойством transition в css прописана.
Причем в переключаемых классах только свойство left для фиксированного элемента (скрытого светлого меню - их для каждой верхней категории несколько).

[HamSter]

xnscripter: вот-вот)

[Василий]

HamSter: А что не так? :) Мы можем только свойства стилей менять при смене разрешения экрана.

[HamSter]

xnscripter: я имею ввиду, что скрипт не обязательно тащить для смены классов, все в основном силами css сделано

[Василий]

HamSter: Для меня в данном контексте не очевидно как с помощью элемента с псевдоклассом - :hover повлиять на свойства другого элемента, и все это сделать средствами CSS. Возможно с помощью псевдоэлементов что-то получится изобразить, не уверен.

[Дмитрий Беляев]

xnscripter: посмотрите селекторы + и ~

[Никита]

xnscripter:

li:hover a { /* При наведении на li, a будет менять цвет на белый */
    color: #fff;
}

[Василий]

Никита: Читайте внимательнее.

[Василий]

Дмитрий Беляев:
Ну вот, значит подобное можно повторить на голом CSS.
Спасибо, отложу в памяти.