< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Верстка Html5, Css3 » Горизонтальное многоуровневое меню на css с эффектом анимации

Горизонтальное многоуровневое меню на css с эффектом анимации

Горизонтальное многоуровневое меню на css с эффектом анимации

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

Я уже писал о том, как можно выровнять горизонтальное меню по центру. В данной статье рассматривались варианты как с выпадающими списками, так и без них. Здесь же я решил пойти дальше и создать горизонтальное многоуровневое меню на css с эффектом анимации, которое также будет центроваться по центру. Данная статья является как бы логическим продолжением.

Html-код:

<div id="mainmenu">
        <ul>
            <!-- Пункт меню 1 -->
            <li class="parent"><a href="#">Пункт 1</a>
                <ul>
                    <li><a href="#">подпункт 1.1</a></li>
                    <li class="parent"><a href="#">подпункт 1.2</a>
                        <ul>
                            <li class="parent"><a href="#"> подпункт 1.2.1 </a>
                                <ul>
                                    <li><a href="#"> подпункт 1.2.1.1 </a></li>
                                    <li class="parent"><a href="#"> подпункт 1.2.1.2</a>
                                        <ul>
                                            <li><a href="#"> подпункт 1.2.1.2.1 </a></li>
                                            <li><a href="#"> подпункт 1.2.1.2.2</a></li>
                                            <li><a href="#"> подпункт 1.2.1.2.3</a></li>
                                            <li><a href="#"> подпункт 1.2.1.2.4</a></li>
                                            <li><a href="#"> подпункт 1.2.1.2.5</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#"> подпункт 1.2.1.3</a></li>
                                    <li><a href="#"> подпункт 1.2.1.4</a></li>
                                    <li><a href="#"> подпункт 1.2.1.5</a></li>
                                </ul>
                            </li>
                            <li class="parent"><a href="#"> подпункт 1.2.2</a>
                                <ul>
                                    <li><a href="#"> подпункт 1.2.2.1 </a></li>
                                    <li><a href="#"> подпункт 1.2.2.2 </a></li>
                                    <li><a href="#"> подпункт 1.2.2.3 </a></li>
                                    <li><a href="#"> подпункт 1.2.2.4 </a></li>
                                    <li><a href="#"> подпункт 1.2.2.5 </a></li>
                                </ul>
                            </li>
                            <li><a href="#"> подпункт 1.2.3</a></li>
                            <li><a href="#"> подпункт 1.2.4</a></li>
                            <li class="parent"><a href="#"> подпункт 1.2.5</a>
                                <ul>
                                    <li><a href="#"> подпункт 1.2.5.1 </a></li>
                                    <li><a href="#"> подпункт 1.2.5.2</a></li>
                                    <li><a href="#"> подпункт 1.2.5.3</a></li>
                                    <li><a href="#"> подпункт 1.2.5.4</a></li>
                                    <li><a href="#"> подпункт 1.2.5.5</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="parent"><a href="#">подпункт 1.3</a>
                        <ul>
                            <li><a href="#"> подпункт 1.3.1 </a></li>
                            <li><a href="#"> подпункт 1.3.2 </a></li>
                            <li><a href="#"> подпункт 1.3.3 </a></li>
                            <li><a href="#"> подпункт 1.3.4 </a></li>
                            <li><a href="#"> подпункт 1.3.5 </a></li>
                        </ul>
                    </li>
                    <li><a href="#">подпункт 1.4</a></li>
                    <li class="parent"><a href="#">подпункт 1.5</a>
                        <ul>
                            <li><a href="#">подпункт 1.5.1 </a></li>
                            <li><a href="#"> подпункт 1.5.2</a></li>
                            <li><a href="#"> подпункт 1.5.3</a></li>
                            <li><a href="#"> подпункт 1.5.4</a></li>
                            <li><a href="#"> подпункт 1.5.5</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!-- Пункт меню 2 -->
            <li class="parent"><a href="#">Пункт 2</a>
                <ul>
                    <li class="parent"><a href="#">подпункт 2.1</a>
                        <ul>
                            <li class="parent"><a href="#"> подпункт 2.1.1 </a>
                                <ul>
                                    <li><a href="#"> подпункт 2.2.1.1 </a></li>
                                    <li><a href="#"> подпункт 2.2.2.2 </a></li>
                                    <li><a href="#"> подпункт 2.2.3.3 </a></li>
                                    <li><a href="#"> подпункт 2.2.4.4 </a></li>
                                    <li><a href="#"> подпункт 2.2.5.5 </a></li>
                                </ul>
                            </li>
                            <li><a href="#"> подпункт 2.1.2</a></li>
                            <li><a href="#"> подпункт 2.1.3</a></li>
                            <li><a href="#"> подпункт 2.1.4</a></li>
                            <li><a href="#"> подпункт 2.1.5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">подпункт 2.2</a></li>
                    <li><a href="#">подпункт 2.3</a></li>
                    <li><a href="#">подпункт 2.4</a></li>
                    <li><a href="#">Длинный подпункт, длинный подпункт</a></li>
                </ul>
            </li>
            <!-- Пункт меню 3 -->
            <li class="parent"><a href="#">Длинный пункт меню 3</a>
                <ul>
                    <li class="parent"><a href="#">подпункт 3.1</a>
                        <ul>
                            <li><a href="#"> подпункт 3.1.1 </a></li>
                            <li><a href="#"> подпункт 3.1.2 </a></li>
                            <li><a href="#"> подпункт 3.1.3 </a></li>
                            <li><a href="#"> подпункт 3.1.4 </a></li>
                            <li><a href="#"> подпункт 3.1.5 </a></li>
                        </ul>
                    </li>
                    <li class="parent"><a href="#">подпункт 3.2</a>
                        <ul>
                            <li><a href="#"> подпункт 3.2.1 </a></li>
                            <li><a href="#"> подпункт 3.2.2 </a></li>
                            <li><a href="#"> подпункт 3.2.3 </a></li>
                            <li><a href="#"> подпункт 3.2.4 </a></li>
                            <li><a href="#"> подпункт 3.2.5 </a></li>
                        </ul>
                    </li>
                    <li><a href="#">подпункт 3.3</a></li>
                    <li><a href="#">подпункт 3.4</a></li>
                    <li><a href="#">подпункт 3.5</a></li>
                </ul>
            </li>
            <!-- Пункт меню 4 -->
            <li class="parent"><a href="#">Пункт 4</a>
                <ul>
                    <li class="parent"><a href="#">подпункт 4.1</a>
                        <ul>
                            <li><a href="#"> подпункт 4.1.1 </a></li>
                            <li><a href="#"> подпункт 4.1.2 </a></li>
                            <li><a href="#"> подпункт 4.1.3 </a></li>
                            <li><a href="#"> подпункт 4.1.4 </a></li>
                            <li><a href="#"> подпункт 4.1.5 </a></li>
                        </ul>
                    </li>
                    <li><a href="#">подпункт 4.2</a></li>
                    <li class="parent"><a href="#">подпункт 4.3</a>
                        <ul>
                            <li><a href="#"> подпункт 4.3.1 </a></li>
                            <li><a href="#"> подпункт 4.3.2 </a></li>
                            <li><a href="#"> подпункт 4.3.3 </a></li>
                            <li><a href="#"> подпункт 4.3.4 </a></li>
                            <li><a href="#"> подпункт 4.3.5 </a></li>
                        </ul>
                    </li>
                    <li><a href="#">подпункт 4.4</a></li>
                    <li><a href="#">подпункт 4.5</a></li>
                </ul>
            </li>
            <!-- Пункт меню 5 -->
            <li class="parent"><a href="#">Пункт 5</a>
                <ul>
                    <li class="parent"><a href="#">подпункт 5.1</a>
                        <ul>
                            <li><a href="#"> подпункт 5.1.1 </a></li>
                            <li><a href="#"> подпункт 5.1.2 </a></li>
                            <li><a href="#"> подпункт 5.1.3 </a></li>
                            <li><a href="#"> подпункт 5.1.4 </a></li>
                            <li><a href="#"> подпункт 5.1.5 </a></li>
                        </ul>
                    </li>
                    <li><a href="#">подпункт 5.2</a></li>
                    <li><a href="#">подпункт 5.3</a></li>
                    <li><a href="#">подпункт 5.4</a></li>
                    <li><a href="#">подпункт 5.5</a></li>
                </ul>
            </li>
        </ul>
        <!-- Конец списка -->
    </div>
    <!-- Конец блока #mainmenu -->

