2

Надо сделать меню на сайт в стиле аккордеон. Как я понимаю, его можно реализовать на javacript/jquery. Может кто-нибудь посоветовать, как сделать?

1
  • У этого меню есть огромный минус - оно не показывает пункт, в котором находится пользователь.
    – Spectre
    11 апр 2012 в 15:13

1 ответ 1

4

Это меню в стиле аккордеон. Зная основы jQuery, несложно и самому, но в инете полно готовых решений. Вот, например:

  1. Несколько вариантов
  2. Простой аккордеон
  3. С небольшим эффектом

Добавлено из комментария.

var mainNav = $('#navigation > ul > li > a');
$('#navigation > ul > li > ul').hide();

$('a').click(function(e) {
  e.preventDefault();
});

mainNav.click(function() {
  $(this).siblings('ul').slideToggle(1000, 'swing');
});
* {
  margin: 0;
  padding: 0;
}
#navigation {
  width: 200px;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
#navigation a {
  display: block;
  padding: 3px 5px;
  background: #036;
  color: #CCC;
  border-bottom: 1px solid #CCC;
}
#navigation ul > li > ul > li > a {
  background: #CCC;
  color: #036;
  border-top: 1px solid #036;
}
#navigation ul > li > ul > li:first-child > a {
  border-top: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
  <ul>
    <li><a href="">Пункт 1</a>
      <ul>
        <li><a href="">подпункт 1.1</a>
        </li>
        <li><a href="">подпункт 1.2</a>
        </li>
        <li><a href="">подпункт 1.3</a>
        </li>
        <li><a href="">подпункт 1.4</a>
        </li>
        <li><a href="">подпункт 1.5</a>
        </li>
        <li><a href="">подпункт 1.6</a>
        </li>
        <li><a href="">подпункт 1.7</a>
        </li>
        <li><a href="">подпункт 1.8</a>
        </li>
      </ul>
    </li>
    <li><a href="">Пункт 2</a>
      <ul>
        <li><a href="">подпункт 2.1</a>
        </li>
        <li><a href="">подпункт 2.2</a>
        </li>
        <li><a href="">подпункт 2.3</a>
        </li>
        <li><a href="">подпункт 2.4</a>
        </li>
      </ul>
    </li>
    <li><a href="">Пункт 3</a>
      <ul>
        <li><a href="">подпункт 3.1</a>
        </li>
        <li><a href="">подпункт 3.2</a>
        </li>
        <li><a href="">подпункт 3.3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

7
  • У аккордеона другая физика (на если открыть пару и закрыть один, видно), это не совсем то.
    – Макс88
    11 апр 2012 в 15:16
  • Ну, если жизненно необходимо именно такое меню, то снимите скрипт с того сайта. Проблем то на пять минут...
    – Deonis
    11 апр 2012 в 16:22
  • Уже думал, проблем куча. Все скрипты в каком то одном файле, очень много чего напиханно, плюс в сайтостроении я еще новичек((
    – Макс88
    11 апр 2012 в 16:27
  • 3
    Набросал вам свой вариант
    – Deonis
    11 апр 2012 в 17:07
  • Deonis, спасибо, но я скопировал код, подключил jquery последнюю, но на локалке все меню отображается раскрытым, выпадения/сжатия не работают, в чем может быть причина?
    – Макс88
    11 апр 2012 в 17:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.