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

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

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

Заур Магомедов
Главная » Верстка Html5, Css3 » Стильное вертикальное меню аккордеон для сайта

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

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

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

Для эффекта плавного скольжения у нас задействованы библиотеки jQuery и jQuery UI.

Итак, html-код будет следующим:

<div class="akkordeon">

<ul class="vmenu">
   <li class="home"><a href="#">Главная</a></li>
   <li class="about-us parent"><a href="#"><span>О нас</span></a>
       <ul class="dropdown">
       <li><a href="#"><span>Сотрудники</span></a></li>
       <li><a href="#"><span>Режим работы</span></a></li>
       <li><a href="#"><span>История компании</span></a></li>
       </ul>
   </li>
   <li class="gallery parent"><a href="#"><span>Галерея</span></a>
       <ul class="dropdown">
       <li><a href="#"><span>Фото</span></a></li>
       <li><a href="#"><span>Видео</span></a></li>
       <li><a href="#"><span>Продукция</a></span></li>
   </ul>
   </li>
   <li class="portfolio"><a href="#">Портфолио</a></li>
   <li class="contact"><a href="#">Контакты</a></li>
 </ul>
 </div>

CSS-код:

 * {
     margin:0;
     padding:0
 }
 html, body {
     background:url(../images/bg.jpg) #383a3f;
     margin:0;
     padding:0;
 }
 .akkordeon {
     width:200px;
     margin:50px auto 0;
 }
 ul.vmenu {
     background-color: #454851;
     border: 1px solid #25272b;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
     -webkit-border-radius: 5px;
     -ms-border-radius: 5px;
     border-radius: 5px;
     -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.2),inset 1px 1px 0 rgba(255,255,255,0.1);
     -o-box-shadow: 0 2px 1px rgba(0,0,0,0.2),inset 1px 1px 0 rgba(255,255,255,0.1);
     -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.2),inset 1px 1px 0 rgba(255,255,255,0.1);
     -ms-box-shadow: 0 2px 1px rgba(0,0,0,0.2),inset 1px 1px 0 rgba(255,255,255,0.1);
     box-shadow: 0 2px 1px rgba(0,0,0,0.2),inset 1px 1px 0 rgba(255,255,255,0.1);
     list-style: none;
     font: 13px Tahoma, sans-serif;
     margin: 0;
     padding: 0;
     overflow:hidden
 }
 ul.vmenu li.home {background:url(../images/home-icon.png) 12px 12px no-repeat}
 ul.vmenu li.home:hover {background:url(../images/home-icon.png) 12px -21px no-repeat}

ul.vmenu li.about-us {background:url(../images/about-us-icon.png) 12px 12px no-repeat}
 ul.vmenu li.about-us:hover {background:url(../images/about-us-icon.png) 12px -23px no-repeat}

ul.vmenu li.gallery {background:url(../images/gallery-icon.png) 12px 13px no-repeat}
 ul.vmenu li.gallery:hover {background:url(../images/gallery-icon.png) 12px -20px no-repeat}

ul.vmenu li.portfolio {background:url(../images/portfolio-icon.png) 12px 11px no-repeat}
 ul.vmenu li.portfolio:hover {background:url(../images/portfolio-icon.png) 12px -22px no-repeat}

ul.vmenu li.contact {background:url(../images/contact-icon.png) 12px 11px no-repeat}
 ul.vmenu li.contact:hover {background:url(../images/contact-icon.png) 12px -22px no-repeat}

ul.vmenu li a {
     background: url(../images/bg-li-a.png) repeat-x;
     -mozbox-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
     -o-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
     -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
     -ms-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
     box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
     border-bottom:1px solid #292b30;
     color:#d9ddea;
     display:block;
     text-decoration:none;
     padding:10px 10px 10px 40px;
     height:18px;
 }
 ul.vmenu li:first-child a {box-shadow:none}
 ul.vmenu li a:hover {background: url(../images/bg-li-a-hover.png) repeat-x}
 ul.vmenu li.parent a span {
     display:block;
     background:url(../images/arrow-down.png) right center no-repeat;
 }
 ul.vmenu li.parent a.selected span {background:url(../images/arrow-up.png) right center no-repeat}

/******************************* Выпадающие пункты */
 ul.vmenu li ul.dropdown {
     height:0;
     overflow:hidden
 }
 ul.vmenu li ul {
     list-style:none;
     margin:0;
     padding:0;
 }
 ul.vmenu li ul li {
     background:url(../images/dropdown-menu-li.jpg) repeat-x;
 }
 ul.vmenu li ul li a {
     background:none;
     padding:0;
     height:38px
 }
 ul.vmenu li ul li a span {
     background: url(../images/menu-dropdown-figure.png) 18px 16px no-repeat !important;
     display:block;
     padding:10px 10px 10px 40px;
 }
 ul.vmenu li ul li a:hover span {background: url(../images/menu-dropdown-figure.png) 18px -8px no-repeat !important;}
 ul.vmenu li ul li a:hover {background:url(../images/dropdown-menu-li-a-hover.jpg) repeat-x} 

В папке «js» у находится один единственный файлик — functions.js, в котором заданы некоторые параметры, используемым функциям. Библиотеки jQueri и jQuery UI подгружаются удаленно:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

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

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

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

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

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

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

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

Система Orphus