CSS-код:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*************************** Основные пункты **/

#mainmenu {
    position: relative;
    border: 1px solid #222;
    background-color: #111;
    background-image: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background-image: -webkit-linear-gradient(#444, #111);
    background-image: -o-linear-gradient(#444, #111);
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-border-radius: 6px;
    -ms-border-radius: 6px;
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    -o-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    -ms-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    height: 40px;
    margin: 50px auto;
    padding: 0;
    width: 960px;
    z-index: 10/* для отображения подпунктов поверх остальных блоков */
}

#mainmenu ul, /* сбрасываем поля и отступы у списков */
#mainmenu ul ul,
#mainmenu ul ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}
#mainmenu ul {
    clear: left;
    position: relative;
    right: 50%;
    height: 40px;
    float: right;
    text-align: center;
    font: 12px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
#mainmenu ul li {
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    -moz-box-shadow: 1px 0 0 #444;
    -o-box-shadow: 1px 0 0 #444;
    -ms-box-shadow: 1px 0 0 #444;
    -webkit-box-shadow: 1px 0 0 #444;
    position: relative;
    left: 50%;
    float: left;
    height: 39px;
}
#mainmenu ul li:last-child {
    border: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none
}
#mainmenu ul li a {
    display: block;
    color: #ccc;
    text-decoration: none;
    padding: 13px 25px
}
#mainmenu ul > li:hover > a {
    background-color: #0186BA;
    background-image: -moz-linear-gradient(#04acec, #0186ba);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background-image: -webkit-linear-gradient(#04acec, #0186ba);
    background-image: -o-linear-gradient(#04acec, #0186ba);
    background-image: linear-gradient(#04acec, #0186ba);
    color: #fafafa
}

/** Индикатор наличия подкатегорий верхнего уровня **/

#mainmenu > ul > li.parent > a::after {
    border-left: 1px solid #CCC;
    border-top: 1px solid #CCC;
    content: "";
    display: inline-block;
    vertical-align: top;
    margin: 4px 0 0 8px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
    height: 5px;
    width: 5px;
}

/*************************** Выпадающие подпункты **/

#mainmenu ul li ul {
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background: linear-gradient(#444, #111);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -webkit-border-radius: 3px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    line-height: 18px;
    top: 39px;
    font-size: 12px;
    margin-top: 20px;
    height: auto;
    min-width: 150px;
    width: 100%
}
#mainmenu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    -webkit-transition: margin 0.3s ease 0s;
       -moz-transition: margin 0.3s ease 0s;
         -o-transition: margin 0.3s ease 0s;
            transition: margin 0.3s ease 0s;
    margin: 0;
    z-index: 11;
}
#mainmenu ul li ul li {
    border: none;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -o-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    position: relative;
    left: 0;
    float: none;
    height: auto;
    text-align: left !important;
}
#mainmenu ul li ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#mainmenu ul li ul li a {
    padding: 10px 15px;
    border: none
}

