Search the Community

Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии. <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }

У меня возникла проблема, есть код который задает меню в верхней плашке на сайте, при наведении на пункт услуги-открывается еще три по-умолчанию скрытых пункта класса submenu, проблема заключается в том, что если заходить с телефона, то навестись на пункт услуги не получается, а если просто нажать на него то срабатывает переход и еще 3 пункта не успевают открыться. <ul class="topmenu" > <li><a href="#usl">Услуги</a> <ul class="submenu"> <li><a href="us.html" class="navi">Пакеты </a></li> <li><a href="raz.html" class="navi">Услуги</a></li> <li><a href="spec.html" class="navi">Специальные</a></li> </ul> </ul> Как можно решить эту проблему?

Добрый день. Создаю здесь тему впервые. Собственно, опыта о данном ресурсе пока нет. Но изучил местные правила. 1)Ссылка на проблему - www.iy-style.com 2)Выдвижное меню пропадает (пункт Utbildningar), так как соприкасаеться с другим контейнером. Насколько сложно это исправить? Я использовал готовый код меню, понятное дело. Не знаю, насколько большая проблема, может придеться переделывать весь принцип, по которому я делаю этот простейший сайт, так что из-за меню теперь у меня все стоит. 3)Необхадимо что бы выдвижное меню работало как подабает - т.е. не пропадало бы при наведении на него мышкой. И не сливалась бы с контейнером, где параграф и текст. Я знаю лишь азы вертски и такие вещи как галареи, формы регистраций и на этот раз меню - подключаю уже сделанные кем то и лежащие в свободном доступе.

Привет! возникла такая проблема при тестировании выпадающего меню, внутри category блок category1 а в нем category level2 который переносится по слогам а должен тянуться по ширине строки Пример здесь http://213.111.228.103/drop/ ps: вроде-бы это стандартное решение с position:absolute и должно работать но возможно я где-то ошибку допустил, никак не пойму...первый уровень меню category1 нормально тянется по содержимому а уже вложенный в category1 не корректно работает

Есть горизонтальное меню на сайте http://www.atlasokon.com.ua/vibor.htmlвсе работает. Пытаюсь перенести это же меню в раздел каталога http://www.atlasokon.com.ua/catalog/compare.phpменю не хочет выпадать. Подскажите в чем проблема и где копать?

Всем привет! Пару дней назад задумал менять дизайн сайта, посвященному теме общепита и банкетного зала! Менять нужно было, так сказать, на лету(без сливания на тестовый хостинг), то есть основная html-верстка осталась практически нетронутой, всю работу планировал свести к правке css и замене изображений! Ну...ещё слайдер в шапке поменял! Все шло и идет как задумано, но сегодня заметил что-то необъяснимое: во всех браузерах верхнее горизонтальное меню сайта отрабатывает как положено - при наведении мышки появляется выпадающее меню, а вот в хроме - ни фига! Я уже и так, и так - всё мимо! Уважаемый специалисты, быть может, вы сможете разобраться в этом? Я проверял с дом.ноута и с рабочей машины! Вот сайт: http://www.clubterritoria.ru - это главная страница с новым дизайном! Ещё успел обновить разделы "банкеты" и "бизнес-ланч", остальные страницы со старым дизайном! Самое интересное, что в старом дизайне выпадающее меню работает и на хроме, как и раньше! В общем, если сможете, посоветуйте... Заранее всем спасибо!

Здравствуйте. Прошу помочь бездарности. Нужно, чтобы при наведении вываливалось меню и фон родителя оставался неизменным, когда юзер будет водить курсором по выпадающему меню. Примерно это должно быть вот так http://joxi.ru/6WQfU_3JTJBXFcsaglQ Оранжевое - это hover. Но у меня такая беда http://joxi.ru/KmUfUxjKTJCPTRw_8zk Понимаете, о чём я? Подскажите, что я не учла? Очень интересно, самоё не получилось разобраться. Спасибо, джедаи.

Всем привет! Имею проблему: Есть впадающее меню на CSS - http://jsfiddle.net/ydKX6/3/ Работает почти во всех браузерах отлично, но как говориться в семье не без сами знаете кого. Достопочтенный товарищ firefox не хочет правильно растягивать дочерние <li> элементы (те самые, которые выпадают). Что посоветуете делать камрады? Для тех кто не понял: Дочерние <li> элементы должны быть ширины не меньше чем родительские <li> элементы. Firefox растягивает их по размеру вей страницы.

Помогите пожалуйста сделать выпадающее меню на css, без jq. Спасибо <div id="menu"> <ul><li><a href="#">click me</a></li><ul><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li></ul><li class="standup"><a href="">ССЫЛКА1</a></li><li class="standup"><a href="">ССЫЛКА2</a></li><li class="standup"><a href="">ССЫЛКА3</a></li><li class="standup"><a href="">ССЫЛКА4</a></li></ul></div>

Ребят есть меню http://jsfiddle.net/ при наведении мыши на пункт выпадающего меню оно пропадает, никак не пойму где ошибка

Здрасте всем! Давно я тут не был ) Вот проблема: http://leveler.ru/spman/ главное меню при наведении курсора в хроме оставляет куски меню за собой: Обновился до 28 версии - та же фигня. Остальные браузеры (FF 22, IE 10/9/8, O12) ведут себя хорошо. Подскажите дураку, в чем причина может быть?

удалите пжлст. прошу прощения

Всем привет, кого не видел. Сделал себе выпадающее меню на основе css по этому уроку. Но, естественно, на мобильных устройства не работает. Нашел урок с адаптивным меню и под мобильные устройства. Но переделывать всё меню лень, может кто подсказать, с чего начать, чтобы меню всплывало и на мобильных устройствах ?