Плавно разворачиваемые пункты меню на основе плавного спойлера jQuery . Вертикальное и горизонтальное меню . |
Главная страница сайта . |
- Описываемое в этих материалах плавно выпадающее меню на основе системного jQuery стоит на главной странице сайта. Через которое собственно и попали сюда . Модифицируется в горизонтальное плавное выпадающее не значительным изменением HTML и CSS . Так же есть материал по некоторому изменению внешнего вида меню .
Исходный вид действующего плавного спойлера .
Пункт меню
содержание спойлера
Исходный текст " Плавного спойлера " .
<script type="text/javascript">
$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});
</script>
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Отрыть слайдер</a>
<div class="sliesQ">содержание спойлера</div>
Изначальная строка CSS . То что должно быть записано в таблицу CSS .sliesQ {display: none;}
Добавим в HTML спойлера стиль вида кнопки .
Пункт меню
содержание спойлера
Исходный текст " Плавного спойлера " с оформлением внешнего вида псевдо кнопки .
<div class"mnus mnur">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">содержание спойлера</div>
</div>
Результат CSS плавного меню .
.sliesQ {position: relative; top: 0px; left: 0px; display: none;}
.mnur {text-align: center; color: #000; border: 1px #000 solid; background-color: #9cf;}
.mnus {width: 200px; padding: 0.3em 0px; background-color: #ccf;}
Добавим в HTML несколько подпунктов меню пункта меню с названиями и классами - mnut , mnup , mnur , mnuq .
Пункт меню
Подпункт 01
Подпункт 02
Подпункт 03
Подпункт 04
Исходный текст " Плавного спойлера " с оформлением внешнего вида псевдо кнопки .
<div class"mnus mnur">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur">Подпункт 01</div>
<div class="mnut mnuq mnur">Подпункт 02</div>
<div class="mnut mnuq mnur">Подпункт 03</div>
<div class="mnut mnuq mnur">Подпункт 04</div>
</div></div>
Результат CSS плавного меню .
.sliesQ {position: relative; top: 0px; left: 0px; display: none;}
.mnur {text-align: center; color: #000; border: 1px #000 solid; background-color: #9cf;}
.mnus {width: 200px; padding: 0.3em 0px; background-color: #ccf;}
.mnut {font-size: 10pt; padding: 2px 0px 3px 0px; background-color: #eee;}
.mnup {margin-top: 3px;}
.mnuq {margin-top: 1px;}
Добавим в HTML ссылки переходов . Получаем блок пункта плавновыпадающего меню .Исходный текст " Плавного спойлера " с ссылками подпунктов меню .
<div class"mnus mnur">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur"><a href="http://" title="Подпункт 01 меню">Подпункт 01</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 02 меню">Подпункт 02</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 03 меню">Подпункт 03</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 04 меню">Подпункт 04</a></div>
</div></div>
Просто сложить стопкой несколько блоков пунктов меню - получается вертикальное плавное меню .Исходный текст вертикального плавного меню меню .
<div class"mnus mnur">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur"><a href="http://runettex.clan.su/..." title="Подпункт 01 меню">Подпункт 01</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 02 меню">Подпункт 02</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 03 меню">Подпункт 03</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 04 меню">Подпункт 04</a></div>
</div></div> <div class"mnus mnur">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur"><a href="http://runettex.clan.su/..." title="Подпункт 01 меню">Подпункт 01</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 02 меню">Подпункт 02</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 03 меню">Подпункт 03</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 04 меню">Подпункт 04</a></div>
</div></div> <div class"mnus mnur">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur"><a href="http://runettex.clan.su/..." title="Подпункт 01 меню">Подпункт 01</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 02 меню">Подпункт 02</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 03 меню">Подпункт 03</a></div>
<div class="mnut mnuq mnur"><a href="http://runettex.clan.su/..." title="Подпункт 04 меню">Подпункт 04</a></div>
</div></div>
Добавить стиль абсолютного позицирования и координат блоков и получается горизонтальное плавное меню .Исходный текст горизонтального плавного меню меню , расположенного по центру страницы .
width: 366px - длинна 3 пунктов меню 120px + 2px на каждый пункт( зазор )
left: 2px; - точка отсчёта расположения первого пункта меню
left: 122px; - точка отсчёта расположения второго пункта меню ( длинна пункта меню 120px + 2px зазора )
left: 244px; - точка отсчёта расположения третьего пункта меню ( длинна двух пунктов меню 240px + 2px на каждый пункт зазора )
<div style="position: relative; top: 0px; left: 0px; width: 100%; text-align: center;">
<div style="position: relative; top: 0px; left: 0px; width: 366px;">
<div class="mnus mnur" style="position: absolute; left: 2px; top: 2px; z-index: 100;">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur"><a href="http://" title="Подпункт 01 меню">Подпункт 01</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 02 меню">Подпункт 02</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 03 меню">Подпункт 03</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 04 меню">Подпункт 04</a></div>
</div></div>
<div class="mnus mnur" style="position: absolute; left: 122px; top: 2px; z-index: 100;">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur"><a href="http://" title="Подпункт 01 меню">Подпункт 01</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 02 меню">Подпункт 02</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 03 меню">Подпункт 03</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 04 меню">Подпункт 04</a></div>
</div></div>
<div class="mnus mnur" style="position: absolute; left: 244px; top: 2px; z-index: 100;">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">
<div class="mnut mnup mnur"><a href="http://" title="Подпункт 01 меню">Подпункт 01</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 02 меню">Подпункт 02</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 03 меню">Подпункт 03</a></div>
<div class="mnut mnuq mnur"><a href="http://" title="Подпункт 04 меню">Подпункт 04</a></div>
</div></div></div>
</div>