Главная » 2012 » Март » 16 » Скрипты uCoz: Простенькое меню на slideToggle для Ucoz
18:27
Скрипты uCoz: Простенькое меню на slideToggle для Ucoz

Простенькое меню на slideToggle для Ucoz


Советуем посмотреть:



Простенькое раздвижное меню на slideToggle. Быстро работает и загружается.
Там, где оно должно быть:
Code
<span class="menu2"><a onclick="$('#menu2').slideToggle(400);" href="javascript://"><b>Категория 1</b></a></span>
<div id="menu2" style="display:none"><span class="menu">
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
</span></div>

<span class="menu2"><a onclick="$('#menu3').slideToggle(400);" href="javascript://"><b>Категория 2</b></a></span>
<div id="menu3" style="display:none"><span class="menu">
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
</span></div>

<span class="menu2"><a onclick="$('#menu4').slideToggle(400);" href="javascript://"><b>Категория 3</b></a></span>
<div id="menu4" style="display:none"><span class="menu">
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
</span></div>

<span class="menu2"><a onclick="$('#menu5').slideToggle(400);" href="javascript://"><b>Категория 4</b></a></span>
<div id="menu5" style="display:none"><span class="menu">
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
</span></div>

<span class="menu2"><a onclick="$('#menu6').slideToggle(400);" href="javascript://"><b>Категория 5</b></a></span>
<div id="menu6" style="display:none"><span class="menu">
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
</span></div>

<span class="menu2"><a onclick="$('#menu7').slideToggle(400);" href="javascript://"><b>Категория 6</b></a></span>
<div id="menu7" style="display:none"><span class="menu" align="left">
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
</span></div>

<span class="menu2"><a onclick="$('#menu8').slideToggle(400);" href="javascript://"><b>Категория 7</b></a></span>
<div id="menu8" style="display:none"><span class="menu">
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
<li><a href="/" title="">Ссылка</a></li>
</span></div>


В CSS в любое место:
Code
.menu2 {height:30px;width: 270px;text-align: left; margin-top:1px;}
.menu2 a:link, .menu2 a:visited {color:#000000;padding-left:20px;line-height:30px;display:block;font-weight:normal;background: #FFFFFF ;border-top: 1px solid #212121;border-right: 1px solid #212121;border-left: 1px solid #212121 ;border-bottom: 1px solid #212121;text-align: left; margin-top:1px;}
.menu2 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:20px;line-height:30px;display:block;font-weight:normal;background: #212121 ;text-align: left; margin-top:1px;}


Настраиваем ссылки под себя и готово!
Материал взят с сайта infoscript.ru













Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Просмотров: 405 | Добавил: Ahmed | Теги: ucoz, UCOZ:, на, Простенькое, slideToggle, для, меню, Скрипты | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: