Привет всем! Давненько не писал в свой блог. Работа, хлопоты — сами понимаете — скучать некогда. Из последних новостей — разочарование в 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-кода. Естественно, стандартное меню нужно убрать.
В целом код достаточно прост, и не требует каких-либо пояснений. В случае вопросов — пожалуйста, пишите на почту.
Всем пока!
Support the Blog!
Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️
Donate via PayPal
Donate via Revolut