Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz

Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Раздвижное меню "Accordion"

Главная » Скрипты для uCoz » Раздвижное меню "Accordion"
Раздвижное меню "Accordion" для uCoz

DEMO

Скачиваем АРХИВ, распаковываем и заливаем папку "menu" в корень сайта.
В head ставим:

Code
<script language="javascript" type="text/javascript" src="/menu/jquery.js"></script>  
<script language="javascript" type="text/javascript" src="/menu/accordion.js"></script>

В CSS вставляем:

Code
/* Menu */
.accordion h3 {
  font-size : 11px;
  color : #fff;
  padding-left : 10px;
  background : url(../menu/accordion.png) no-repeat right 0;
  line-height :25p;
  height : 25px;
  cursor : pointer;
  margin : 0;
  text-align : left;
  font-weight : bold;
}
.accordion h3:hover {
  background : url(../menu/accordion.png) no-repeat right -25px;
  color : #ffa;
}
.accordion h3.active {
  background : url(../menu/accordion.png) no-repeat right -50px;
}
.accordion h3.active:hover {
  background : url(../menu/accordion.png) no-repeat right -75px;
}
.accordion p {
  display : none;
  margin : 0;
  padding : 7px 0 7px 7px;
}
.accordion a {
  font-size : 11px;
  color : #fff;
  text-align : left;
  font-weight : bold;
  padding-left : 15px;
}
.accordion p.linked a {
  background : url(../menu/bull.gif) no-repeat 0 50%;
}
.accordion p.linked a:hover {
  background : url(../menu/bulls.gif) no-repeat 0 50%;
}
/* ---------- */

Далее редактируете ссылки и ставите код:

Code
<div class="accordion">  
  <h3>Главное меню</h3>  
  <p class="linked">
  <a href="/">Главная страница</a><br/>
  <a href="/gb/">Гостевая книга</a><br/>
  <a href="/index/0-3">Обратная связь</a><br/>
  <a href="/board/">Доска объявлений</a><br/>
  <a href="/publ/">Каталог статей</a><br/>  
  <a href="/dir/">Каталог сайтов</a><br/>
  <a href="/blog/">Блог</a><br/>
  <a href="/faq/"><font color="#ff8c00">FAQ (вопрос/ответ)</font></a><br/>
  </p>  
  <h3>Компьютер</h3>  
  <p class="linked">
  <a href="/load/">Каталог файлов</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  </p>  
  <h3>Отдохни</h3>  
  <p class="linked">
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  </p>  
  <h3>Форум</h3>  
  <p class="linked">
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  <a href="/">Пусто</a><br/>
  </div>  
  <br />

В старой системе uCoz просто создайте глобальный блок, вставьте код и разместите ссылку на него в нужном вам месте - например создаем глобальный блок, называем его "MENU", ставим в него данный код, сохраняем и код блока $GLOBAL_MENU$ ставим в шаблон.

В новой системе -

Установка №1:

Помещаем код между:

Code
<!-- <sblock_menu> -->

  сюда ставим код

<!-- </sblock_menu> -->

далее идем в быструю замену, режим замены многострочный,

в верхнее поле - если меню слева ставим $GLOBAL_CLEFTER$

если меню справа ставим $GLOBAL_DRIGHTER$, а в нижнее поле ставим:

меню слева

Code
<!-- <sblock_menu> -->

  здесь код меню

<!-- </sblock_menu> -->
$GLOBAL_CLEFTER$

меню справа:

Code
<!-- <sblock_menu> -->

  здесь код меню

<!-- </sblock_menu> -->
$GLOBAL_DRIGHTER$

жмем "заменить"

Если всё сделали правильно у вас появится новое меню.

Старое меню если не исчезло можно удалить через конструктор, просто удалив блок со старым меню!!!

Установка №2:

Включаем конструктор, создаём новый блок, далее жмём на значок шестерёнки в правом верхнем углу нового блока, далее идем на вкладку "HTML"
удаляем там всё и вставляем наш код. Сохраняем и пользуемся!!!

Ширина меню 188px, если надо пошире или поуже откройте картинку "accordion" в фотошопе, измените размер (только ширину) и сохраните. Формат картинки "PNG".

