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

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

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

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

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

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

Пост был обновлен: Май 30, 2014

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

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

Читайте также:  Masonry Layout - кирпичный эффект элементов на сайте. Документация на русском языке

Пост был обновлен: Май 30, 2014

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

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

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

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

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

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

Система Orphus

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

  • Андрей мая 28, 2016 в 8:39

    На Internet Explorer 7 работать будет?

    • Заур Магомедов
      Заур Магомедов мая 29, 2016 в 22:22

      На ИЕ 7 не тестировал, т.к. им уже давно не пользуюсь.

  • Александр Мар 26, 2016 в 21:24

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

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

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

      • Александр Мар 26, 2016 в 21:33

        Я и надеялся, что вы подскажете, что в скрипте изменить…

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

          Можно и на css впринципе сделать. Сейчас честно сказать времени нет этим заниматься. Там код нужно переписывать.

          • Александр Мар 26, 2016 в 22:18

            Понятно. Спасибо.
            Надеялся, что быдет что-то типа маусОвер…
            Но я свою менюшшку поправил в стилях и все получилось хорошо 🙂

            • Заур Магомедов
              Заур Магомедов Мар 26, 2016 в 23:03

              Боюсь одним маусОвером не отделаешься. В любом случае нужно тестировать, когда что то меняешь, чтобы багов не было. Это все время занимает… Вы на css сделали в итоге?

              • Александр Мар 26, 2016 в 23:05

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

                • Заур Магомедов
                  Заур Магомедов Мар 26, 2016 в 23:11

                  А почему сбоку выскакивал? Вы меню не из данной статьи использовали?

  • Александра Ноя 27, 2015 в 21:18

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

    • Заур Магомедов
      Заур Магомедов Ноя 27, 2015 в 21:42

      Какие именно иконки?

  • Виктор Сен 18, 2015 в 1:23

    Сделал на своем сайте прайс лист на css3 в виде аккордеона. Но мне не нравится, что некоторые пункты открываются выше окна браузера. Как сделать, чтобы они либо открывались от начала окна браузера либо на месте(не прыгая)?

    • Заур Магомедов
      Заур Магомедов Сен 18, 2015 в 20:00

      Ничего не понял. Вы сайт покажите свой.

      • Виктор Сен 19, 2015 в 0:01

        profil-gard.com.ua/price

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

          Не могу понять где у вас скрипт лежит. Странно как то работает. Где он у вас лежит?

          • Виктор Сен 19, 2015 в 0:36

            Этот аккордеон написан на CSS3. В нем нет скриптов.

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

              Значит через jQuery вам необходимо запретить действие ссылки по умолчанию.

  • тима Авг 01, 2015 в 2:07

    как редактировать под себя, как убрать иконки изменить цвета?

    • Заур Магомедов
      Заур Магомедов Авг 01, 2015 в 7:52

      HTML, CSS — необходимы знания. Если их нет, то обратитесь к верстальщиу.

    • Алексей Авг 03, 2015 в 10:06

      Меню мне сразу понравилось, в частности то что нормально разворачивается вниз. Столкнулся с тем как сделать чтобы меню не схлопывалось. В итоге senfeng.by меню не только не схлопывается, но и активный пункт меню выделен. Каким образом удалось достичь. Я работаю с CMS Drupal. В нем есть модуль DHTML menu, установил этот модуль а также сделал свои классы для этого меню, потом стилизовал по образу и подобию этого меню. Отсюда вывод — если брать это меню только то достичь того чтобы оно не схлопывалось можно средствами той CMS на которой у вас сделан сайт, и стилизовав его как данное меню. Это первый способ. Второй это с помощью скрипта js, который бы перехватывал активный пункт меню, но это опять же в каждом случае активный пункт меню в разных CMS будет называться по-разному. так что универсального способа нет.

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

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

  • Дмитрий Мар 30, 2015 в 1:23

    ну, в любом случае спасибо за оперативный ответ ))

    • Заур Магомедов
      Заур Магомедов Мар 30, 2015 в 10:18

      Не за что… ))

  • Дмитрий Мар 30, 2015 в 0:52

    приветствую, можно ли из него сделать многоуровневый аккордеон?
    два дня ищу, нашел из бесплатных mod_je_accordionmenu — очень хороший, но проблема в том, что если пункты ведут куда-то, то после того как им назначить дочерний пункт превращаются только в кнопки раскрытия подпунктов. причем до его нажатия ссылка имеется, но после нажатия, открываются подпункты и ссылка в нем исчезает.
    подскажите, пожалуйста, что тут можно сделать?

    • Заур Магомедов
      Заур Магомедов Мар 30, 2015 в 0:57

      А что тут сделаешь — либо искать нормальное меню, либо нанять программиста. Сам я в вопросах программирования не силен.

  • Алексей Ноя 10, 2014 в 17:14

    Как сделать чтобы меню не схлопывалось? Когда раскрыта ссылка из меню чтобы активный пункт меню был выделен и меню было раскрыто? Спасибо!

    • Заур Магомедов
      Заур Магомедов Ноя 10, 2014 в 22:24

      небольшие манипуляции с javascript и все будет работать. К сожалению знаний у меня не хватает для этой цели…

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

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

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

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

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