Главная » 2011 » Октябрь » 9 » Простенькое меню на slideToggle для Ucoz (Скрипты для ucoz)
09.10.2011, 01:46

Простенькое меню на 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
Источник/Автор: sold93
Категория: Скрипты uCoz | Просмотров: 3128 | Добавил: sold93 | Рейтинг: 4.3/3 |
Теги: Простенькое, slideToggle, uCoz, для, меню, На
Всего комментариев: 14 1 2 »
+3  
1 The_Host   (09.10.2011 15:16) [Материал]
Аватар пользователя
У меня не совсем так как на скрине, но в целом доделать можно и вроде ниче та меню smile

+1  
2 sold93 -Infoscript Team-  (09.10.2011 15:29) [Материал]
Аватар пользователя
ну у меня ссылки во всем контейнере белые....и фон - это фон блока, а не меню.

0  
3 Cezar   (10.10.2011 10:59) [Материал]
Аватар пользователя
МММ красиво)) biggrin

0  
4 Draim   (10.10.2011 22:38) [Материал]
Аватар пользователя
эх думал такое меню а оказалось это только блок(((

0  
5 Voker -Infoscript Team-  (10.10.2011 23:02) [Материал]
Аватар пользователя
Цитирую Draim: эх думал такое меню а оказалось это только блок(((
0_о как блок это нормальное меню может ты не правильно устанавливаешь?

0  
6 sold93 -Infoscript Team-  (10.10.2011 23:06) [Материал]
Аватар пользователя
он наверное про фон говорит

0  
7 Voker -Infoscript Team-  (10.10.2011 23:29) [Материал]
Аватар пользователя
Цитирую sold93: он наверное про фон говорит
Когда то поймет что ошибался=)

0  
8 Draim   (11.10.2011 13:31) [Материал]
Аватар пользователя
Цитирую Voker: Когда то поймет что ошибался=)

Цитирую sold93: он наверное про фон говорит
http://scool5nchk.ucoz.com/bezymjannyj.png
cry cry cry

0  
9 sold93 -Infoscript Team-  (11.10.2011 16:24) [Материал]
Аватар пользователя
у тебя ширина блоков меньше...

1-6 7-10
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]