Привет всем! Давненько не писал в свой блог. Работа, хлопоты — сами понимаете — скучать некогда. Из последних новостей — разочарование в Periscope, работа которого была протестирована во время конференции «Маркетинг без пыли«. Несмотря на наличие достаточно скоростного Интернет-канала и современный смартфон — качество записи желает значительных улучшений — не говоря уже о полной рассинхронизации звука и видео. Пример доступен по ссылке. В целом, основной посыл в данном случае прост: пишем все на локальное устройство, и при наличии возможности транслируем в он-лайн на свой канал Youtube штатными средствами. Но локальная запись — в приоритете, да … Но вернемся к сегодняшней теме, которая возникла у меня из-за одного интересного сайта: сайт заказчика устраивает, но еще нужно вертикальное меню, да еще и раздвижное… реализовать его штатными средствами не удалось, да и с десяток протестированных плагинов, которые в теории должны были решить данную проблему — тоже не порадовали своим результатом. В итоге было принято решение использовать связку HTML + JQuary (кстати, больше примеров рабочего кода на html — по ссылке).
Сам код представлен ниже:
<html>
<head>
<script src=»http://code.jquery.com/jquery-latest.js»></script>
<style>
h3 { cursor:pointer;}
</style>
</head>
<body>
<div class=»box»>
<h3><span>Пункт 1</span></h3>
<ul id=»mylist»>
<li><a href=»#»>Подпункт 1</a></li>
<li>Подпункт 2</li>
<li>Подпункт 3</li>
<li>Подпункт 4</li>
<li>Подпункт 5</li>
<li>Подпункт 6</li>
<li>Подпункт 7</li>
<li>Подпункт 8</li>
<li>Подпункт 9</li>
<li>Подпункт 10</li>
</ul>
</div>
<div class=»box»>
<h3><span>Пункт 2</span></h3>
<ul id=»mylist»>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
<li>Подпункт 3</li>
</ul>
</div>
<div class=»box»>
<h3><span>Пункт 3</span></h3>
<ul id=»mylist»>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
<li>Подпункт 3</li>
</ul>
</div>
<div class=»box»>
<h3><span>Пункт 4</span></h3>
<ul id=»mylist»>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
<li>Подпункт 3</li>
</ul>
</div>
<br><h3>Пункт 5</h3>
<br><h3>Пункт 6</h3>
<script>
$(document).ready(function(){
$(«ul#mylist»).hide();
$(«h3 span»).click(function(){
$(this).parent().next().slideToggle();
});
});
</script>
</body>
Как видите — пункты меню прописываются с помощью тегов li, а подпункты меню расположены в открывающемся по клику на пункте меню слое. Пример рабочего кода — ниже:
Пункт 1
- Подпункт 1
- Подпункт 2
- Подпункт 3
- Подпункт 4
- Подпункт 5
- Подпункт 6
- Подпункт 7
- Подпункт 8
- Подпункт 9
- Подпункт 10
Пункт 2
- Подпункт 1
- Подпункт 2
- Подпункт 3
Пункт 3
- Подпункт 1
- Подпункт 2
- Подпункт 3
Пункт 4
- Подпункт 1
- Подпункт 2
- Подпункт 3
Пункт 5
Пункт 6
Интеграция готового кода вертикальное меню осуществляется в меню виджетов в виде html-кода. Естественно, стандартное меню нужно убрать.
В целом код достаточно прост, и не требует каких-либо пояснений. В случае вопросов — пожалуйста, пишите на почту.
Всем пока!