На CSSplay недавно была опубликована новая версия выпадающего меню на «чистом» CSS. В этой версии никаких хаков, условных комментариев и таблиц для IE6.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | *{ 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 } |
Куча извращений с margin’ами ради того, чтобы не писать JS для наведения курсора на элемент списка?
Это для вас куча? И почему извращений? К тому же бывают случаи когда заказчик требует решения без js.
А теперь сами попробуйте именно по коду что указали, и хер чего получится. Вы забыли в заметку вставить что
#nav ul{padding:0;}
в демке у вас сие есть правда виду *{margin:0;padding:0;}
Спасибо, добавил обнуление в статью.
я так понял для многоуровнего не катит?
Многоуровневое
Я бы сделал на JavaScript, потому что работаю с клиентскими скриптами. Однако я против холиваров.
Интересная идея. Автор молодец.
Однако, такая реализация имеет свои ограничения: если нужно, например, сделать анимацию для манипуляций с меню, придётся всё-таки использовать скрипты.
Но, если же никакой дополнительной функциональности от меню не требуется, и автору легче сделать своим оригинальным способом, — ничего плохого в этом не вижу.
Уважаю людей, которые любят покопаться в интересующих их вещах и сделать что-нибудь новое и неординарное, либо же просто получить более глубокое понимание и опыт в чем-либо.
Да ну, ребята, решение классное.
Не так уж и много стиля (сравниваем объем с тем же js), а обрабатываться будет, я полагаю, несколько быстрее..
Беру на заметку.. автору спасибо за перевод)
Глючит в Google Chrome при изменении масштаба. Почему? Можно ли починить?
Решение-то конечно очень милое. Только что-то никто не говорит о его самом главном ограничении, о фиксированной ширине элементов.
сууупер, вот ток в ИЕ карявит
иде id=»content»
Самое главное в том,что если у пользователя будут отключены JavaScript,меню всё равно будет нормально опказываться
Пригодится, спасибо автору!
Отлично!
Спасибо автору за просветление что такое существует решение. Все верно раньше встречал что-то подобное от CSSplay только там было страшное извращение с таблицами для ie6.
Только подписался недавно, а уже какая польза
Еще раз спасибо.
Да и к всевышним записям, ну мля читайте заголовок. Зачем холивары разводить не нравиться не используйте используйте что вам больше нравиться зачем навязывать свои мысли на счет что лучше, ваши мысли не несут никакой информации по теме.
спасибо большое
поставил меню себе на сайт
теперь занимаюсь редактированием
я ваш весь сайт-блог смотрю. много чего интересного есть:) вы молодец!
Ну да, интересно. Только подобные решения для перфекционистов. Можно вставить на свой сайт, порадоваться, показать друзьям.. они тоже порадуются. И все.
Добрый день …. я попробовал посмотреть привеленный вами пример (ДЕМО) — он у меня явно косячит — не полностю отображаются подменю и проблемы с очисткой предыдущих подменюшек. млжно попросить вас скинуть гововый пример мне на почту. Я не программист может что-то делаю не так. Копирую текст о он сбивается в большую кучу и явно не распознается как команды. Буду очень благодарен.
Должно работать. Посмотрите на оф. сайте.
Здравствуйте!
подскажите пожалуйста, а куда стили вставлять надо?
Спасибо большое. Отличный скрипт. Использую в своем магазине. Подскажите пожалуйста, можно ли сделать из этого скрипта не горизонтальное а вертикальное меню с выпаданием вправо? Очень надо!
Спасибо!
Respect!
То что искал. Заказчики требовательные бывают и сидячие на IBM 286.
Здравствуйте!
У меня вот какой вопрос, меню я вставил, работает отлично , но только в Опере и в Мазиле, в эксплорере вообще не выпадает, и самое главное, подскажите как его сделать чтобы постоянно оно было по центру? Я как только не мучался ничего не получается, всё равно влево уходит. Заранее большое спасибо.
Проверяйте всё ли правильно скопировали. Чтобы меню было по центру используйте
margin:0 auto, либо посмотрите как сделано тут.Попробовал, ничего не получается, зайдите по моей ссылке посмотрите, может какой ньюанс упустил.
Пример отлично работает в IE, если у вас на сайте он не работает значит что-то не так сделали. Проверьте не переопределяются ли стили меню какими-либо другими.
Я только что всё убрал и снова скопировал с вашего сайта, вставил и опять такая же беда, мне не так важно в каком он браузере работает, это я доделаю сам, а как больше волнует сделать его по центру, я уже все знания исчерал, а он зараза не подаётся.
По поводу центрирования я выше написал.
Подскажите пожалуйста, в мозиле и опере работает на «ура». В эксплорере наоборот, все подменю уже раскрыты. Не знаю в чем дело, помогите пожалуйста ;(
Спасибо огромное. Очень полезный материал. Простота кода+ функциональность. Ничего лишнего.
Супер. Действительно заказчику надо иногда без JS.
У меня главное меню находится на нижнем краю верхнего фрейма, и выпадающие пункты меню не видны, так как их закрывает другой фрейм… если открываю страничку фрейма отдельно — то меню конечно открывается нормально…. а если на самом сайте — то половинчато….. Подскажите пожалуйста, можно ли как-то решить эту проблему или кодом или совет какой-то дадите… хотелось бы, чтобы при наведении мышки — раскрывающееся меню показывалось поверх всех фреймов…
эТО ПРОСТО НЕЧТО, я узнал много нового и много внедрил в свой сайт, шаблон сделал сам и вёрстку тоже.. но теперь постепенно внедряю разные «вкусности».. а там есть из чего выбрать, к тому же много ссылок на зарубежные сайты, обучающие создавать очень стильные и необычные меню без ПХП, который врядли появится на моём сайте…..Спасибо )
Ещё хотелось узнать (+ я сам параллельно ищу в сети), а можно как-то в html’е и скриптах — создать систему регистрации на сайте… и ещё систему добавления пользователями — файлов…. ? Буду благодарен за действенный ответ..