Плавно разворачиваемые пункты меню на основе плавного спойлера 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>

.sliesQ {display: none;}

Пункт меню
содержание спойлера

<div class"mnus mnur">
<a title="Открытие и закрытие спойлера по событию мыши - click левой кнопкой." href="javascript://" class="sliEsq">Пункт меню</a>
<div class="sliesQ">содержание спойлера</div>
</div>

.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;}

Пункт меню
Подпункт 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>

.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;}


<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>