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

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

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

Заур Магомедов
Главная » Приятные полезности для сайта » Горизонтальное многоуровневое меню на css с эффектом анимации

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

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

Пост был обновлен: Ноя 14, 2015

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

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

Читайте также:  Простая форма связи на Ajax

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

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

Пост был обновлен: Ноя 14, 2015

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

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

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

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

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

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

Система Orphus

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

  • Станислав Авг 02, 2017 в 14:10

    Доброго времени суток!
    Подскажите, как можно адаптировать Ваше меню? При сжатии окна браузера все кнопки менюхи съезжают вниз 🙁

    • Заур Магомедов
      Заур Магомедов Авг 02, 2017 в 14:20

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

  • Александр Июн 13, 2017 в 13:52

    Здравствуйте, Заур. Давно пользуюсь Вашим меню на своих сайтах. Они некоммерческие, приходится всем заниматься самому. Сейчас переделываю сайт на Gantry 5. Вы не могли бы опубликовать простую инструкцию для того, чтобы сделать модуль меню (Джумла 3.7)? На сайтах на Джумле искал Index.php шаблона и вставлял Ваш код html и вручную прописывал адреса и названия страниц, а затем искал CSS этого же шаблона и вставлял выложенный здесь код CSS. В Gantry 5 пока не могу найти эти файлы. В привычных местах их нет. Может через модуль это и умнее, и менее затратно? Спасибо!

    • Заур Магомедов
      Заур Магомедов Июн 13, 2017 в 14:06

      Здравствуйте. В Gantry в настройках шаблона идете в Page Settings -> Assets и добавляете стили и js. Здесь проще, чем ковырять файлы шаблона. А модуль писать пока честно сказать у меня времени нет.

      • Александр Июн 15, 2017 в 13:57

        Почему-то уведомление об ответе не работает. Спасибо, что бымтро ответили.
        Извините. Всё оказалолсь проще. Я в шаблон Custom HTML и там прописао Ваш код, а css прописал в файле scss в папке custom. Есть классное видео на английском https://www.youtube.com/watch?v=TkaBka2lJp8&feature=iv&src_vid=PQCExfPZnJ8&annotation_id=video%3A8f5674b9-a8e1-4320-8507-888455534847 Классный парень тоже. как Вы. Конечно. писать модуль не надо. Извините. Я из-за того начал когда-то искать такое меню, как у Вас. что все стандартные такие меню дают страницам 3 уровень, а Ваше второй.

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

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

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

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

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