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

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

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

Заур Магомедов
Главная » Верстка 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 не поддерживают.

Читайте также:  Как прижать footer (подвал сайта) к низу окна браузера

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

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

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

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

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

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

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

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

Система Orphus

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

  • Александр Июн 02, 2013 в 22:09

    Здравствуйте,
    огромное спасибо за выровненное по центру данное меню . Сам копался в стандартном скрипте, но так и не решил вопрос, а у вас уже все готово.
    Вот хочу у вас спросить, т.к. опять не могу найти, что за это отвечает.
    Суть: как/где можно поменять цвет фона (синий) hover?

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

      Ну раз вы знаете, что цвет при наведении меняется с помощью hover, то какие проблемы его найти. В примере выше это 68-я строка. Там идет градиентом, меняете на свой цвет. Firebug вам в помощь.

      • Александр Июн 03, 2013 в 0:37

        …в том то и дело, что я менял там цвет, никакого результата.
        Поэтому и подумал, может где завуалировано это действо.
        Я ваапще, везде где только можно, грубо говоря, уже методом тыка менял, никакой реакции.
        А вот за напоминание про Firebug отдельное спасибо, я как то и забыл про это дополнение 🙂

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

          В 68 строчке удалите все стили градиента и оставьте только background-color и поменяйте цвет — все будет работать.

          • Александр Июн 03, 2013 в 0:47

            огромное спасибо!
            все получилось.
            до этого, честно говоря, я бы не додумался сам.

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

              Не за что. Вам спасибо, что посетили мой блог!

  • Gamerpsevdo Май 25, 2013 в 1:14

    Менюшка прикольная слов нет… Но в IE 9 у меня не кроме всего перечисленого для более ранних версий — не выпадает список ((

    • Заур Магомедов
      Заур Магомедов Май 25, 2013 в 10:24

      Меню было протестировано на ИЕ 7,8,9 и все выпадало. Вы html-код на пустую страницу не добавляйте. Создайте документ с тегами html, body и т.д. как положено и между тегами body вставляйте html-код меню. Тогда будет все выпадать.

  • Михаил Май 19, 2013 в 18:29

    А как уменьшить высоту первого ПУНКТ 1 и так далее?
    А то уменьшить в неактивном состоянии получилось, а вот где менять высоту при наведении курсора — непонятно. Помогите пожалуйста.

    • Заур Магомедов
      Заур Магомедов Май 19, 2013 в 22:50

      Меняйте у того же элемента, только с псевдоклассом :hover…

  • Denis Май 18, 2013 в 15:25

    как мне добавити ище разделы главные как Пункт 1 Пункт 2

    • Заур Магомедов
      Заур Магомедов Май 18, 2013 в 20:55

      Открываете html-код и добавляете. Изучайте html…

  • Максим Май 12, 2013 в 8:19

    Можно ли это меню вставить в сайт на Joomla ?
    Если можно , не могли бы вы рассказать, каким образом ?

    • Заур Магомедов
      Заур Магомедов Май 12, 2013 в 10:32

      А что его вставлять — добавляете стили данного меню в ваш файл стилей и подгоняете классы или id списка меню.

  • Максим Май 12, 2013 в 8:17

    Не понимаю, зачем выравнивать меню по центру

    • Заур Магомедов
      Заур Магомедов Май 12, 2013 в 10:34

      Это не принципиально, лично мне кажется выровненное меню смотрится намного красивее, особенно когда пунктов не так много. Ну тут, как говорится, на вкус и цвет…

  • Юля Май 11, 2013 в 15:02

    Привет, отличная менюшка! Подскажи пожалуйста как сделать чтобы вторая строчка менюшки тоже была темного цвета. (пример на сайте http://hobby-rukodelie.ru/)

    • Заур Магомедов
      Заур Магомедов Май 12, 2013 в 10:36

      Что то не совсем понял вопрос — а разве она не темного цвета?

  • Игорь Апр 14, 2013 в 0:17

    Вот бы еще такое же красивое вертикальное меню типа «аккордион» найти бы здесь..

    • Заур Магомедов
      Заур Магомедов Апр 14, 2013 в 1:05

      Да меню то готово уже. Вот можете посмотреть здесь. Просто руки никак не доходят написать статейку. У меня ведь и другие проекты есть, времени не хватает на всех.

  • Роман Апр 08, 2013 в 12:44

    Отличное меню на css! Возьму на заметку, а сайт в закладки 🙂
    Заур , удачи вам!

    • Заур Магомедов
      Заур Магомедов Апр 08, 2013 в 12:47

      Рад был помочь. Спасибо вам, за то что посетили мой ресурс!

  • Игорь Мар 24, 2013 в 21:04

    Просто превосходно, давно ждал что-нибудь подобное. Возможности css колоссальны. Такое я только у Вас нашел.
    Пара вопросов:
    1. Почему то нет фона на ul;
    2. Непонятный отступ справо на ul li;
    3. Справо ненужная разделительная линия.
    вот фото:
    http://ifotki.info/14/c6444cb1a8ff7f2fded3ffb9916248be6dac60146804150.png.html
    Помогите, пожалуйста!!

    • Заур Магомедов
      Заур Магомедов Мар 24, 2013 в 22:19

      Я так понимаю вот ваш сайт — http://2.filter-tver.com/?

      — нет фона ul — фон задается блоку div, а не ul. У вас блок div с классом mainmenu, а в css ведь id — #mainmenu. Исправьте или в html или в css

      — непонятный отступ у выпадающих пунктов — уберите значение ширины у — .mainmenu ul li — в оригинальном коде ведь такого значения нет. И вообще ИЕ не понимает значения ширины пунктам ненумерованного списка.

      — по поводу ненужной разд. линии — вы сначала фон сделайте меню (см. п.1) и эта линия станет не такой уж и ненужной.

      • Игорь Мар 24, 2013 в 23:15

        Все сделал как Вы рекомендовали, все получилось, но теперь незадача:
        благодаря тому, что пунктов меню много я и задавал ширину #mainmenu ul li, таким образом смещая их на др. строчку. Теперь же значение ширины «width» убрал все выровнялось но меню не помещается в одну строчку блока div.
        Может есть какие-нибудь решения?

        • Заур Магомедов
          Заур Магомедов Мар 25, 2013 в 0:14

          Решение есть, во-первых я предлагаю вам вынести все стили меню в файл menu.css и подключить его через импорт в основном файле стилей. Могу помочь Вам, но мне нужны доступы по ftp.

          • Игорь Мар 25, 2013 в 18:03

            Вы хороший специалист и главное — не «голословный». Сказали — сделали.
            МЕГАМЕНЮ НА CSS красиво и современно смотрится!!
            Огромное Вам спасибо!

            • Заур Магомедов
              Заур Магомедов Мар 25, 2013 в 18:54

              Да ладно вам. 🙂 Спасибо вам за то что посещаете мой ресурс, оставляете комментарии, советуете друзьям. Это тоже очень для меня важно.

  • Виктор Мар 23, 2013 в 21:29

    Да, меню то что надо!!!. Спасибо Заур!!! Уверен что пригодиться в работе, буду использовать сам и рекомендовать другим!!!

    • Заур Магомедов
      Заур Магомедов Мар 23, 2013 в 21:31

      Спасибо за содействие в продвижении…!

  • Марат Мар 23, 2013 в 9:18

    Спасибо, меню просто шикарное, а что касается ie7 и 8 , то давно пора от них отказаться.

    • Заур Магомедов
      Заур Магомедов Мар 23, 2013 в 12:16

      Спасибо за отзыв! Что касается ИЕ старых версий, то могу сказать, что есть еще пользователи, которые пользуются данными браузерами. Данное меню неплохо работает и в них тоже, просто нет эффекта анимации и визуально немного отличается.

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

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

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

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

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