/*************************** Выпадающие пункты второго уровня **/

#mainmenu ul li ul li ul {
    top: 0;
    left: 90%;
    margin: 0 0 0 20px;
    _margin: 0;
    /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
    -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
    -o-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
    -ms-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
    -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
}

/** Индикатор наличия подкатегорий 2 уровня **/

#mainmenu > ul > li ul li.parent > a::after {
    border-left: 1px solid #CCC;
    border-top: 1px solid #CCC;
    content: "";
    display: inline-block;
    vertical-align: top;
    margin: 7px 0px 0px 8px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
    height: 5px;
    width: 5px;
    float: right;
}

/********************** Стрелочки на подпунктах **/

#mainmenu ul ul li:first-child > a {
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
}
#mainmenu ul li > ul > li:first-child > a:before {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}
#mainmenu ul ul ul li:first-child a:before {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}
#mainmenu ul ul li:first-child a:hover:before {
    border-bottom-color: #04acec
}
#mainmenu ul ul ul li:first-child a:hover:before {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
}
#mainmenu ul ul li:last-child > a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
#mainmenu > ul > li.parent > ul > li:first-child > a::before {
    display: none;
}
#mainmenu > ul > li.parent > a::before {
    bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
    content: '';
    visibility: hidden;
    position: absolute;
    left: 50%;
    margin-left: -6px;
}
#mainmenu > ul > li.parent:hover > a::before {
    visibility: visible;
    -webkit-transition: all .5s ease .2s;
       -moz-transition: all .5s ease .2s;
         -o-transition: all .5s ease .2s;
            transition: all .5s ease .2s;
}