Просмотров: 1683 | Комментариев: 1 | Опубликовал: WilLiaM | Дата: 06.11.2009

 06.11.2009   

 

 НОВАЯ ЗАЩИТА САЙТА(... 

 11.02.2010   

 

 Просмотр форумa 

 07.12.2013   

 

 Красивый Мини чат д... 

 17.09.2009   

 

 Новый Вид материало... 

 14.03.2010   

 

 flash часы черного ... 

 27.01.2011   

 

 Часики вверху стран... 

 21.12.2009   

 

 Запрет на понижение... 

 06.11.2009   

 

 Новый Софт Блок!! 

 03.12.2009   

 

 Дрожажий рисунок 

 12.12.2013   

 

 Новогодние украшени... 

 22.04.2011   

 

 Приятный мини-профи... 

 04.11.2009   

 

 Добавляем новые шри... 

 13.12.2013   

 

 Гирлянда для сайта 

 07.11.2009   

 

 Топ сайтов 

 09.03.2011   

 

 Up темы (поднятие т... 

 24.04.2011   

 

 Популярность темы 

 17.09.2009   

 

 Угловая Картинка дл... 

 08.02.2010   

 

 Антимат для любого ... 

 07.02.2010   

 

 Скрипт под название... 

 07.11.2009   

 

 Прокрутка баннеров ... 

 12.07.2010   

 

 Бот 

 18.04.2011   

 

 Скрипт мне нравится... 

 05.11.2009   

 

 Репутация и награды... 

 27.09.2009   

 

 форма входа картинк... 

 14.12.2010   

 

 Дополнительные поля... 

 09.06.2014   

 

 Форма заказа для Ин... 

 17.09.2009   

 

 Кнопка "Регист... 

 29.08.2010   

 

 Сегодняшние посетит... 

 23.07.2010   

 

 Блок "Сайты мо... 

 14.03.2010   

 

 flash часы 

 27.01.2010   

 

 Кнопка "Спасиб... 

 22.12.2010   

 

 Быстрая регистрация... 

 17.09.2009   

 

 Онлайн калькулятор ... 

 08.11.2009   

 

 Информация профиля ... 

 17.02.2011   

 

 Радио для сайта (ри... 

 05.11.2009   

 

 Кнопка инфо 

 29.11.2009   

 

 Скрипт раздачи счет... 

 29.01.2011   

 

 Делаем стену через ... 

 02.05.2010   

 

 Окно с вашей просьб... 

 10.10.2009   

 

 Простая статистика ... 

 04.12.2009   

 

 Новый вид материало... 

 01.05.2010   

 

 На форуме гостям не... 

 21.04.2011   

 

 Измененный вид моде... 

 12.07.2010   

 

 Получить код 

 30.01.2011   

 

 Персональная страни... 

 27.09.2009   

 

 Прозрачные AJAX окн... 

 17.03.2009   

 

 Page Promoter 7.6.1... 

 30.09.2009   

 

 Процент проголосова... 

 11.12.2009   

 

 Плавное сворачивани... 

 05.11.2009   

 

 Вид материалов by e... 

 20.11.2009   

 

 Иконка RSS в браузе... 

 08.01.2010   

 

 Репутация полоской ... 

 01.10.2009   

 

 Меню на сайт 

 10.10.2009   

 

 BB-коды в AJAX-окне 

 08.02.2014   

 

 Чвсы для сайта, бло... 

 27.07.2010   

 

 Кинолента с прокрут... 

 20.09.2009   

 

 Черный мини чат 

 31.07.2010   

 

 Новички на сайте 2.... 

 27.10.2009   

 

 Скрытая подпись на ... 

 24.07.2010   

 

 Блок все для css 

 14.03.2010   

 

 flash часы 

 20.05.2010   

 

 Watemark для любого... 

 17.04.2011   

 

 Информация профиля ... 

 18.04.2011   

 

 Виджет погоды на са... 

 01.05.2010   

 

 Дополнение для личн... 

 26.09.2010   

 

 Поиск Пользователей... 

 18.04.2011   

 

 Новая форма входа с... 

 17.11.2010   

 

 Полноценная блокиро... 

 07.10.2010   

 

 Компактная статисти... 

 04.11.2009   

 

 Мини профиль by Fab... 

 24.10.2010   

 

 Кнопка скачать с эф... 

 02.12.2009   

 

 Прямая ссылка на но... 

 11.02.2012   

 

 Оповещание о новых ... 

 20.01.2014   

 

 Кнопка вверх и вниз 

 25.01.2010   

 

 Cкрипт изменяющий м... 

 08.11.2009   

 

 Смотрим то что скры... 

 25.01.2014   

 

 Получить код кнопки... 

 23.01.2011   

 

 Лжестатистика на фо... 

 03.03.2011   

 

 Красивый вид репута... 

 16.11.2010   

 

 Перемещение текста(... 

 17.09.2009   

 

 Аватар в гостевой 

 08.11.2009   

 

 Все страницы модуля 

 19.04.2011   

 

 Новая вставка кодов... 

 06.09.2014   

 

 Up на подобии как в... 

 14.09.2009   

 

 Новый вид фотоальбо... 

 16.09.2009   

 

 Простенький вид нов... 

 14.02.2010   

 

 Авто теги 

 11.02.2012   

 

 Новый вид " По... 

 23.07.2010   

 

 Измененная линия &l... 

 18.09.2009   

 

 Дополнительны смайл... 

 24.11.2009   

 

 Отображение лимита ... 

 08.11.2009   

 

 Иконка поста - u.po... 

 01.05.2010   

 

 Клавиша "Допол... 

 30.07.2010   

 

 Повысить репутацию ... 

 14.03.2010   

 

 flash часы 

 23.07.2010   

 

 Сообщение администр... 

 30.08.2010   

 

 Вид материалов фору... 

 31.08.2014   

 

 Кнопка наверх в вид... 

 16.11.2010   

 

 Раздвижной вид ново... 

 14.03.2010   

 

 flash часы 

 03.03.2010   

 

 Необходимый софт ne... 

Всего комментариев: 1
 
+1 1 RENOWATIO 19.04.2010 19:27:44 такая тема уже была но всёже! неполучается! строчки остаются с лева а сами кубики убегают в права, и получается всё криво! почему ичто можно сделать?
http://ereymentau-test.ucoz.ru/
Цитировать | Редактировать | Удалить
 

3aKa4Ka.at.ua - портал веб мастеров

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2025г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.