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

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

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

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

Читайте также:  Стильное вертикальное меню аккордеон для сайта

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

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

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

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

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

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

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

1 балл2 балла3 балла4 балла5 баллов
голосов: 26, средний бал: 2,69 / 5
Загрузка...

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

Система Orphus

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

  • Ксения Дек 04, 2016 в 14:42

    Здравствуйте. На сайте http://test10.cs-studio.com.ua/produktsiya почему-то выпадающее меню получается общим для целого блока (для картинки, названия пункта и подпунктов), хотя в коде для подпунктов есть отдельное выпадающее меню. Подскажите пожалуйста как разделить выпадающий блок отдельно для пункта и для подпунктов (для картинок вообще желательно убрать)? Заранее благодарна за ответ.

    • Заур Магомедов
      Заур Магомедов Дек 05, 2016 в 0:38

      Здравствуйте! Не увидел у вас на сайте выпадающее меню. Уточните о каком меню идет речь.

  • Алексей Сен 09, 2016 в 10:16

    Доброго времени суток, Заур! Подскажите пжлст, как сделать так что бы все пункты меню распределялись по всей ширине body. У меня 6 пунктов меню разной ширины и по краям получились не большие отступы.
    К примеру вот так:

    <body>
    	<style>
    		body {
    			margin: 0 auto;
    			width: 1200px;
    		}		
    		#nav6, #nav6 li {
    		  margin: 0;
    		  padding: 0;
    		}
    		#nav6 {
    		  display: table; /* не поддерживается IE6 и IE7 */
    		  width: 100%;
    		  background: rgb(46,95,122);
    		}
    		#nav6 li {
    		  display: table-cell;
    		}
    		#nav6 a {
    		  display: block;
    		  padding: 3px 0;
    		  color: #fff;
    		  text-align: center;
    		  text-decoration: none;
    		}
    		#nav6 a:hover {
    		  background: rgb(96,145,172);
    		}
    	</style>
    	<ul id="nav6">
    	  <li><a href="#1">Главная</a>
    	  <li><a href="#2">Поисковая оптимизация</a>
    	  <li><a href="#3">HTML</a>
    	  <li><a href="#4">О блоге</a>
    	</ul>
    </body>
    
    • Заур Магомедов
      Заур Магомедов Сен 09, 2016 в 10:38

      Зачем вы Body задаете ширину 1200px? В вашем коде не увидел отступы. По всей ширине пункты можно распределить, используя новое правило Flexbox (display: flex). Но данное правило корректно воспринимается только современными браузерами.

      • Алексей Сен 09, 2016 в 10:44

        Данный код это пример того что я хочу сделать, но не пойму как это сделать в вашем меню. Пытался сделать по аналогии, но ни чего не выходит. А чем плоха ширина body? Такая ширина планируется у будущего сайта.

        • Заур Магомедов
          Заур Магомедов Сен 09, 2016 в 18:55

          Обычно ширину фиксиррванную body не задают. Для этого создают общий блок, например, #page и ему уже задают ширину.

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

  • Татьяна Июн 15, 2016 в 16:44

    Здравствуйте! Очень полезная статья! Очень обрадовалась, когда нашла! НО… так как я в этом деле новенькая, подскажите пожалуйста конкретно в какую папку и под каким названием создавать эти коды?
    звходим в папку www там есть папки
    templates
    ciferka (это название моего шаблона)
    и т.д.

    если не сложно пожалуйста опишите куда вставлять эти коды и под каким названием. Спасибо.

    • Татьяна Июн 15, 2016 в 16:45

      забыла сказать версия JOOMLA 2.5.28

    • Заур Магомедов
      Заур Магомедов Июн 15, 2016 в 19:54

      Ответил на почту тоже.
      Здравствуйте. Так я не могу сказать, мне на ваш сайт взглянуть сначала надо.
      Код css нужно сохранять в файл стилей вашего шаблона. Обычно его обзывают style.css

  • Илья Апр 24, 2016 в 16:04

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

    • Заур Магомедов
      Заур Магомедов Апр 24, 2016 в 16:53

      Честно сказать не совсем понял для чего это вам нужно? Там же все подпункты справа выходят, как можно последний слева разместить? Поверх что ли?

      • Илья Апр 24, 2016 в 17:01

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

        • Заур Магомедов
          Заур Магомедов Апр 24, 2016 в 23:18
          #mainmenu ul li:last-child ul li ul {
              left: auto;
              right: 100%;
          }
          
          • Илья Апр 24, 2016 в 23:21

            Спасибо,хорошая идея!

            • Заур Магомедов
              Заур Магомедов Апр 24, 2016 в 23:23

              Ну это самый простой способ. Посложнее будет, если конкретно вычислять помещается ли данный список в область браузера или нет. Делается это средствами javaScript.

              • Илья Апр 25, 2016 в 14:52

                Спасибо большое!

                • Заур Магомедов
                  Заур Магомедов Апр 25, 2016 в 19:27

                  Не за что…

  • Сергей Апр 15, 2016 в 16:38

    Здравствуйте, Заур. Как уменьшить шрифт в вашем меню? Где это менять? или как задать ему размер шрифта, чтобы он не брал у шаблона его?

    • Заур Магомедов
      Заур Магомедов Апр 16, 2016 в 12:24

      Шрифт задается списку первого уровня

      #mainmenu ul
      
  • Илья Мар 30, 2016 в 13:56

    Спасибо большое за меню! Но я до конца не понимаю код, как он «волшебно» делает так что меню появлялось и при этом не надо прописывать каждый новый подуровень. Пожалуйста прокомментируйте код, если не сложно!

    • Заур Магомедов
      Заур Магомедов Мар 30, 2016 в 19:15

      Все очень просто — стили спискам указываются всем возможно вложенным в пункты — li, например, если мы напишем так:

      .menu ul li ul {
          margin-left: 30px;
      }
      

      то всем вложенным спискам ul назначится левый отступ 30px и не важно сколько у нас вложенности. А если написать так:

      .menu > ul > li > ul {
          margin-left: 30px;
      } 
      

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

      • Илья Мар 30, 2016 в 21:24

        Т.е получается что вот это:
        #mainmenu ul > li:hover > a
        будет применяться только для ссылок первого уровня, правильно?
        А это будет:
        #mainmenu ul li:hover > ul
        и это:
        #mainmenu ul li ul li
        только для всех пунктов для второго уровня, так?
        А это будет для всех остальных списков начиная с третьего уровня?:
        #mainmenu ul li ul li ul

        • Заур Магомедов
          Заур Магомедов Мар 30, 2016 в 23:31
          #mainmenu ul > li:hover > a
          

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

          #mainmenu ul li:hover > ul
          

          Показывается вложенный список второго уровня при наведении на родительский пункт li первого уровня.

          #mainmenu ul li ul li
          

          Стили для пуктов li вложенных списков, начиная со второго уровня

          #mainmenu ul li ul li ul
          

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

          • Илья Мар 31, 2016 в 11:01

            Спасибо огромное за ответы!У вас получилось лучше всех сделать доходчиво из всех что я видела

            • Заур Магомедов
              Заур Магомедов Мар 31, 2016 в 20:04

              Не за что! Вы парень или дувушка 🙂 ?

              • Илья Апр 01, 2016 в 11:46

                Парень. Еще такой вопрос почему появляются подраздела, при том что я еще не навела на кнопку, как это исправить?

                • Заур Магомедов
                  Заур Магомедов Апр 01, 2016 в 13:13

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

              • Илья Апр 01, 2016 в 15:56

                проводя мышкой по экрану появляются подразделы, но при этом они скрыты

                • Заур Магомедов
                  Заур Магомедов Апр 02, 2016 в 1:57

                  Так ничего сказать не могу. Надо код инспектировать.

  • Frontdev Фев 24, 2016 в 13:00

    Спасибо)) очень выручил… по больше бы таких людей!!))

    • Заур Магомедов
      Заур Магомедов Фев 24, 2016 в 13:10

      Не за что!

  • Игорь Фев 22, 2016 в 21:43

    Отличное меню, пытался сделать сам, но не получалось, ещё опыта маловато,

    ВОПРОС
    Можно ли сделать, что в последнем меню, меню третьего уровня уходило не влево а вправо?

    • Игорь Фев 22, 2016 в 21:45

      точнее наоборот не вправо а влево

      • Заур Магомедов
        Заур Магомедов Фев 22, 2016 в 23:20

        Можно конечно. Здесь нужны знания css

        • Игорь Фев 22, 2016 в 23:42

          А в какой строке, положение определяется, должно что то типа этого

          .menu ul ul {
          left: 149px;
          top: 0px;

          • Заур Магомедов
            Заур Магомедов Фев 23, 2016 в 0:32

            184 строка:

            #mainmenu ul li ul li ul {
            top: 0;
            left: -105%;
            margin: 0 0 0 20px;
            _margin: 0;
            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);
            }
            

            Я заменил и сделал вместо left: 90% left: -105% и меню сместилось вправо.

  • Максим Дек 03, 2015 в 1:33

    Здравствуйте! У меня сайт на Джумла 3, шаблон Protostar. Подскажите, пожалуйста, можно ли данное многоуровневое меню сделать вертикальным слева и изменить цвет на синий? И как сделать глубину всех ссылок 2 уровнем, т.е. независимо от того, 2, 3 или 4 уровень меню, но ссылка должна быть типа сайт.сом/категория1 либо сайт.ком/категория4?

    • Заур Магомедов
      Заур Магомедов Дек 03, 2015 в 1:36

      Здравствуйте! Вертикпльным кончено можно. Меню работает чисто на css. Здесь нужны знания css. Глубину вложенности выставляете в админке, когда пункты меню создаете.

      • Максим Дек 03, 2015 в 1:46

        Т.е. если меню имеет 4 уровня, например: сайт.сом/категория/подкатегория/товар, то чере3 админку Джумла на уровне вложенности 4 (товар) можно сделать короткую ссылку сайт.сом/товар?

        • Заур Магомедов
          Заур Магомедов Дек 03, 2015 в 1:57

          Если у вас вложенность скажем 4 уровня — магазин — категория — категория — товар, то можно создать пункт меню и сразу сослать его на товар, либо на категорию. При этом можно получить короткую ссылку. Но я не рекомендую так делать. Лучше сохранить свою структуру, а еще лучше чтобы товар был максимум в двух кликах от главной страницы (3 вложенность).

          • Максим Дек 03, 2015 в 2:18

            Спасибо! Буду пробовать.

  • Виталий Ноя 12, 2015 в 9:33

    Заур, большое спасибо за меню, пожалуй лучшее, что я нашел на просторах. Единственное замечание — в вашем меню при наведении на дочерние пункты, родительский пункт теряет выделение, потому что вы отрабатываете a:hover, а мне кажется лучше отрабатывать li hover
    Я сделал так
    #mainmenu ul li:hover,#mainmenu ul li:hover >a, #mainmenu ul li a:hover {
    background-color: цвет
    color: цвет;
    }

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

    • Заур Магомедов
      Заур Магомедов Ноя 12, 2015 в 10:49

      Да, вы правы, hover нужно задавать li, чтобы родительский пункт подсвечивался.
      Вообще, я перепишу все стили меню, они устарели уже. Сделаю все на css без картинок. Вопрос с треугольником тоже решу. Сегодня же и сделаю.

    • Заур Магомедов
      Заур Магомедов Ноя 14, 2015 в 0:58

      Доработал стили меню. Можете посмотреть. Если что не так, пишите…

  • Сергей Сен 15, 2015 в 0:03

    Большое спасибо за меню. Подскажите, а как определить значение выбранного подпункта (пункта) меню в коде ?

    • Заур Магомедов
      Заур Магомедов Сен 15, 2015 в 0:06

      Не совсем понял вопрос. Что вы хотите сделать?

      • Сергей Сен 15, 2015 в 8:13

        Я хочу обрабатывать выбор пользователя. Например, если выбран подпункт 2.1.2, тогда в javascript переменной А присвоить значение «Ок». Спасибо.

  • Александр Авг 19, 2015 в 11:51

    Спасибо за красивое меню. Может глупый вопрос задаю, но объясните пожалуйста, куда надо вставлять html код чтобы пункты меню создавались автоматически CMS?

    • Александр Авг 19, 2015 в 11:52

      Я пользуюсь Joomla 3

    • Заур Магомедов
      Заур Магомедов Авг 19, 2015 в 18:42

      HTML-код вставлять никуда не надо. Joomla сама генерирует данный код. Нужно просто подогнать классы.

      • Серега Фев 24, 2016 в 19:18

        А как подогнать классы меню, под вашу менюшку? Подскажите пожалуйста чайнику, а то всю голову сломал уже. Что делать надо?

        • Заур Магомедов
          Заур Магомедов Фев 24, 2016 в 20:45

          Не понял вопрос? Вы на cms меню хотите внедрить?

          • Сергей Фев 24, 2016 в 22:58

            CMS joomla 3, хочу подогнать классы под меню, чтобы не ручками каждый пункт в html дописывать, а чтобы joomla сама генерировала код для созданного меню. Только не совсем понимаю как подогнать. Я качаю ваш css стиль, вставляю в папку style, в index.php добавляю link и указываю путь к css стилю, далее нахожу ниже позицию своего меню в index.php, она у меня называется catmenu, и тут я не совсем понимаю что я должен сделать. Присваивал id этому стилю, и указывал через div в catmenu, но все равно меню не появляется в том виде, в котором должно. А если добавить просто в файл application.css, и создать в модулях html, и прописать каждый пункт ручками, то все работает на ура, но меню слишком гигантское и постоянно дополняется, и очень сложно в этом файле постоянно добавлять, вот и хочется сделать так чтобы joomla сама при создание в меню пункта добавляла его.

            • Заур Магомедов
              Заур Магомедов Фев 24, 2016 в 23:42

              Во-первых стили меню не обязательно отдельно подключать. Их можно положить в общий файл стилей. По поводу классов… Находите в шаблоне вывод позиции меню, примерно так должно быть:

              <jdoc:include type="modules" name="main_menu" />
              

              У меня тут название модульной позиции — main_menu, у вас будет по другому.
              Обрамляете вывод меню блоком с

              id="mainmenu"

              примерно так:

              <nav id="mainmenu"><jdoc:include type="modules" name="main_menu" /></nav>
              

              Если у вас шаблон не html5, то используйте вместо nav — div.
              Внимание, стиль в выводе позиции удаляете

              style="..."

              И все, все должно работать без проблем.
              Надеюсь понятно объяснил.

              • Сергей Фев 25, 2016 в 1:02

                Огромное спасибо

                • Заур Магомедов
                  Заур Магомедов Фев 25, 2016 в 1:07

                  Обращайтесь… 🙂

              • Серега Фев 25, 2016 в 17:10

                Как то немного не понятно где удаляется стиль вывода позиции. Вот как я обернул тегом div вывод позиции

                <div id="mainmenu"><jdoc:include type="modules" name="catmenu" /> </div>

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

                • Заур Магомедов
                  Заур Магомедов Фев 25, 2016 в 17:32

                  У вас как раз стиля вывода нет. Со стилем было бы так:

                  <div id="mainmenu"><jdoc:include type="modules" name="catmenu" style="xhtml" /> </div> 

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

                • Серега Фев 25, 2016 в 18:28

                  tizg.mebel24.su вот сайт

                • Заур Магомедов
                  Заур Магомедов Фев 25, 2016 в 19:03

                  1. Уберите надпись «Меню категорий».
                  2. У вас в меню нет выпадающих подпунктов. Если в меню вы их создали, то зайдите в модуль вывода данного меню и активируйте опцию «Показывать подпункты меню».

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

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

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

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

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