Комментировать особо не буду, скажу лишь только то, что данное меню будет корректно отображаться только в современных браузерах. Проверял во всех популярных браузерах последних версий: firefox, chrome, opera, safari, Internet Explorer 9.0 — все ок. Только вот в ИЕ 7 — 8 меню выглядит немного иначе и нет эффектов анимации. Но в целом ничего страшного нет. Оно и понятно, меню то ведь работает на css3, а данные версии браузера ИЕ 7 — 8 css3 не поддерживают.

Читайте также:  CSS анимация на сайте посредством библиотеки Animate.css

Почему именно на css3, а не, скажем, на jQuery с использованием картинок? Данный вариант я рассматривал, но вариант на чистом css мне нравится больше всего. Скорость работы намного быстрее.

Ну а на этом пока все. На связи был Заур Магомедов. Всем пока и подписываемся на обновления.

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (31 оценок, среднее: 2,94 из 5)
Загрузка...

Проверка орфографии

Система Orphus

183 комментариев к статье "Горизонтальное многоуровневое меню на css с эффектом анимации"

  • Oles Янв 17, 2014 в 3:19

    Большое спасибо за информацию 🙂

  • Роман Янв 15, 2014 в 22:50

    Здравствуйте, Заур! А подскажите, пожалуйста, как сделать чтоб на мобильных устройствах меню выпадало? Захожу с айфона — не выпадает.

    • Заур Магомедов
      Заур Магомедов Янв 15, 2014 в 23:20

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

  • Руслан Дек 10, 2013 в 21:19

    Привет Заур !

    Использовал шаблон данного меню, правда я его перерисовал на свой вкус.
    Большое спасибо !

    Пример:
    http://www.nastroyka-pc.com.ua/

    • Заур Магомедов
      Заур Магомедов Дек 10, 2013 в 21:22

      Не за что!

  • Григорий Дек 06, 2013 в 20:29

    Заур, будьте добры , удалите меня из подписки на комментарии.
    Так как я по переходу — редактировать свои подписки и т.д. попадаю на страницу 404

    • Заур Магомедов
      Заур Магомедов Дек 06, 2013 в 21:01

      удалил…

  • Георгий Дек 05, 2013 в 15:29

    Заур, можете подсказать почему у меню нет стрелок при переходе. Проверяю все и ничего не могу понять.

    • Заур Магомедов
      Заур Магомедов Дек 06, 2013 в 18:10

      Не понял, каких еще стрелок?

      • Георгий Дек 07, 2013 в 0:05

        «/*********************** Стрелочки на подпунктах */»

        У меня они не отображаются, вот не могу понять почему?

        • Заур Магомедов
          Заур Магомедов Дек 07, 2013 в 0:11

          Дайте ссылку на сайт.

          • Георгий Дек 07, 2013 в 12:34
          • Заур Магомедов
            Заур Магомедов Дек 08, 2013 в 17:19

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

  • Григорий Дек 01, 2013 в 20:50

    Заур, спасибо за интересное меню.
    Установил на — smarthouse.freemaverick.com и только потом сообразил, что с ним нельзя работать напрямую из админки Joomla 2.5.
    нет ли у вас дальнейшей проработки этого меню, с возможностью привязки контента через админку или подскажите какое меню вы использовали как исходное?

    • Заур Магомедов
      Заур Магомедов Дек 01, 2013 в 23:50

      Почему вы решили, что данным меню нельзя управлять из админки? У данного меню есть html-код и css-код. Так вот, в качестве html-кода используете ненумерованный список меню joomla. Далее подгоняете классы путем создания альтернативного шаблона и все будет работать.

  • Игорь Ноя 18, 2013 в 12:27

    Здравствуйте, Заур!
    Купил готовую тему на Вордпресс. Ее большой плюс в том, что там есть мощная система заказов. Но вот сам вид темы мне не нравится. Хочу убрать огромные картинки и слайдер на Главной. Хотел бы привести меню виду как на сайте italy.ua: т.е. при наведении появляется не вертикальный, а горизонтальный список. И потом, если мы в этом разделе, он так и остается.
    Посоветуйте, пожалуйста, Не-программеру: Ваше меню можно под это решение приспособить?
    Спасибо!

    • Заур Магомедов
      Заур Магомедов Ноя 19, 2013 в 16:20

      Приспособить можно, но нужно хорошо знать разметку html+css.

  • Владимир Окт 21, 2013 в 11:48

    Заур, огромное спасибо за статью. Был приятно удивлен исчерпывающим решением на эту непростую задачу.
    Есть маленький вопрос — все-же разделитель хотелось бы убрать, т.к. немного переделал и теперь пункты без фона. Разделители отображаются везде кроме firefox. Не могу понять где он прописан. Подскажите?

    • Владимир Окт 21, 2013 в 11:51

      забыл сказать, сайт http://patisseriemakarun.ck.ua/

    • Заур Магомедов
      Заур Магомедов Окт 21, 2013 в 12:01

      Спасибо за отзыв! Убрать бордер можно:
      ищем стили — #mainmenu ul li {
      border-right: 1px solid #222;
      box-shadow: 1px 0 0 #444;
      -moz-box-shadow: 1px 0 0 #444;
      -o-box-shadow: 1px 0 0 #444;
      -ms-box-shadow: 1px 0 0 #444;
      -webkit-box-shadow: 1px 0 0 #444;
      position:relative;
      left:50%;
      float:left;
      height:40px;
      padding:0;
      margin:0
      }

      Оставляем:

      #mainmenu ul li {
      position:relative;
      left:50%;
      float:left;
      height:40px;
      padding:0;
      margin:0
      }

      Убрали border-right и box-shadow

      • Владимир Окт 21, 2013 в 12:12

        Вах! Спасибо 🙂

  • Ахмаджон Авг 02, 2013 в 15:31

    Здравствуйте Уважаемый Заур. Огромное спасибо за ресурс. Использую его для своего сайта. Но к сожалению у меня проблема с отображением на IE8 и в общем. Вот ссылка на сайт, посмотрите может чемто сможете помочь.
    http://ahmadion.tj/AdminTcell/myadmintcell.php
    Заранее благодарю

    • Заур Магомедов
      Заур Магомедов Авг 02, 2013 в 15:59

      Само меню нормально отображается в ИЕ. У вас что то с версткой. К сожалению ковыряться в коде нет времени, очень много работы. Здесь уже чистый html и css…

  • Роман Июл 30, 2013 в 4:05

    Спасибо, статья помогла, как раз искал именно такое меню. А как насчет варианта с jQuery? Ведь по хорошему надо постараться захватить большинство браузеров

    • Заур Магомедов
      Заур Магомедов Авг 02, 2013 в 15:54

      Да, что нибудь придумаем…

  • zherik Июн 13, 2013 в 13:14

    Спасибо за меню! Как раз то, что нужно для проекта.

    • Заур Магомедов
      Заур Магомедов Июн 13, 2013 в 22:18

      Не за что 🙂

      • san Авг 02, 2013 в 16:04

        Большое спасибо, всё устраивает, кроме некорректного отображения в IE8 и IE9. Для меня это большой минус, т.к. хотел внедрить его в проект, который посещают в основном люди «сельской» местности и используют большинство, как раз таки 8 и 9 версию. Но в любом случае менюшка на высоте!

        • Заур Магомедов
          Заур Магомедов Авг 02, 2013 в 18:50

          Что значит некорректное отображение в ИЕ 9-8? Отображается все корректно, просто в ИЕ эффекты не все работают.

          • san Авг 05, 2013 в 8:42

            Ну да, про эффекты то и имел ввиду. Но не важно, в других нормально работает

  • Beer Июн 04, 2013 в 20:22

    Зачетно сделано!
    Убавил высоту меню, но вот как приподнять выпадающий список не вкурю — он слишком низко выпадает от основного блока…

    Спасибо!

    • Заур Магомедов
      Заур Магомедов Июн 05, 2013 в 0:13

      В примере выше в стилях css ищите строку 108 и измените значение на высоту вашего меню.

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

Войти с помощью: 

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

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]