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

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

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

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

Читайте также:  FlexMenu - сворачивающееся адаптивное меню на jQuery

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

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

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

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

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

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

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

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

Система Orphus

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

  • Сергей Авг 18, 2015 в 18:39

    Подскажите пожалуйста, а как уменьшить расстояние между кнопками нулевого уровня (то есть, текст близко располагался с границей кнопки)?

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

      #mainmenu ul li a {
      display: block;
      color: #CCC;
      text-decoration: none;
      padding: 13px 20px;
      }
      Ищите эти строчки и меняете padding второе значение.

      • Сергей Авг 19, 2015 в 0:52

        Большое спасибо

      • Сергей Авг 19, 2015 в 1:49

        Подскажите пожалуйста, в чем может быть проблема, Добавляю 7 и 8 пункты меню, и у меня они переносятся в крайне левый рад, а должны быть в другой вообще стороне. Вот мой сайт http://tizg.mebel24.su/ Заранее спасибо!

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

          Да нормально вроде все…

          • Сергей Авг 20, 2015 в 1:34

            Ну да. Я сам додумался где накосячил! Но все равно спасибо!

  • Сергей Авг 18, 2015 в 13:06

    Автор, пришли мне свою фотографию, я ее поставлю в рамку и буду молиться на ночь. =) Спасибо за меню, оно шикарное!

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

      Не за что! Я рад, что оно вам понравилось!

  • Robox Мар 02, 2015 в 19:26

    Спасибо за меню! очень мне понравилось скорость его работы!

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

      Не за что…

  • Владимир Фев 05, 2015 в 13:02

    Подскажите пож. как прикрутить Ваше меню с сайту на instantcms?
    Заранее благодарю.

    • Заур Магомедов
      Заур Магомедов Фев 05, 2015 в 13:13

      А какие проблемы? Скопируйте стили в ваш файл стилей и задайте родительскому блоку меню id — mainmenu. Ну и создайте пункты меню в админке с вложенностью. Ничего сложного нет.

      • Владимир Фев 06, 2015 в 9:47

        Прикрутили! Огромное спасибо! Вот только у нас справа было окно поиска — оно пропало. Подскажите — как поправить пожалуйста.

        • Владимир Фев 06, 2015 в 9:48

          сайт: lerschool2.ru

          • Заур Магомедов
            Заур Магомедов Фев 06, 2015 в 12:01

            Вам нужно блок поиска занести в блок меню — #mainmenu и далее подправить правила стилей. Прикрепляю скриншот. Также в блоке меню я удалил некоторые обертки div, они не нужны, например, modulebody.
            https://yadi.sk/i/ec-1RQvDeVnm3

            • Владимир Фев 06, 2015 в 13:21

              Огромное спасибо! Отличное меню! Оперативно отреагировали! Ещё раз огромное спасибо!

              • Заур Магомедов
                Заур Магомедов Фев 06, 2015 в 13:23

                Не за что! Удачи!

  • Андрей Ноя 18, 2014 в 14:18

    Подскажите как сделать, чтоб подменю появлялось при нажатии

    • Заур Магомедов
      Заур Магомедов Ноя 19, 2014 в 15:39

      Вы хотите, чтобы все подуровни появлялись при клике, а не при наведении?

      • Андрей Ноя 19, 2014 в 22:28

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

        • Заур Магомедов
          Заур Магомедов Ноя 20, 2014 в 12:48

          Здесь нужны манипуляции с javascript и jQuery. У меня больших знаний нет в javascript, поэтому конкретно не могу сказать. Можно прикрутить, взять с того же бутсрап. Как раз меню там по клику раскрывается.

  • Андрей Ноя 03, 2014 в 13:32

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

  • Андрей Ноя 02, 2014 в 20:04

    А как сделать чтоб под меню появлялось при клике а не при наведении?

    побывал заменять hover на focus но не работает:
    #mainmenu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
    }

    • Заур Магомедов
      Заур Магомедов Ноя 02, 2014 в 21:29

      Что то через focus и у меня не получилось. Лучше через jQuery сделать. Надо будет, как-нибудь выкрасть времени для этого.

  • Сергей Окт 06, 2014 в 11:22

    Спасибо, очень просто все описано. Поразился легкости реализации. web не мое, но приходится учиться.

  • Сергей Сен 07, 2014 в 0:16

    Добрый день, хочу поставить такое выпадающее меню на свой сайт http://www.azbukamamy.ru
    Вот только меня мучает один вопрос: сайт только начал заполнятся и количество пунктов меню будет постоянно увеличиваться, ваш способ создания выпадающего меню требует постоянного ручного добавления пунктов или достаточно найти куда и как прописать данные коды и подпункты будут добавляться в процессе уже сами при создании их в админке?

    • Заур Магомедов
      Заур Магомедов Сен 07, 2014 в 0:42

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

  • Дмитрий Май 11, 2014 в 10:58

    Здравствуйте! Подскажите пожалуйста — при установке на Joomla 2.5 — вот такая ошибка:

    JFolder::create: Обнаружен Бесконечный цикл
    Внимание! Не удалось переместить файл!

    • Заур Магомедов
      Заур Магомедов Май 11, 2014 в 11:05

      Какое меню вы устанавливаете? В данной статье описывается меню, но это не модуль для joomla.

      • Дмитрий Май 11, 2014 в 11:57

        Вот по этой ссылке: http://zaurmag.ru/wp-content/demos/megamenu/dropdownMegaMenu.zip
        Т.е на Joomla это меню не поставить?

        • Заур Магомедов
          Заур Магомедов Май 11, 2014 в 12:00

          Это не установочный архив joomla. Его надо распаковать и следовать инструкциям в статье. На joomla 3 можно прикрутить. Вот как я для своего сайта сделал — http://www.spravkapc.ru — joomla 3.

          • Дмитрий Май 11, 2014 в 12:07

            Т.е на 2.5 оно не поставиться? А ссылку на статью где описан порядок установки, можно?

            • Заур Магомедов
              Заур Магомедов Май 11, 2014 в 12:13

              Можно и на 2.5, нет разницы никакой какой движок. Здесь есть понятия HTML и CSS. Подгоняете стили в вышеизложенной статье под ваш html-код меню и все. Конкретной инструкции нет. На крайний случай скопируйте стили с моего сайта.

              • Дмитрий Май 11, 2014 в 12:18

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

                • Имран Ильясов
                  Имран Май 11, 2014 в 12:35

                  Дмитрий, тут фраза установка не корректна т.к это HTML и CSS. Вам необходимо на готовый меню joomla перенести HTML разметку и скопировать css в ваш файл стилей

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

                  Есть инструкция, но для вертикально-выпадающего меню — http://zaurmag.ru/joomla/rasshireniya-dlya-joomla/vertikal-noe-menyu-akkodeon-dlya-sajta-na-joomla.html. Да здесь и инструкция не нужна. У вас же меню уже установлено. Добавьте стили в ваш файл стилей меню и подгоните классы, если они отличаются.

  • Галина Фев 14, 2014 в 17:12

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

    • Заур Магомедов
      Заур Магомедов Фев 14, 2014 в 18:59

      Спасибо, что меню понравилось. Цвета меняются примерно в следующих строчках — background-image: linear-gradient(#444, #111); background-image: -moz-linear-gradient(#444, #111); и т.д. Меняете значения цветов (#444, #111) там, где вам нужно.

      • Галина Фев 14, 2014 в 19:47

        Спасибо, думаю, разберусь. Может быть еще вопросы появятся, т.к. я еще совсем плохо разбираюсь, а сделать хочется. Еще раз спасибо.

        • Заур Магомедов
          Заур Магомедов Фев 14, 2014 в 19:50

          не за что. Учите css и все будет хорошо 🙂

          • Галина Фев 14, 2014 в 21:42

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

          • Галина Фев 15, 2014 в 12:55

            Извините, нашла.

  • Роман Фев 07, 2014 в 14:17

    Спасибо за ресурс и Менюшку, но вот у меня возник вопрос?
    Как вот менюшку при выпадание в первом уровне превратить в 2 колонке?
    Помогите, пожалуйста!!

    • Заур Магомедов
      Заур Магомедов Фев 07, 2014 в 17:34

      Здесь необходимы знания css. А зачем вам в две колонки?

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

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

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

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

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