67 комментариев к статье "Стильное вертикальное меню аккордеон для сайта"

  • Андрей Окт 30, 2014 в 18:34

    Не подскажите как сделать так чтоб при переходе на страницу меню било раскрытое и бил выделен пункт меню (синим цветом как в демо)?

    • Заур Магомедов
      Заур Магомедов Окт 30, 2014 в 18:40

      Данное меню нужно адаптировать под вашу cms. В демо такого нет.

      • Андрей Окт 30, 2014 в 18:47

        Вопрос в том что сайт написан на чистом html без cms как тогда с этим быть?

        • Заур Магомедов
          Заур Магомедов Окт 30, 2014 в 18:48

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

  • Дмитрий Май 30, 2014 в 8:55

    Не работает с Widgekit :(( .
    Joomla 2.5
    Widgekit 1.3.5

    Могу дать доступы.

    • Заур Магомедов
      Заур Магомедов Май 30, 2014 в 10:17

      Скорее всего конфликтуют скрипты, если конечно вы все правильно подключили…

  • Ashot Май 09, 2014 в 16:31

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

    • Заур Магомедов
      Заур Магомедов Май 09, 2014 в 21:15

      Что то не понял вопроса — как это сдвинуть влево? Добавить отступ или что?

      • Ashot Май 10, 2014 в 2:21

        нет просто у меня когда я вставляю код меню в мой сайт она автоматически попадает в правую сторану сайта и я не могу сделать так что бы она отабражалась в левом стороне. Как это сделать? ЧТо изминить или добавлять в код меню?

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

          Дайте ссылку на сайт, так ничего сказать не могу.

          • Ashot Май 14, 2014 в 17:29

            royalcosmetics.do.am
            Да и еще один вопрос как сделать что бы она стала сдвигатся?

          • Ashot Май 14, 2014 в 17:50

            И пожалуста обясньи что ты написал в дакументье «Functions» в js папке. я почтьи ничего не понял

            • Заур Магомедов
              Заур Магомедов Май 15, 2014 в 9:40

              Добавьте правило классу vmenu — text-align:left, чтобы пункты были слева:
              ul.vmenu {
              text-align: left; // Это надо добавить
              }

              Чтобы меню было слева правьте ваш шаблон, перенесите его в левую колонку.

              Меню у вас не работает. Проверьте правильность подключения всех скриптов.

              • Ashot Май 15, 2014 в 11:08

                че то не работает((

  • Gamer Мар 28, 2014 в 5:24

    Очень хорошие исходники, мне очень понравились. С помощью них можно создать довольно интересное меню. Респект автору!

    • Заур Магомедов
      Заур Магомедов Мар 28, 2014 в 8:58

      Спасибо!

  • Николай Мар 18, 2014 в 17:37

    Заур, здравствуйте,
    извините за дурацкий вопрос — как прикрутить это меню к joomla, в исходниках два файла, но что делать с ними или с их содержимым я не знаю. Еще раз простите за такой глупый вопрос.

    Заранее благодарен

  • влад Мар 08, 2014 в 20:08

    Спасибо очень эффектное меню но как его переделать в линейное -горизонтальное с такими же выпадающими списками?

  • alex Фев 03, 2014 в 18:46

    Скажите а проблема с прыганьем решена?

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

      Да решена, можете проверить.

  • Дмитрий Янв 15, 2014 в 21:08

    Заур, спасибо, но сегодня нашёл, не реклама ,(http://designmodo.com/demo/jqueryaccordionmenu/) уже прикрутил, Но будет время Ваш обязательно попробую!
    P.S. Сайт Ваш очень понравился

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

      Знаю это меню. Есть оно в моем арсенале тоже.

  • Дмитрий Янв 15, 2014 в 1:52

    Здравствуйте! проблему с прыганьем не решили?

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

      Доработал скрипт немного. Сейчас проверьте. Скачайте заново исходники. Отпишитесь, как работает меню.

  • Евгений Июл 27, 2013 в 16:01

    Что сделать что бы не прыгало на начало страницы при нажатии ?

    • Заур Магомедов
      Заур Магомедов Июл 27, 2013 в 16:47

      Да, есть такая проблема. Взялся за ее решение. Как решу выложу обновление.

      • Евгений Июл 27, 2013 в 22:59

        А можно сразу сделать готовый модуль ? Просто сделать готовый модуль я не знаю как

        • Заур Магомедов
          Заур Магомедов Июл 27, 2013 в 23:06

          Вы имеете ввиду для joomla? Да можно, этим сейчас и занимаюсь. Просто нужно скрипт до ума довести.

          • black Фев 12, 2015 в 17:38

            Доброе время суток!
            Хотелось бы поинтересоваться — что и как обстоят дела с созданием готового модуля? Уж больно красивое и стильное меню

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

              Вы имеете ввиду готовый модуль для джумла?

              • black Фев 13, 2015 в 0:28

                Именно. Ведь «…Да можно, этим сейчас и занимаюсь…»
                Многие предлагаемые варианты (модулей) не всегда устраивают, хоча потому, что используют множество селекторов, скриптов и тд. Этот же вариант — якобы минимум, но изящно!

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

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

  • Заур Магомедов
    Заур Магомедов Июл 26, 2013 в 23:41

    Да, он так и называется — стильный аккордеон

  • Имран Ильясов
    Имран Июл 25, 2013 в 16:58

    Очень красиво, стильно я бы сказал

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

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

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

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

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