Хостинг от uCoz

Меню сайта
Файлы

Реклама №1
Статистика
Счетчик юзеров:
Материалы:
Онлайн:
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи
Гости
Счетчики:
Главная » Файлы » Ucoz » Скрипты для Ucoz
Выпадающее Drop-Down меню на jQuery
31.03.2012, 17:14

Выпадающее Drop-Down меню на jQuery

Шаг 1 - Установим JS: Напоминаю всем новичкам, что в системе uCoz уже вшита библиотека jQuery, поэтому в самый низ вашей страницы, перед закрывающим тегом , устанавливаем следующий js. [code][/code] Шаг 2 - Установим HTML: отлично теперь давайте разберёмся с основным каркасом html: - основной каркас меню будет создан благодаря спискам ul и li, - поэтому в основные теги li мы поместим контейнер span, в котором будет находиться названия той или иной категории меню - ниже мы создадим основной контейнер div, в котором будет находиться нужная вам информация [code] [/code] Шаг 3 - Установим CSS: Меню почти готово, осталось навести марафет: - обратите внимания, что в html коде, мы прописали основным тегам div в которых находиться ваша информация, два класса, один является стандартный для всех menu_div, второй md1 md2 md3 md4, является индивидуальным для каждого - это делается для того, чтобы каждому контейнеру вы могли прописать нужную ширину width - обратите внимания, что четвёртому основному контейнеру li мы прописали отдельный класс ldd_nu, для того, чтобы прижать его к правой стороне нашего меню. - основному тегу span который отвечает за названия основных категорий, прописаны разные классы mt_title1 и mt_title2 - это создано для того, чтобы вы могли прописать в стилях правую и левую полоску, дабы оградить названия меню друг от друга. [code]/* Выпадающие Drop-Down меню ------------------------------------------*/ .menu_top { display:block; list-style:none; height:30px; background:#444; border: 1px solid #222; margin:0; padding:0; } .menu_top > li{ float:left; position:relative; } .menu_top ul { list-style:none; float:left; border-left:1px solid #292929; margin:10px 0px 10px 20px; padding:0px; } .menu_top ul li a{ font:11px Verdana,Arial,Helvetica,sans-serif; color:#fff; line-height:20px; padding:1px 10px 2px 10px; } .menu_top ul li a:hover{ color:#111; text-shadow:1px 1px 1px #fff; background:#A5A5A5; } .mt_title1, .mt_title2 { font:12px Verdana,Arial,Helvetica,sans-serif; color:#A5A5A5; text-shadow:1px 1px 1px #000; height:30px; line-height:30px; padding:0px 10px; cursor: pointer; } .mt_title1{ border-right:1px solid #292929; } .mt_title2 { border-left:1px solid #292929; } .mt_title3{ font:12px Verdana,Arial,Helvetica,sans-serif; font-weight: bold; color:#FFAE00; text-shadow:1px 1px 1px #000; padding:5px 0px 5px 10px; border-bottom: 1px solid #292929; } .menu_div{ position:absolute; display:none; background: #5A5A5A; border: 1px solid #292929; top:30px; } .md1{ width:350px; left:-1px; } .md2{ width:550px; left:-1px; } .md3{ width:450px; left:-1px; font:11px Verdana,Arial,Helvetica,sans-serif; color:#fff; padding:10px; } .md4{ font:11px Verdana,Arial,Helvetica,sans-serif; color:#fff; padding:10px; width:200px; right:-1px; } .md3 img { float:right; background:#777; padding: 5px 5px 5px 5px; margin: 0px 0px 10px 10px; border: 1px solid #444; } .ldd_nu { float:right!important; } [/code] Наше меню готово, не забывайте, что вы можете добавить свою нужную информацию, но только как говориться с умом, к примеру ссылки на юзербары, баннеры, информеры последних комментарий, статистики, лучших пользователей, rss подписки и многое другое, а вот устанавливать мини чат я вам не советую: - во-первых могут возникнуть технические проблемы с данным решением - во-вторых самое главное, такой чат будет не удобен в целом на этом всё...

Выпадающее Drop-Down меню на jQuery



          
     
     
     
     
Категория: Скрипты для Ucoz | Добавил: DemiD
Просмотров: 703 | Загрузок: 59 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини-профиль
Мини-чат
Опросы
Оцените мой сайт

Всего ответов: 27
Друзья сайта
VYMPEL ELITE
Лучший SA-MP Топ в России

Soft-Diz.3dn.Ru | (C)Мы лучше всех <--->| 2010 | Все права защищены! дизайн сайта Danil_Allonso Копирование дизайна запрещено by Danil_Allonso