В этом посте я покажу вам как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера является полезнейший ресурс CSSPlay. Те у кого этот сайт еще не нашел свое место в закладках, советую сделать это как можно быстрей. На сайте еще много различных и полезных примеров кода.
Приступим…
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 | <div class="menu"> <ul> <li><a class="hide" href="">Раздел 1</a> <!--[if lte IE 6]> <a href="">Раздел 1 <table><tr><td> <![endif]--> <ul> <li><a href="" title="">Страница 1</a></li> <li><a href="" title="">Страница 1.1</a></li> <li><a href="" title="">Страница 1.2</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="">Раздел 2</a> <!--[if lte IE 6]> <a href="">Раздел 2 <table><tr><td> <![endif]--> <ul> <li><a href="" title="">Страница 2</a></li> <li><a href="" title="">Страница 2.1</a></li> <li><a href="" title="">Страница 2.2</a></li> <li><a href="" title="">Страница 2.3</a></li> <li><a href="" title="">Страница 2.4</a></li> <li><a href="" title="">Страница 2.5</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> |
Вы можете добавить дополнительные разделы, при этом необходимо будет изменить в CSS ширину меню. Как вы видите в примере используются условные комментарии, с дополнительным кодом. Это необходимо для браузера IE6.
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 | .menu{ font-family:arial, sans-serif; width:212px; height:100px; position:relative; font-size:11px; z-index:100 } .menu ul li a, .menu ul li a:visited{ display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden } .menu ul{ padding:0; margin:0; list-style:none } .menu ul li{ float:left; position:relative} .menu ul li ul{ display:none } .menu ul li:hover a{ color:#fff; background:#36f } .menu ul li:hover ul{ display:block; position:absolute; top:21px; left:0; width:105px } .menu ul li:hover ul li a{ display:block; background:#ddd; color:#000 } .menu ul li:hover ul li a:hover{ background:#6fc; color:#000 } |
Оформление пунктов меню можно менять так как вам хочется. Для IE6 используются дополнительные стили, которые также нужно подключить с помощью условных комментариев:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .menu ul li a.hide, .menu ul li a:visited.hide{ display:none } .menu ul li a:hover{ color:#fff; background:#36f } .menu ul li a:hover ul{ display:block; position:absolute; top:21px; left:0; width:105px } .menu ul li a:hover ul li a{ display:block; background:#ddd; color:#000 } .menu ul li a:hover ul li a:hover{ background:#6fc; color:#000 } |
Вот собственно и все. Пример работает во всех наиболее популярных браузерах, включая IE6. Для корректной работы меню необходимо указать тип документа.
ммм очень интересное решение. Спасибо за наводку )
Беспринципное чёрт знает что, уж простите… Вместо одной строчки на jQuery или десяти на чистом JS, засовывать таблицу в ссылку.
А ты сколько файлов библиотек подвешиваешь, при подключении jQuery ?
Если можно обойтись обычныс CSS, то лучше использовать его, чем JS
здорово.
хз, насколько это применим, но забавно 
особенно понравилась фишка с выпадением крайнего-правого под-под-меню влево
в общем, — в избранное.
Очень хороший прием. Давно его использую. Есть одно только неудобство: нельзя поставить таймаут, подменю изчезает сразу после того как отведешь мышь, что не совсем удобно.
pepelsbey, безусловно таблица в ссылке это что называется без комментариев. Но опять же это только для 6-го IE.
Я предпочитаю не гадить в документ, сохраняя его идентичность. Весь мусор в ie.css…
Спасибо. Прикольная менюшка!
рано я похвалил: невозможны словосочетания в подпунктах
и неплохо бы добавить один пункт без выпадения:
<li><a class="hide" href="">Глагне</a>
<!—[if lte IE 6]>
<a href="">Глагне</a>
<![endif]—>
</li>
в ближайшее время сам напишу пример для горизонтальной менюхи (размещу у себя в блоге)
Николай, оставьте потом в комментариях ссылку на ваш пример.
>> cssplay
Ресурс, безусловно, заслуживает места в закладках, но методы используемые там, сильно экспериментальны и во многих случаях ненадёжны (конечно, во многом из-за IE), на мой взгляд, примеры с этого сайта служат лишь демонстрацией мощи css.
Менюшки конечно прикольные, но по моему сейчас это уже не модно!
Тут описывается методика, а оформление дело личное.
>>> Беспринципное чёрт знает что, уж простите…
Pepelsbey, как видите, не я один такой
>>> в ближайшее время сам напишу пример для горизонтальной менюхи
Николай, Вы что-то подобное имеете в виду?
>>> во многих случаях ненадёжны
Если «хакать с умом» (с), то всё отлично. Ведь большинство хаков рассчитаны на IE6, а с ним либо условные комментарии, либо star html.
Большущее спасибо, а я тормозила дизайн прибегая к яве. С таким вариантом сайт значительно быстрее грузится, да и поисковики не будут спотыкаться о ява-код, спасибо еще раз!
Приветствую.
Хорошее меню. Очень. НО, есть один момент.
Когда я вытягиваю его (несколько разделов),
то разделы попадают на другую строчку.
Это нормально. Но когда раскрывается подраздел,
то первая строчка подраздела скрывается (не показывается)
за основным (заглавным) разделом, на который она наложена при смещении.
Как бы это прописать, чтоб исправить?
Да, можно еще обнаглеть? Не тудно ли выслать вот эту форму
оставления комментария? Или может урок по этой теме где есть?
Большое спасибо!!!
Незнаю как у вас , но у меня это меню не работает, может оно только под определённые браузеры,
тогда оно бесполезно.
Проверял в IE6 7, Opera, Safari, FF. В этих браузерах работает.
Меню хорошо, но минус в том, что все поля одного размера, и выпадающие поля нельзя варьировать по размеру (когда например в пункте меню «Продукция» есть подпункт «Стандартная линейка телескопических цилиндров»).
скажите как сохранить фон и text-decoration (hover) ссылки меню, в то время как я буду «гулять» по выпавшему подменю, т.е что бы фон и подчеркивание, которые происходят при наведение мышки не пропадали когда переходишь на выпавшее меню?
rekx, по-моему в этом примере именно так и происходит.
Alex, а что именно за это отвечает?
Добрый день! Использую решение на своем сайте, очень нравится, НО!
ИЕ 6 не дается ни под каким видом: квадратики главных пунктов почему-то дублируются из-за условных комментариев, а меню не выпадает.
Что показательно, пример по ссылке работает отменно, когда же я сохраняю прямо из него html+css, этот же код на моем компьютере опять глючит по прежнему. Чего я недопонимаю, и как заставить все это работать под ИЕ6?
Заранее огромное спасибо за ответ!
кто знает как сделать так, чтобы меню всегда выпадало в левом краю?
rekx, я не совсем понимаю что у вас не получается. За формление пунктов при наведении отвечают css свойства и офомление это остается активным при перемещении по выпадающему меню. Что значит, чтобы меню выпадало в левом краю?
Люба, проверьте внимательно. Все ли вы файлы скопировали?
Alex, меню выпадает всегда строго под своим разделом, а если выпадающее меню сделать шире, и тогда пункты в нем благодаря float:left; выстраиваются в строчку, вот тут и нужно чтобы это подменю всегда было на одном месте… т.е его нужно привязать к первой ссылки главного меню…
Да, конечно, я скопировала все, что приведено в инструкции (html и подключенный к нему css) — вот мой набросок http://forcasey.kolosovska.com/
В ФФ, ИЕ7, Опере все отлично, ИЕ6 дублирует основные пункты меню и не оно не выпадает (
Люба, не вижу в вашем примере стилей для IE6
2ALEX
Согласна, ошибалась. Стили подключила, все работает, но не до конца, — по причине того, что мой шаблон сверстан процентами. Не могу установить ширину для выпадающих блоков 100% относительно ширины основных пунктов меню (как это и реализовано под другие браузеры), не подскажете, как это можно сделать?
Обновленный пример моего шаблона снова находится тут:
http://forcasey.kolosovska.com/
появился вопрос с вставкой меню в сложные макеты. Если конструкцию поместить в таблицу, то под IE6 перестает работать. Есть какое-нить лекарство? или все же JS нас спасет?
Ребят, такая проблема, ставил это меню на движок, на ИЕ работает не правильно, основные разделы меню посвечивает как надо, а выпадающего меню нет, на остальных браузерах работает нормально, скажите пожалуйста, в чем может быть проблема?
Serj, для начала проверьте все ли файлы из примера вы скопировали и не конфликтуют ли существующие css свойства с теми, что в примере.
Уважаемые читатели данный пример я привёл лишь для того чтобы показать, что есть возможность создания подобного меню без использования javascript. Пожалуйста используйте данный подход лишь в исключительных случаях (заказчик требует и т.п.).
Alex, в том то и дело что шеф требует без ява реализовать меню.
Css не конфликтует, на css в движке только шрифты указанны.
Возникло подозрение что дело в таблицах.
Есть еще какие нибудь соображения?
Очень рассчитываю на помощь
Serj, без примера тяжело вам что-то ответить. Дайте ссылку и возможно кто-то поможет. Если будет время я также взгляну.
Alex, ага, чуть позже обязательно, сейчас пока локально сайт находится
Спасибо
Люди помогите, пожайлуста, очень нужно к диплому менюшку такую сделать, с CSS не очень хорошо знаком, вобщем попытался стилизовать немного меню под свои задачи. в результате в опере 9.25 работает, а в эксплорере нет, если может кто помочь- буду очень благодарен.
вот то, что получилось
http://files.mail.ru/CXMY3L
блин, долго мучался, в результате сделал менюшки разноцветнык, все везде прекрасно работает… но вот одно но, в ие 6 и 8 тоже когда ставишь меню в таблицу- перестает работать, ставишь между двух таблиц, тоже перестает работать, удаляешь таблицы- снова работает..
Посмотрел ваш пример и обнаружил что отсутствуют таблицы для ie в условных комментариях, дальше смотреть не стал. Пожалуйста внимательно перенесите весь код примера к себе и уже потом делайте изменения.
Ребят, снова со своей проблемой, сайт загрузил на виртуальный хостинг, адрес сайта http://foodsgoods.ru/
А проблема все та же, не работает в ИЕ
Помогите пожалуйста
У вас
linkсо стилями для меню прописан внутриbody, перенестие вhead.Спасибо большое за совет, перенес линк со стилями в хед, но все равно не работает(
Поменял доктайп на XHTML 1.0 Strict, заработало. И еще пропишите значение ширины у основных ссылок, сейчас просто число.
Ура! Зароботало!!! Спасибо большое!!
Глупый вопрос, а где значение ширины прописать? в css файлах?
Да, в стилях для IE. У вас сейчас вроде просто 208.
да, была такая ошибка, а для ие ваще 105 стояло))
Теперь все работает, спасибо!
///
Так вот, товарищи, на движках это меню тоже работает!!!
Безусловно, это здорово. А вот не скажете ли, можно ли в главном меню использовать не текстовые ссылки, а картинки? Причем разные для случаев наведенной и ненаведенной на этот пункт мышки? Т.е. чтобы меню внешне выглядело как вот тут http://aquahobbi.ru
Или такое делается только на Яве?
Можно, если картинки использовать в качестве фона у ссылок.
Такая проблема, при установки на фон заголовка выпадающего меню, меню перестает работать в IE 6, то есть заголовок цвет меняет, а меню не выпадает. С чем это может быть связанно?
Фон у пунктов не влияет на работоспособность самого меню. Видимо ошибка где-то ещё.
Извиняюсь, при установке изображения на фон
«Посмотреть пример (в примере присутствует немного усложненное меню)»
Можете плз добавить код для этого меню, просто срочно нужно меню с 2-мя выплывающими подменю.
Никак не могу сделать, чтобы было как у вас в примере…
Скопируйте исходный код в примере.
Спасибо большое! Че-то сразу не догодалась)))
Подскажите что делать??(((( Пытаюсь сделать менюшки с подменю, а подменю(например на странице которую приведу в меню НПЦ(А-О), в пункте А подменюшки уже появились и находятся по основным выпадающем меню) что не так? почему не получается? может в css что поменять? http://gi-ascor.ucoz.ru/index/0-21
а почему нет ответа не пойму?
Роман что конкретно у вас не работает и в каком браузере.
у меня FireFox, подменю «А» ( в примере) имеет в себе еще подменю, которое (если присмотреться) уже открыто. ну короче при наведении на «А» ничего не происходит, а должна вылазить еще одно меню! код css был взят с простого меню, а само меню с вашего примера(где оно усложнено) в чем проблема? что не так?
Попробуйте для начала привети в порядок код страницы, сейчас там каша какая-то. А по существу не вижу стилей для меню.
код страницы в порядке!!! это Ucoz… стиль подключен.. menu.css!!! только стиль для простого меню! а не для усложненного как в примере вашем!!
Для меню третьего уровня которое должно появляться сбоку нужно дописать
.menu ul li:hover ul li:hover ul.left {left:-105px}В другую сторону соответственно
.menu ul li:hover ul li:hover ul.right {right:-105px}Благодарю! это первый пример таких меню на CSS, который не глючит)
Спасибо огромное за статью. Сайт на движке. Попробовала только что поставить такое же меню себе. Вроде бы работает под мозиллой, но в эксплорере почему-то получилось 2 раздела один над другим. Может быть, я сделала что-нибудь не так — я только учусь… Буду сейчас разбираться…
Здравствуйте.
Спасибо огромное за статью! Именно это и искала.
Ребята, подскажите, пожалуйста, как можно расширить подпункты в меню для нескольких слов?
Заранее спасибо.
спасибо за код, но в ИЕ6 меню не выпадает почему-то …
как полечить??
.menu ul li a.hide, .menu ul li a:visited.hide{
display:none
}
.menu ul li a:hover{
color:#fff;
background:#36f
}
.menu ul li a:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px
}
.menu ul li a:hover ul li a{
display:block;
background:#ddd;
color:#000
}
.menu ul li a:hover ul li a:hover{
background:#6fc;
color:#000
}
Эти правила пропишите в спец. файле для ие6, например, в ie6.css
А также не забудьте подключить его в html по аналогии:
так это ж стырено с http://www.cssplay.co.uk/menus/dd_valid.html
даже цвета не перекрашены)) ыы
А вы ссылку не видете в начале поста? Да и кажется мне, что если с переведённым примером у многих возникают затруднения, то что уж говорить об оригинале .
да, спасибо очень хорошее решение. Такое меню хорошо подставлять пользователям, которые отключают в браузере показ явы. Респект)
Ещё раз спасибо огромное за статью!
Всё работает, ура!
не работает в firefox
Сорри — это у меня просто голова нехотит работать)
Алекс, спасибо за идею, в меню все работает,но рисунки на сайте, отображаются с промежутками с друг другом ,когда я убираю из кода страницы промежутков не остается,но при этом меню не работает в IE, помогите, что сделать?
Добрый день …. можно попросить вас скинуть гововый пример мне на почту. Я не программист может что-то делаю не так. Копирую текст а он сбивается в большую кучу и явно не распознается как команды, а как тект выводится на экран. Буду очень благодарен.
В моем случае для корректного отображения в Мозилле мне пришлось тэг DIV заменить на SPAN. В Мозилле стало всё нормально, но Опера нормально отображать перестала, всё разъехалось.
В результате пришлось подредактировать код следующим образом:
В классе .menu позиционирование position:relative; заменил на position:static; и всё стало нормально.
.menu{font-family:Arial, Helvetica, sans-serif;
width:212px;
height:100px;
position:static;
font-size:11px;
z-index:100
}
А это меню будет раскрываться поверх текста расположенного ниже?
Да, будет.
Да все будет работать — уже проверено временем. Стабильно показывается пользователям без яваскрипта (такие еще встречаются). А приятель один мой модификацию сделал — у него меню теперь открывается вправо и влево, в зависимости от необходимости. И тоже все работает. Alex, спасибо за прекрасную вещь.
а я, кстати, его к Joomla прикрутил. обращайтесь, если надо
отлично работает во всех браузерах!
блин так долго скрипт искал
А подскажите пожалуйста, как сделать чтоб как у вас в примере было, из под меню еще подменю в бок вылезает? у меня что то не как не получается как надо код строить?
И куда вводить настройки для IE6?
Посмотрите код примера и сделайте также.
В шестом эксплорере ссылки в подменю не работают. Именно из-за таблиц. Всё перекрывается первой ссылкой. Как это лечить?
В примере всё должно быть нормально.
А демонстрацию можно? А то у меня ссылка в меню распространяется на все подпункты. Провинтил в екслорере, получется:
<a href='url1' rel="nofollow">url1 <a href='url2' rel="nofollow">url2</a></a>
нормально прожёвывается, а
<a href='url1' rel="nofollow">url1
<a href='url2' rel="nofollow">url2</a>
</a>
благополучно получает url1 для обеих ссылок.
Сслыка на пример в конце поста есть.
Вот как раз этот-то момент там и не освещён.
Шестой осёл — очень больная тема. Единственное животное, считающее, что ховерами бываю только ссылки, а фиксед — вообще ненужная в хозяйстве дрянь. Впрочем, если сверстать шаблон чисто под шестёрку, основательно вычистив стили, то ссылки становятся кликабельными (в смысле куда надо ведут), но в строке состояния упорно показывается ссылка, указанная в голове.
К сожалению не могу сейчас проверить. Я б вам посоветовал вообще не использовать это меню. Думаю сейчас ie6 не стоит того. Используйте небольшой js для него.
Народ а подскажите как в меню цвет поменять на нужный мне? как задать страницы при нажатии на переход на поб менюшки.? и как местоположение поменять. спасибо зарание
В файлах css. color:; background:; А вообще не рекомендую юзать чужие примеры, не понимая об чём они вообще.
я только начинаю, пока много чего не знаю — чем отличается по коду горизонтальное меню от веритикального?
как сделать выпадающие меню из слов, разбросанных по всему сайту?
Position:absoluteвам в помощь.да спасибо но чрезвычайно тяжело наверное енто сделать
спасибо
спасибо меню просто класс. Поисковики будут довольны
менюшка почему то очень криво стоит в опере, во всех остальных браузерах нормально
направо кривит, пикселей на 40
даже не так — при назначении «margin-top» когда заходит за непонятные границы начинает исчезать по мере опускания
Opera 10.61, всё нормально.
я не говорю что ее не видно, просто по соотношению ко всем браузерам показывает криво — лично у меня только в опере.
Пытаюсь сделать меню на сайте http://www.allremont59.ru и не получается подскажи
Где там именно меню?
А как сделать так, чтобы вся эта конструкция растягивалась на всю длину экрана?
Косячный коммент ушёл. Делается достаточно просто: меню — таблица шириной 100%. Каждый пункт — резиновая ячейка класса «меню». Для не эксплорера можно посмотреть здесь:юридический портал «правология».
Реализация для осла выше приведена, достаточно просто перенести на проект. Про таблицы не забываем. Осёл весьма своеобразен в своём представлении о списках вообще и их свойстве hover в частности.
огромное спасибо! правда пока еще не получилось… но я стараюсь
во-первых — спасибо за данный вариант реализации меню.
я его внедрил в своем проекте, пока локально.
проблема: я поместил данное меню в фрейм высотой в одну строку. под этим фреймом размещен другой фрейм с контентом, который не дает меню раскрыться вниз.
вопрос: как сделать, чтобы нижний фрейм не закрывал меню?
Спасибо.
Во-первых, это не фрейм с контентом не даёт меню раскрыться, а меню раскрывается в собственном фрейме, но вы этого не видите.
Во-вторых, чтобы это меню работало как надо забудьте вообще про существование фреймов.
К сожалению отказаться от фреймов наверно не могу, т.к. каждый фрейм с меняющимся контентом, а меню предполагалось без изменений. Как победит данный вопрос?
К сожалению придётся. Не любят поисковики фреймов. Совсем не любят. Если вы хотите чтобы ваш сайт вообще индексировался, про фреймы придётся забыть. Про аякс аналогично. Это я в догонку вумному товарищу ниже.
skryisli, не могу с вами согласиться насчет аякса. можно говорить о конкретных случаях неправильного использования технологии — тогда могут быть проблемы. Если грамотно подходить — все прекрасно индексируется, проверено. Если у вас действительно есть серьезные доводы против, мне было бы интересно узнать вашу точку зрения, только это, думаю, не стоит обсуждать в этой ленте комментариев
Я не видел ни одной, решённой с помощью аякса, задачи, которую нельзя было бы решить без него. Кроме того, клиент-сервер — это всегда клиент-сервер. Даже в асинхронном режиме аякс может здорово перекосить потоки ява-скрипта в браузере, если возникнут трудности со связью.
Кроме того, большинство так называемых программистов аякс и знать не знают что он из себя представляет, пользуюясь чужими библиотеками, подгружая горы скрипта для выполнения элементарной задачи. Ещё куда ни шло, если свои, а то я смотрю со сторонних серверов грузить начали.
И при этом, как я уже говорил, все эти задачи великолепно решаются и без аякса. Это далеко не единственный способ экономии трафика на вёрстке. Да и получения данных без перезагрузки, если на то пошло, тоже. Просто вокруг этой технологии поднята шумиха, которой аякс, как технология, совершенно не оправдывает на мой взгляд.
skryisli, в ваших словах есть большая доля правды. Действительно, технология очень часто используется не по назначению и без понимания сути. Конечно, почти все поставленные задачи можно решить без аякса, конечно может влиять на индексацию асинхронная подгрузка контента с ключевиками. Но. У всего есть своя область применения. В этом и отличается опытный разработчик от любителя — не пытается использовать как можно больше «модерновых» технологий, а выбирает, что в каждом конкретном случае наиболее оптимально для решения поставленной задачи. Я была рада услышать ваше мнение, благодарю
volk98, я не против помочь, только надо знать, в чем конкретно заключается задача. Ваше решение с фреймами мне кажется, скажем так, оригинальным, возможно, удасться найти более простое решение. Насчет меняющегося контента без перезагрузки страницы — аякс изобрели не вчера
Пишите: sherza@psytronica.ru
Почему-то меню не получилось. Вернее подменю не скрывается и не выпадает. Помогите новичку.
сделайте проще. откройте данный пример с меню в браузере, потом по правой кнопке просмотр кода, скопируйте его в Ваш html файл. В html файле нужно изменить ссылку на имя Вашего css файла. Сам CSS код можно скопировать с этой страницы. Внимание! в данном css коде, не для IE, ошибка в строчке, где width:212px; нужно 212 заменить на большее значение, иначе меню получится 2х2.
Если меню сделать картинками-ссылками и в стили добавить
.menu a img {border:0px;}
то меню выпадает через раз.
Как лечить?
прошу прощения, я имел ввиду
.menu a img {border: none;}
А всё. Разобрался, извините! В css ошибку исправил у себя!
Спасибо большое за меню. Понравился способ!
Не помогло! Проблема осталась!
Возможно проблема в подгрузке картинок. А вообще надо смотреть пример.
Скажите пожалуйста!! как подключить дополнительные стили .css для IE 6 с помощью условных комментариев?????? Очень рассчитываю на вашу помощь!!
Спасибо.
Условные комментарии для IE
Все) додумался сам, спасибо за статью! мне очень пригодилась.
не знал КУДА именно их надо вставить)
Спасибо за урок, но есть ли более симпотичный стиль?
Нарисуйте какой вашей душе угодно. Если с этим проблема, то лучше обратитесь к специалисту. Если вы не знаете CSS, то вставлять такое меню — это бомбу замедленного действия на сайт ставить. Рано или поздно где-то чего-то поменяете так, что всё перекосит и поедет.
Не забывайте, что это именно урок, а не модуль для ленивых.
единственное меню, которое нормально отобразилось. Спасибо вам)
Не мне, а CSSPlay
Когда в коде css меняю стиль рамки (мне нужно, чтобы не было рамки, соответственно пишу border: none;) в firefox-е начинает плохо работать. Меню октрывается , но когда хочу перенести мышь на подразделы, меню иногда пропадает, и нажать на подразделы получается не сразу. Иногда работает, иногда нет, не пойму почему. Но когда , например, пишу border: 1px solid white; все четко работает. Как решить эту проблему? мне рамки не нужны. Помогите, пожалуйста.
Если убираете рамку у ссылок, нужно уменьшить значение
topу подменю.Большое спасибо!! Такая тривиальная ошибка, а я голову ломала…
Не за что.
отличный пример, вот только отображается меню корректно далеко не во всех браузерах, что же делать в таких случаях?
Блин я в css ybabuf не понимаю а так хочеться разобраться один ты видимо мне и помощник… пошел голову ломать))))
http://htmlbook.ru/samcss
А подскажите новичку, куда вставлять все эти файлы на сайт? – разметку, стили? Изначально у меня на сайте верстка табличная, как это с css срастить? помогите пожалуйста! я уже третий день борюсь!
Для новичка этот пример слишком сложен. Я уже писал выше:
Если вы не знаете CSS, то вставлять такое меню – это бомбу замедленного действия на сайт ставить. Рано или поздно где-то чего-то поменяете так, что всё перекосит и поедет.
Не забывайте, что это именно урок, а не модуль для ленивых.
и все же, как хотя бы совместить табличную и блочную верстку?
Таблицы и блоки различаются, мягко говоря, довольно условно. Всего-лишь умолчальным значением свойства display. Таблица может быть блоком, блок может быть таблицей, и они обои могут бысть строчными элементами. Пример конкретно этого меню, впихуетого в таблицы я уже приводил выше, но найти не могу. Стёрли, наверное. Приведу ещё раз: http://pravologia.ru
Спасибо за меню и пример — давно ищу такого типа меню и вот наконец, получилось, и в IE6 работает. Но почему-то в Опере и Мозилле меню просто не видно. В чем может быть причина? Я не большой специалист. В последнее время со всеми меню горизонтальными выпадающими было все наоборот: работали везде, кроме IE6.
Должно работать и в Opera и в FF.
Меню работает, удалось изменить цвет, размеры ячеек. И даже валидатор не ругается. Спасибо! И за ссылку на сайт, где оригинал — тоже спасибо!
меню хорошее))) Вот только вопрос — как убрать пробелы между выпадами?
как сделать чтобы основное меню было узким, а всплывающее разных размеров. Например меню в форме алфавита, и при наведении на букву всплывает меню с разделами на эту букву
Прописать соответствующие параметры в таблице стилей.
http://ffar-test.ucoz.ua/
Помогите плиз!
Не работает в IE 8… (в остальных IE не пробовал) прочие браузеры без проблем…
и еще мож кто поможет, при сильном уменьшении начинает делить на 2 строчки… в FF и Chrom (Opera & IE не розрывает)
[if lte IE 6]
Может дело в этом?
…ноль во всем, что касается создания сайта, все монтировала с помощью программы Dreamwave…в основе таблица…проблема в том, что ячейка «Наша мастерская» работает сейчас просто как img, со ссылкой на страницу «услуги» и только там развернутое меню.. а хотелось бы — pop up menu…программа предлагает javascript…но это нежелательно…а ваш вариант — попробовала разместить внутри ячейки таблицы — заголовок есть и реагирует на курсор, но меню не выплывает
Вообще, всплывание меню — это просто видимость объекта, родитель которого под курсором. Если родитель на курсор реагирует — косяк в видимости. Но это навскидку.
Как-то на кофейной гуще гадать сложно. Код бы посмотреть…
Вот этот сайт http://www.kushetka.latel.lv пока пришлось загрузить с помощью Javascript …оно работает…просто гложат сомнения по поводу везде ли работает…:)…но все равно спасибо
Я когда домен увидел, мне показалось, что песец. Сходил на сайт. Оказалось, что не казалось.
Собственно всё решается кодом
.menu:hover li
{
display:block;
}
menu — это класс надписи, hover — это она в состоянии наведённого на неё курсора. li — это тег субобъекта.
Спасибо…с точки зрения профи, наверное — писец….Вам виднее:) в общем и целом другое решение ,этого сайта — лаконичнее и корректнее наверное смогут предложить профи…заработаем — обратимся
Лаконичное решение предложено выше.
Кстати, в современных условиях оно стало ещё более лаконичным, поскольку от поддержки ИЕ6 уже давно все отказались. И суть этого решения сводится к такой простой вещи, как псевдокласс hover. Любой элемент под курсором принадлежит этому псевдоклассу. Дальше, как я уже описал: если подэлемент класса menu невидим, а поделемент класса menu:hover видим, то и появляется вот такой эффект всплывающего меню.
Класс спасибо искал долго что то подобное и вот нашел сделал у себя на сайте не много изменив css
Спасибо за меню…У Вас в примере показано усложненное меню. Меня заинтересовало именно оно. Подскажите, пожалуйста, что нужно прописать в dropdown_ie, чтобы заработало в IE6.
Спасибо за меню, все работает. Только проблема в том, что когда это меню вставляешь в таблицу, оно работать в ИЕ 6 перестает. Такой вопрос уже задавали, но ответа так и не было. Помогите, пожалуйста…
Красивое а главное понятное меню без лишних наворотов. А скажите можно ли подменю зделать округлыми и как?
У меня в блоке меню на главной странице меню видно, а при переходе на другие странице само меню пропадает. Подскажите, что я сделал не так.
Спасибо!
Большое спасибо, очень полезно.
А как будут выглядеть стили из примера? С подменю?
Я хотел примерно такое меню, долго рылся, сначала ваше поставил, но не мог дизайн подстроить, а затем наткнулся на сайтик, там очень популярно расписано, просто скопировал код и ок. Но Вам все равно спасибо
меню для сайта с комментариями
Народ помогите не знаю куда ставить CSS код на Narod.ru (и можно ли вообще) Заранее спасибо
Тут код css
СОВЕТ :
вы сначала опробуйте ваше меню в разных браузерах, потом морочите людям яйца
Вообще-то везде опробовано, включая нихром и сишный експлорер, и везде всё норм. А если у кого-то руки не к плечам привинчены, то это сугубо его сугубо личная проблема.