Если все такие пункты разместить друг под другом, то возможно меню станет таким большим, что его высота, превысит высоту основного контента. Со стороны это будет не очень красиво, к тому же в таком сплошном списке тяжело что-то найти. Чтобы все сгруппировать и уменьшить, нужно сделать такую вещь как раздвижное меню.
Принцип раздвижного меню в том, что пункты меню разбиваются на группы, и эти группы скрываются, видно только название группы. При нажатии на название, выезжает список из определенного количества пунктов.
Как сделать раздвижное меню? В этом нам поможет - jQuery. С помощью него, все будет работать плавно и красиво, как в примере выше. Приступим к реализации раздвижного меню и выполним несколько пунктов.
jQuery скрипт
Как и обычно, при работе с jQuery, нужно подключить его библиотеку. Все как обычно, в шапке или подвале осуществляем подключение, если конечно, Вы этого не делали раньше, для других скриптов.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
После библиотеки добавляем скрипт. который будет совершать анимацию.Скриптов будет 3, каждый из них по разному совершает анимацию.
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li span").click(function() {
$("#menu ul:visible").slideUp("normal");
if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
$(this).next().slideDown("normal");
}
});
});
</script>
Данный скрипт работает так, что при нажатии на название категории выдвигается список, но при нажатии на другую категорию, она начинает раскрываться, в то время как первая закрывается. То есть открыта всегда только одна категория. Если Вам нужно, чтобы открытые категории не закрывались автоматически, то замените скрипт на новый, указанный ниже.
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li span").click(function() { $(this).next().slideToggle("normal"); });
});
</script>
Есть еще один скрипт, на который Вы можете заменить основной. Его фишка в том, что выдвижение меню при наведении происходит. Не нужно щелкать мышью, просто наведите курсор на название категории и все. Так что Выбирайте какой именно скрипт, более всего подходит Вам.
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li").hover(function() { $(this).children("ul").slideToggle("normal"); });
});
</script>
HTML разметка
Теперь, в нужном месте на Вашем сайте, нужно вывести HTML-разметки. Ну или немного переделать свою, чтобы она стала похожей как в примере.
<ul id="menu">
<li><span>Пункт меню 1</span>
<ul>
<li><a href="">подпункт 1</a></li>
<li><a href="">подпункт 2</a></li>
<li><a href="">подпункт 3</a></li>
<li><a href="">подпункт 4</a></li>
<li><a href="">подпункт 5</a></li>
</ul>
</li>
<li><span>Пункт меню 2</span>
<ul>
<li><a href="">подпункт 1</a></li>
<li><a href="">подпункт 2</a></li>
<li><a href="">подпункт 3</a></li>
<li><a href="">подпункт 4</a></li>
<li><a href="">подпункт 5</a></li>
</ul>
</li>
<li><span>Пункт меню 3</span>
<ul>
<li><a href="">подпункт 1</a></li>
<li><a href="">подпункт 2</a></li>
<li><a href="">подпункт 3</a></li>
</ul>
</li>
</ul>
Сложного ничего нет, все организовано с помощью - ul-списков.
CSS стили
Ну и напоследок, чтобы задать корректный вид нашему меню, надо прописать стили. Если Вы не впервые работаете с CSS, то сможете с легкостью настроить стили под себя.
ul#menu, ul#menu ul{
list-style:none;
margin: 0px;
padding: 0px;
width: 250px;
-webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);}
ul#menu a,ul#menu span{display: block; text-decoration: none;}
ul#menu li {margin-top: 1px;}
ul#menu li a,ul#menu li span{
background: #1ba600;
color: #fff;
padding: 7px;}
ul#menu li a:hover,ul#menu li span:hover{background: #333;}
ul#menu li ul li a{
background: #eee;
color: #000;
padding-left: 20px;}
ul#menu li ul li a:hover{background: #ddd;}
Больше ничего не нужно. Данный способ не очень сложный и имеет несколько видов реализации, все зависит от выбранного Вами скрипта.
На этом все, спасибо за внимание. 🙂
