Выпадающее меню без Javascript

В этом посте я покажу вам как сделать выпадающее меню ограничиваясь только средствами 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. Для корректной работы меню необходимо указать тип документа.

Обсуждение:

  1. buger

    ммм очень интересное решение. Спасибо за наводку )

  2. pepelsbey

    Беспринципное чёрт знает что, уж простите… Вместо одной строчки на jQuery или десяти на чистом JS, засовывать таблицу в ссылку.

    • Dexel

      А ты сколько файлов библиотек подвешиваешь, при подключении jQuery ?

  3. здорово.
    особенно понравилась фишка с выпадением крайнего-правого под-под-меню влево :) хз, насколько это применим, но забавно :)

    в общем, — в избранное.

  4. Prestige

    Очень хороший прием. Давно его использую. Есть одно только неудобство: нельзя поставить таймаут, подменю изчезает сразу после того как отведешь мышь, что не совсем удобно.

  5. Alex

    pepelsbey, безусловно таблица в ссылке это что называется без комментариев. Но опять же это только для 6-го IE.

  6. pepelsbey

    Я предпочитаю не гадить в документ, сохраняя его идентичность. Весь мусор в ie.css…

  7. рано я похвалил: невозможны словосочетания в подпунктах

    и неплохо бы добавить один пункт без выпадения:

    <li><a class="hide" href="">Глагне</a>
    <!—[if lte IE 6]>
    <a href="">Глагне</a>
    <![endif]—>
    </li>

    в ближайшее время сам напишу пример для горизонтальной менюхи (размещу у себя в блоге)

  8. Alex

    Николай, оставьте потом в комментариях ссылку на ваш пример.

  9. Panya

    >> cssplay

    Ресурс, безусловно, заслуживает места в закладках, но методы используемые там, сильно экспериментальны и во многих случаях ненадёжны (конечно, во многом из-за IE), на мой взгляд, примеры с этого сайта служат лишь демонстрацией мощи css.

  10. osago

    Менюшки конечно прикольные, но по моему сейчас это уже не модно!

    • Александр

      Тут описывается методика, а оформление дело личное.

  11. Vladimir

    >>> Беспринципное чёрт знает что, уж простите…
    Pepelsbey, как видите, не я один такой :-)

    >>> в ближайшее время сам напишу пример для горизонтальной менюхи
    Николай, Вы что-то подобное имеете в виду?

    >>> во многих случаях ненадёжны
    Если «хакать с умом» (с), то всё отлично. Ведь большинство хаков рассчитаны на IE6, а с ним либо условные комментарии, либо star html.

  12. Ксюша

    Большущее спасибо, а я тормозила дизайн прибегая к яве. С таким вариантом сайт значительно быстрее грузится, да и поисковики не будут спотыкаться о ява-код, спасибо еще раз!

  13. Владимир

    Приветствую.
    Хорошее меню. Очень. НО, есть один момент.
    Когда я вытягиваю его (несколько разделов),
    то разделы попадают на другую строчку.
    Это нормально. Но когда раскрывается подраздел,
    то первая строчка подраздела скрывается (не показывается)
    за основным (заглавным) разделом, на который она наложена при смещении.
    Как бы это прописать, чтоб исправить?

  14. Владимир

    Да, можно еще обнаглеть? Не тудно ли выслать вот эту форму
    оставления комментария? Или может урок по этой теме где есть?

  15. Миша

    Незнаю как у вас , но у меня это меню не работает, может оно только под определённые браузеры,
    тогда оно бесполезно.

  16. Alex

    Проверял в IE6 7, Opera, Safari, FF. В этих браузерах работает.

  17. Deni3

    Меню хорошо, но минус в том, что все поля одного размера, и выпадающие поля нельзя варьировать по размеру (когда например в пункте меню «Продукция» есть подпункт «Стандартная линейка телескопических цилиндров»).

  18. rekx

    скажите как сохранить фон и text-decoration (hover) ссылки меню, в то время как я буду «гулять» по выпавшему подменю, т.е что бы фон и подчеркивание, которые происходят при наведение мышки не пропадали когда переходишь на выпавшее меню?

  19. Alex

    rekx, по-моему в этом примере именно так и происходит.

  20. rekx

    Alex, а что именно за это отвечает?

  21. Люба

    Добрый день! Использую решение на своем сайте, очень нравится, НО!
    ИЕ 6 не дается ни под каким видом: квадратики главных пунктов почему-то дублируются из-за условных комментариев, а меню не выпадает.
    Что показательно, пример по ссылке работает отменно, когда же я сохраняю прямо из него html+css, этот же код на моем компьютере опять глючит по прежнему. Чего я недопонимаю, и как заставить все это работать под ИЕ6?
    Заранее огромное спасибо за ответ!

  22. rekx

    кто знает как сделать так, чтобы меню всегда выпадало в левом краю?

  23. Alex

    rekx, я не совсем понимаю что у вас не получается. За формление пунктов при наведении отвечают css свойства и офомление это остается активным при перемещении по выпадающему меню. Что значит, чтобы меню выпадало в левом краю?

    Люба, проверьте внимательно. Все ли вы файлы скопировали?

  24. rekx

    Alex, меню выпадает всегда строго под своим разделом, а если выпадающее меню сделать шире, и тогда пункты в нем благодаря float:left; выстраиваются в строчку, вот тут и нужно чтобы это подменю всегда было на одном месте… т.е его нужно привязать к первой ссылки главного меню…

  25. Люба

    Да, конечно, я скопировала все, что приведено в инструкции (html и подключенный к нему css) — вот мой набросок http://forcasey.kolosovska.com/
    В ФФ, ИЕ7, Опере все отлично, ИЕ6 дублирует основные пункты меню и не оно не выпадает (

  26. Alex

    Люба, не вижу в вашем примере стилей для IE6

  27. Люба

    2ALEX
    Согласна, ошибалась. Стили подключила, все работает, но не до конца, — по причине того, что мой шаблон сверстан процентами. Не могу установить ширину для выпадающих блоков 100% относительно ширины основных пунктов меню (как это и реализовано под другие браузеры), не подскажете, как это можно сделать?
    Обновленный пример моего шаблона снова находится тут:
    http://forcasey.kolosovska.com/

  28. vladimir

    появился вопрос с вставкой меню в сложные макеты. Если конструкцию поместить в таблицу, то под IE6 перестает работать. Есть какое-нить лекарство? или все же JS нас спасет?

  29. Serj

    Ребят, такая проблема, ставил это меню на движок, на ИЕ работает не правильно, основные разделы меню посвечивает как надо, а выпадающего меню нет, на остальных браузерах работает нормально, скажите пожалуйста, в чем может быть проблема?

  30. Alex

    Serj, для начала проверьте все ли файлы из примера вы скопировали и не конфликтуют ли существующие css свойства с теми, что в примере.

    Уважаемые читатели данный пример я привёл лишь для того чтобы показать, что есть возможность создания подобного меню без использования javascript. Пожалуйста используйте данный подход лишь в исключительных случаях (заказчик требует и т.п.).

  31. Serj

    Alex, в том то и дело что шеф требует без ява реализовать меню.
    Css не конфликтует, на css в движке только шрифты указанны.
    Возникло подозрение что дело в таблицах.
    Есть еще какие нибудь соображения?
    Очень рассчитываю на помощь

    • Alex

      Serj, без примера тяжело вам что-то ответить. Дайте ссылку и возможно кто-то поможет. Если будет время я также взгляну.

  32. Serj

    Alex, ага, чуть позже обязательно, сейчас пока локально сайт находится
    Спасибо

  33. Nigel

    Люди помогите, пожайлуста, очень нужно к диплому менюшку такую сделать, с CSS не очень хорошо знаком, вобщем попытался стилизовать немного меню под свои задачи. в результате в опере 9.25 работает, а в эксплорере нет, если может кто помочь- буду очень благодарен.
    вот то, что получилось
    http://files.mail.ru/CXMY3L

  34. Nigel

    блин, долго мучался, в результате сделал менюшки разноцветнык, все везде прекрасно работает… но вот одно но, в ие 6 и 8 тоже когда ставишь меню в таблицу- перестает работать, ставишь между двух таблиц, тоже перестает работать, удаляешь таблицы- снова работает..

    • Alex

      Посмотрел ваш пример и обнаружил что отсутствуют таблицы для ie в условных комментариях, дальше смотреть не стал. Пожалуйста внимательно перенесите весь код примера к себе и уже потом делайте изменения.

  35. Serj

    Ребят, снова со своей проблемой, сайт загрузил на виртуальный хостинг, адрес сайта http://foodsgoods.ru/
    А проблема все та же, не работает в ИЕ
    Помогите пожалуйста

    • Alex

      У вас link со стилями для меню прописан внутри body, перенестие в head.

      • Serj

        Спасибо большое за совет, перенес линк со стилями в хед, но все равно не работает(

        • Alex

          :) Для начала бывает лучше избавиться от ошибок.

          Поменял доктайп на XHTML 1.0 Strict, заработало. И еще пропишите значение ширины у основных ссылок, сейчас просто число.

          • Serj

            Ура! Зароботало!!! Спасибо большое!!

            Глупый вопрос, а где значение ширины прописать? в css файлах?

  36. Alex

    Да, в стилях для IE. У вас сейчас вроде просто 208.

    • Serj

      да, была такая ошибка, а для ие ваще 105 стояло))
      Теперь все работает, спасибо!

      ///

      Так вот, товарищи, на движках это меню тоже работает!!!

  37. Adm

    Безусловно, это здорово. А вот не скажете ли, можно ли в главном меню использовать не текстовые ссылки, а картинки? Причем разные для случаев наведенной и ненаведенной на этот пункт мышки? Т.е. чтобы меню внешне выглядело как вот тут http://aquahobbi.ru
    Или такое делается только на Яве?

    • Alex

      Можно, если картинки использовать в качестве фона у ссылок.

  38. Serj

    Такая проблема, при установки на фон заголовка выпадающего меню, меню перестает работать в IE 6, то есть заголовок цвет меняет, а меню не выпадает. С чем это может быть связанно?

    • Alex

      Фон у пунктов не влияет на работоспособность самого меню. Видимо ошибка где-то ещё.

  39. Serj

    Извиняюсь, при установке изображения на фон

  40. assel

    «Посмотреть пример (в примере присутствует немного усложненное меню)»

    Можете плз добавить код для этого меню, просто срочно нужно меню с 2-мя выплывающими подменю.
    Никак не могу сделать, чтобы было как у вас в примере…

    • Alex

      Скопируйте исходный код в примере.

      • assel

        Спасибо большое! Че-то сразу не догодалась)))

  41. Роман

    Подскажите что делать??(((( Пытаюсь сделать менюшки с подменю, а подменю(например на странице которую приведу в меню НПЦ(А-О), в пункте А подменюшки уже появились и находятся по основным выпадающем меню) что не так? почему не получается? может в css что поменять? http://gi-ascor.ucoz.ru/index/0-21

    • Alex

      Роман что конкретно у вас не работает и в каком браузере.

  42. Роман

    у меня FireFox, подменю «А» ( в примере) имеет в себе еще подменю, которое (если присмотреться) уже открыто. ну короче при наведении на «А» ничего не происходит, а должна вылазить еще одно меню! код css был взят с простого меню, а само меню с вашего примера(где оно усложнено) в чем проблема? что не так?

    • Alex

      Попробуйте для начала привети в порядок код страницы, сейчас там каша какая-то. А по существу не вижу стилей для меню.

  43. Роман

    код страницы в порядке!!! это Ucoz… стиль подключен.. menu.css!!! только стиль для простого меню! а не для усложненного как в примере вашем!!

    • Alex

      Для меню третьего уровня которое должно появляться сбоку нужно дописать

      .menu ul li:hover ul li:hover ul.left {left:-105px}

      В другую сторону соответственно

      .menu ul li:hover ul li:hover ul.right {right:-105px}

  44. Андрей

    Благодарю! это первый пример таких меню на CSS, который не глючит)

  45. Ирина

    Спасибо огромное за статью. Сайт на движке. Попробовала только что поставить такое же меню себе. Вроде бы работает под мозиллой, но в эксплорере почему-то получилось 2 раздела один над другим. Может быть, я сделала что-нибудь не так — я только учусь… Буду сейчас разбираться…

  46. Ирина

    Здравствуйте.
    Спасибо огромное за статью! Именно это и искала.

    Ребята, подскажите, пожалуйста, как можно расширить подпункты в меню для нескольких слов?
    Заранее спасибо.

  47. maus

    спасибо за код, но в ИЕ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 по аналогии:

    • Alex

      А вы ссылку не видете в начале поста? Да и кажется мне, что если с переведённым примером у многих возникают затруднения, то что уж говорить об оригинале .

  48. Химера

    да, спасибо очень хорошее решение. Такое меню хорошо подставлять пользователям, которые отключают в браузере показ явы. Респект)

  49. Ирина

    Ещё раз спасибо огромное за статью!
    Всё работает, ура!

  50. Sergey

    Сорри — это у меня просто голова нехотит работать)

  51. Всеволод

    Алекс, спасибо за идею, в меню все работает,но рисунки на сайте, отображаются с промежутками с друг другом ,когда я убираю из кода страницы промежутков не остается,но при этом меню не работает в IE, помогите, что сделать?

  52. Алексей

    Добрый день …. можно попросить вас скинуть гововый пример мне на почту. Я не программист может что-то делаю не так. Копирую текст а он сбивается в большую кучу и явно не распознается как команды, а как тект выводится на экран. Буду очень благодарен.

  53. ZeNkoT

    В моем случае для корректного отображения в Мозилле мне пришлось тэг 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
    }

  54. Эльдар

    А это меню будет раскрываться поверх текста расположенного ниже?

  55. daemon

    Да все будет работать — уже проверено временем. Стабильно показывается пользователям без яваскрипта (такие еще встречаются). А приятель один мой модификацию сделал — у него меню теперь открывается вправо и влево, в зависимости от необходимости. И тоже все работает. Alex, спасибо за прекрасную вещь.

  56. daemon

    а я, кстати, его к Joomla прикрутил. обращайтесь, если надо

  57. CP

    отлично работает во всех браузерах!

  58. Alex

    А подскажите пожалуйста, как сделать чтоб как у вас в примере было, из под меню еще подменю в бок вылезает? у меня что то не как не получается как надо код строить?

    И куда вводить настройки для IE6?

    • Alex

      Посмотрите код примера и сделайте также.

  59. skryisli

    В шестом эксплорере ссылки в подменю не работают. Именно из-за таблиц. Всё перекрывается первой ссылкой. Как это лечить?

    • Alex

      В примере всё должно быть нормально.

      • skryisli

        А демонстрацию можно? А то у меня ссылка в меню распространяется на все подпункты. Провинтил в екслорере, получется:

        <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 для обеих ссылок.

        • Alex

          Сслыка на пример в конце поста есть.

          • skryisli

            Вот как раз этот-то момент там и не освещён. :)
            Шестой осёл — очень больная тема. Единственное животное, считающее, что ховерами бываю только ссылки, а фиксед — вообще ненужная в хозяйстве дрянь. Впрочем, если сверстать шаблон чисто под шестёрку, основательно вычистив стили, то ссылки становятся кликабельными (в смысле куда надо ведут), но в строке состояния упорно показывается ссылка, указанная в голове. :(

          • Alex

            К сожалению не могу сейчас проверить. Я б вам посоветовал вообще не использовать это меню. Думаю сейчас ie6 не стоит того. Используйте небольшой js для него.

  60. Артем

    Народ а подскажите как в меню цвет поменять на нужный мне? как задать страницы при нажатии на переход на поб менюшки.? и как местоположение поменять. спасибо зарание

    • skryisli

      В файлах css. color:; background:; А вообще не рекомендую юзать чужие примеры, не понимая об чём они вообще.

  61. Евгений

    я только начинаю, пока много чего не знаю — чем отличается по коду горизонтальное меню от веритикального?

  62. Дмитрий

    как сделать выпадающие меню из слов, разбросанных по всему сайту?

    • Alex

      Position:absolute вам в помощь.

  63. Дмитрий

    да спасибо но чрезвычайно тяжело наверное енто сделать

    спасибо

  64. mio

    спасибо меню просто класс. Поисковики будут довольны

  65. fara

    менюшка почему то очень криво стоит в опере, во всех остальных браузерах нормально

  66. fara

    даже не так — при назначении «margin-top» когда заходит за непонятные границы начинает исчезать по мере опускания

  67. fara

    я не говорю что ее не видно, просто по соотношению ко всем браузерам показывает криво — лично у меня только в опере.

  68. Ильяс Нурутдинов

    А как сделать так, чтобы вся эта конструкция растягивалась на всю длину экрана?

    • skryisli

      Косячный коммент ушёл. Делается достаточно просто: меню — таблица шириной 100%. Каждый пункт — резиновая ячейка класса «меню». Для не эксплорера можно посмотреть здесь:юридический портал «правология».
      Реализация для осла выше приведена, достаточно просто перенести на проект. Про таблицы не забываем. Осёл весьма своеобразен в своём представлении о списках вообще и их свойстве hover в частности.

  69. Аня

    огромное спасибо! правда пока еще не получилось… но я стараюсь

  70. volk98

    во-первых — спасибо за данный вариант реализации меню.
    я его внедрил в своем проекте, пока локально.
    проблема: я поместил данное меню в фрейм высотой в одну строку. под этим фреймом размещен другой фрейм с контентом, который не дает меню раскрыться вниз.
    вопрос: как сделать, чтобы нижний фрейм не закрывал меню?
    Спасибо.

    • skryisli

      Во-первых, это не фрейм с контентом не даёт меню раскрыться, а меню раскрывается в собственном фрейме, но вы этого не видите.
      Во-вторых, чтобы это меню работало как надо забудьте вообще про существование фреймов.

  71. volk98

    К сожалению отказаться от фреймов наверно не могу, т.к. каждый фрейм с меняющимся контентом, а меню предполагалось без изменений. Как победит данный вопрос?

    • skryisli

      К сожалению придётся. Не любят поисковики фреймов. Совсем не любят. Если вы хотите чтобы ваш сайт вообще индексировался, про фреймы придётся забыть. Про аякс аналогично. Это я в догонку вумному товарищу ниже.

      • sherza

        skryisli, не могу с вами согласиться насчет аякса. можно говорить о конкретных случаях неправильного использования технологии — тогда могут быть проблемы. Если грамотно подходить — все прекрасно индексируется, проверено. Если у вас действительно есть серьезные доводы против, мне было бы интересно узнать вашу точку зрения, только это, думаю, не стоит обсуждать в этой ленте комментариев

        • skryisli

          Я не видел ни одной, решённой с помощью аякса, задачи, которую нельзя было бы решить без него. Кроме того, клиент-сервер — это всегда клиент-сервер. Даже в асинхронном режиме аякс может здорово перекосить потоки ява-скрипта в браузере, если возникнут трудности со связью.
          Кроме того, большинство так называемых программистов аякс и знать не знают что он из себя представляет, пользуюясь чужими библиотеками, подгружая горы скрипта для выполнения элементарной задачи. Ещё куда ни шло, если свои, а то я смотрю со сторонних серверов грузить начали.
          И при этом, как я уже говорил, все эти задачи великолепно решаются и без аякса. Это далеко не единственный способ экономии трафика на вёрстке. Да и получения данных без перезагрузки, если на то пошло, тоже. Просто вокруг этой технологии поднята шумиха, которой аякс, как технология, совершенно не оправдывает на мой взгляд.

          • sherza

            skryisli, в ваших словах есть большая доля правды. Действительно, технология очень часто используется не по назначению и без понимания сути. Конечно, почти все поставленные задачи можно решить без аякса, конечно может влиять на индексацию асинхронная подгрузка контента с ключевиками. Но. У всего есть своя область применения. В этом и отличается опытный разработчик от любителя — не пытается использовать как можно больше «модерновых» технологий, а выбирает, что в каждом конкретном случае наиболее оптимально для решения поставленной задачи. Я была рада услышать ваше мнение, благодарю

  72. sherza

    volk98, я не против помочь, только надо знать, в чем конкретно заключается задача. Ваше решение с фреймами мне кажется, скажем так, оригинальным, возможно, удасться найти более простое решение. Насчет меняющегося контента без перезагрузки страницы — аякс изобрели не вчера ;)
    Пишите: sherza@psytronica.ru

  73. Alla

    Почему-то меню не получилось. Вернее подменю не скрывается и не выпадает. Помогите новичку.

    • volk98

      сделайте проще. откройте данный пример с меню в браузере, потом по правой кнопке просмотр кода, скопируйте его в Ваш html файл. В html файле нужно изменить ссылку на имя Вашего css файла. Сам CSS код можно скопировать с этой страницы. Внимание! в данном css коде, не для IE, ошибка в строчке, где width:212px; нужно 212 заменить на большее значение, иначе меню получится 2х2.

  74. Денис

    Если меню сделать картинками-ссылками и в стили добавить
    .menu a img {border:0px;}
    то меню выпадает через раз.
    Как лечить?

  75. Денис

    прошу прощения, я имел ввиду
    .menu a img {border: none;}

  76. Денис

    А всё. Разобрался, извините! В css ошибку исправил у себя!
    Спасибо большое за меню. Понравился способ!

  77. Денис

    Не помогло! Проблема осталась!

    • skryisli

      Возможно проблема в подгрузке картинок. А вообще надо смотреть пример.

  78. Игорь

    Скажите пожалуйста!! как подключить дополнительные стили .css для IE 6 с помощью условных комментариев?????? Очень рассчитываю на вашу помощь!!
    Спасибо.

  79. Игорь

    Все) додумался сам, спасибо за статью! мне очень пригодилась.

  80. Игорь

    не знал КУДА именно их надо вставить)

  81. Ильмир

    Спасибо за урок, но есть ли более симпотичный стиль?

    • skryisli

      Нарисуйте какой вашей душе угодно. Если с этим проблема, то лучше обратитесь к специалисту. Если вы не знаете CSS, то вставлять такое меню — это бомбу замедленного действия на сайт ставить. Рано или поздно где-то чего-то поменяете так, что всё перекосит и поедет.
      Не забывайте, что это именно урок, а не модуль для ленивых.

  82. baksya

    единственное меню, которое нормально отобразилось. Спасибо вам)

  83. Ани

    Когда в коде css меняю стиль рамки (мне нужно, чтобы не было рамки, соответственно пишу border: none;) в firefox-е начинает плохо работать. Меню октрывается , но когда хочу перенести мышь на подразделы, меню иногда пропадает, и нажать на подразделы получается не сразу. Иногда работает, иногда нет, не пойму почему. Но когда , например, пишу border: 1px solid white; все четко работает. Как решить эту проблему? мне рамки не нужны. Помогите, пожалуйста.

    • Alex

      Если убираете рамку у ссылок, нужно уменьшить значение top у подменю.

      • Ани

        Большое спасибо!! Такая тривиальная ошибка, а я голову ломала…

  84. guest

    отличный пример, вот только отображается меню корректно далеко не во всех браузерах, что же делать в таких случаях?

  85. Петр (falkovsky)

    Блин я в css ybabuf не понимаю а так хочеться разобраться один ты видимо мне и помощник… пошел голову ломать))))

  86. goodvin

    А подскажите новичку, куда вставлять все эти файлы на сайт? – разметку, стили? Изначально у меня на сайте верстка табличная, как это с css срастить? помогите пожалуйста! я уже третий день борюсь!

    • skryisli

      Для новичка этот пример слишком сложен. Я уже писал выше:
      Если вы не знаете CSS, то вставлять такое меню – это бомбу замедленного действия на сайт ставить. Рано или поздно где-то чего-то поменяете так, что всё перекосит и поедет.

      Не забывайте, что это именно урок, а не модуль для ленивых.

  87. goodvina

    и все же, как хотя бы совместить табличную и блочную верстку?

    • skryisli

      Таблицы и блоки различаются, мягко говоря, довольно условно. Всего-лишь умолчальным значением свойства display. Таблица может быть блоком, блок может быть таблицей, и они обои могут бысть строчными элементами. Пример конкретно этого меню, впихуетого в таблицы я уже приводил выше, но найти не могу. Стёрли, наверное. Приведу ещё раз: http://pravologia.ru

  88. olga

    Спасибо за меню и пример — давно ищу такого типа меню и вот наконец, получилось, и в IE6 работает. Но почему-то в Опере и Мозилле меню просто не видно. В чем может быть причина? Я не большой специалист. В последнее время со всеми меню горизонтальными выпадающими было все наоборот: работали везде, кроме IE6.

    • Alex

      Должно работать и в Opera и в FF.

  89. olga

    Меню работает, удалось изменить цвет, размеры ячеек. И даже валидатор не ругается. Спасибо! И за ссылку на сайт, где оригинал — тоже спасибо!

  90. stacy

    меню хорошее))) Вот только вопрос — как убрать пробелы между выпадами?

  91. Дмитрий

    как сделать чтобы основное меню было узким, а всплывающее разных размеров. Например меню в форме алфавита, и при наведении на букву всплывает меню с разделами на эту букву

    • skryisli

      Прописать соответствующие параметры в таблице стилей.

  92. shurik

    http://ffar-test.ucoz.ua/
    Помогите плиз!
    Не работает в IE 8… (в остальных IE не пробовал) прочие браузеры без проблем…
    и еще мож кто поможет, при сильном уменьшении начинает делить на 2 строчки… в FF и Chrom (Opera & IE не розрывает)

    • skryisli

      [if lte IE 6]
      Может дело в этом?
      :)

  93. Lissa

    …ноль во всем, что касается создания сайта, все монтировала с помощью программы Dreamwave…в основе таблица…проблема в том, что ячейка «Наша мастерская» работает сейчас просто как img, со ссылкой на страницу «услуги» и только там развернутое меню.. а хотелось бы — pop up menu…программа предлагает javascript…но это нежелательно…а ваш вариант — попробовала разместить внутри ячейки таблицы — заголовок есть и реагирует на курсор, но меню не выплывает

    • skryisli

      Вообще, всплывание меню — это просто видимость объекта, родитель которого под курсором. Если родитель на курсор реагирует — косяк в видимости. Но это навскидку.
      Как-то на кофейной гуще гадать сложно. Код бы посмотреть…

      • Lissa

        Вот этот сайт http://www.kushetka.latel.lv пока пришлось загрузить с помощью Javascript …оно работает…просто гложат сомнения по поводу везде ли работает…:)…но все равно спасибо

        • skryisli

          Я когда домен увидел, мне показалось, что песец. Сходил на сайт. Оказалось, что не казалось. :(
          Собственно всё решается кодом
          .menu:hover li
          {
          display:block;
          }
          menu — это класс надписи, hover — это она в состоянии наведённого на неё курсора. li — это тег субобъекта.

          • Lissa

            Спасибо…с точки зрения профи, наверное — писец….Вам виднее:) в общем и целом другое решение ,этого сайта — лаконичнее и корректнее наверное смогут предложить профи…заработаем — обратимся :)

          • skryisli

            Лаконичное решение предложено выше. :)
            Кстати, в современных условиях оно стало ещё более лаконичным, поскольку от поддержки ИЕ6 уже давно все отказались. И суть этого решения сводится к такой простой вещи, как псевдокласс hover. Любой элемент под курсором принадлежит этому псевдоклассу. Дальше, как я уже описал: если подэлемент класса menu невидим, а поделемент класса menu:hover видим, то и появляется вот такой эффект всплывающего меню.

  94. Павел

    Класс спасибо искал долго что то подобное и вот нашел сделал у себя на сайте не много изменив css

  95. Елена

    Спасибо за меню…У Вас в примере показано усложненное меню. Меня заинтересовало именно оно. Подскажите, пожалуйста, что нужно прописать в dropdown_ie, чтобы заработало в IE6.

  96. Ульяна

    Спасибо за меню, все работает. Только проблема в том, что когда это меню вставляешь в таблицу, оно работать в ИЕ 6 перестает. Такой вопрос уже задавали, но ответа так и не было. Помогите, пожалуйста…

  97. Павел

    Красивое а главное понятное меню без лишних наворотов. А скажите можно ли подменю зделать округлыми и как?

  98. Виктор

    У меня в блоке меню на главной странице меню видно, а при переходе на другие странице само меню пропадает. Подскажите, что я сделал не так.

  99. Александр

    Большое спасибо, очень полезно.

  100. Алексей

    А как будут выглядеть стили из примера? С подменю?

  101. антон

    Я хотел примерно такое меню, долго рылся, сначала ваше поставил, но не мог дизайн подстроить, а затем наткнулся на сайтик, там очень популярно расписано, просто скопировал код и ок. Но Вам все равно спасибо
    меню для сайта с комментариями

  102. Кит

    Народ помогите не знаю куда ставить CSS код на Narod.ru (и можно ли вообще) Заранее спасибо

  103. Дуо

    СОВЕТ :

    вы сначала опробуйте ваше меню в разных браузерах, потом морочите людям яйца

    • skryisli

      Вообще-то везде опробовано, включая нихром и сишный експлорер, и везде всё норм. А если у кого-то руки не к плечам привинчены, то это сугубо его сугубо личная проблема.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*