На CSSplay недавно была опубликована новая версия выпадающего меню без использования javascript. В этой версии никаких хаков, условных комментариев и таблиц для IE6. В очередной раз убеждаюсь, что в большинстве случаев нельзя говорить о чём-либо строго определённо, в данном случае о невозможности создания подобного меню без использования js. И хотя предыдущая версия была также реализована без использования скриптов, но для IE6 код представлял из себя некое извращение.
Итак меню представляет из себя обычный многоуровневый список:
<ul id="nav"> <li><a href="">Главная</a></li> <li><a href="">Товары</a> <ul> <li><a href="">Компьютеры</a></li> <li><a href="">Мониторы</a></li> <li><a href="">Комплектующие</a></li> </ul> </li> <li><a href="">Услуги</a> <ul> <li><a href="">Сборка</a></li> <li><a href="">Ремонт</a></li> <li><a href="">Обслуживание</a></li> </ul> </li> <li><a href="">Условия</a></li> <li><a href="">Карта сайта</a></li> </ul>
Стили:
*{ margin:0; padding:0 } #nav{ font-size:0.7em; list-style-type:none; width:600px; height:25px; display:inline-block; background:#355C96; line-height:25px } #nav li{ float:left; width:120px; margin-top:-10000px } #nav li a{ width:120px; text-decoration:none; text-align:center; color:#fff; position:relative; float:left; margin-right:-119px; margin-top:10000px } #nav li a:hover, #content #nav li a:focus, #content #nav li a:active{ background:#DCE2FC; margin-right:0; color:#355C96 } #nav li ul{ background:#6286BD; float:left; margin-top:-25px; padding-top:25px; margin-bottom:-10000px; list-style-type:none } #nav li ul li{ float:none; margin:0; width:auto } #nav li ul li a{ float:none; display:block; margin:0; margin-right:-1px; background:#6286BD }
Редактируя стили, помните, что меню легко «поломать».
Loading ...
Куча извращений с margin’ами ради того, чтобы не писать JS для наведения курсора на элемент списка?
Это для вас куча? И почему извращений? К тому же бывают случаи когда заказчик требует решения без js.
А теперь сами попробуйте именно по коду что указали, и хер чего получится. Вы забыли в заметку вставить что
#nav ul{padding:0;}
в демке у вас сие есть правда виду *{margin:0;padding:0;}
Спасибо, добавил обнуление в статью.
я так понял для многоуровнего не катит?
Многоуровневое
Я бы сделал на JavaScript, потому что работаю с клиентскими скриптами. Однако я против холиваров.
Интересная идея. Автор молодец.
Однако, такая реализация имеет свои ограничения: если нужно, например, сделать анимацию для манипуляций с меню, придётся всё-таки использовать скрипты.
Но, если же никакой дополнительной функциональности от меню не требуется, и автору легче сделать своим оригинальным способом, – ничего плохого в этом не вижу.
Уважаю людей, которые любят покопаться в интересующих их вещах и сделать что-нибудь новое и неординарное, либо же просто получить более глубокое понимание и опыт в чем-либо.
Да ну, ребята, решение классное.
Не так уж и много стиля (сравниваем объем с тем же js), а обрабатываться будет, я полагаю, несколько быстрее..
Беру на заметку.. автору спасибо за перевод)
Глючит в Google Chrome при изменении масштаба. Почему? Можно ли починить?
Решение-то конечно очень милое. Только что-то никто не говорит о его самом главном ограничении, о фиксированной ширине элементов.
сууупер, вот ток в ИЕ карявит
иде id=»content»
Самое главное в том,что если у пользователя будут отключены JavaScript,меню всё равно будет нормально опказываться
Пригодится, спасибо автору!
Отлично!
Спасибо автору за просветление что такое существует решение. Все верно раньше встречал что-то подобное от CSSplay только там было страшное извращение с таблицами для ie6.
Только подписался недавно, а уже какая польза
Еще раз спасибо.
Да и к всевышним записям, ну мля читайте заголовок. Зачем холивары разводить не нравиться не используйте используйте что вам больше нравиться зачем навязывать свои мысли на счет что лучше, ваши мысли не несут никакой информации по теме.
спасибо большое
поставил меню себе на сайт
теперь занимаюсь редактированием
я ваш весь сайт-блог смотрю. много чего интересного есть:) вы молодец!
Ну да, интересно. Только подобные решения для перфекционистов. Можно вставить на свой сайт, порадоваться, показать друзьям.. они тоже порадуются. И все.
Добрый день …. я попробовал посмотреть привеленный вами пример (ДЕМО) – он у меня явно косячит – не полностю отображаются подменю и проблемы с очисткой предыдущих подменюшек. млжно попросить вас скинуть гововый пример мне на почту. Я не программист может что-то делаю не так. Копирую текст о он сбивается в большую кучу и явно не распознается как команды. Буду очень благодарен.
Должно работать. Посмотрите на оф. сайте.