Шаблоны для ucoz
Суббота, 04.07.2020, 02:42
Меню сайта
Главная страница Новости Галерея Статьи Форум Друзья сайта

uCoz

Скрипты для uCoz Шаблоны для uCoz Иконки для форума Иконки для групп

Counter-Strike 1.6

Скачать Counter-Strike 1.6 Модели оружия CS 1.6 Модели игроков CS 1.6 Другие модели CS 1.6 Готовые серверы CS 1.6 Другие сервера CS 1.6 Руссификаторы CS 1.6 Background CS 1.6 Программы для CS 1.6 Античиты CS 1.6 Спрайты CS 1.6 Конфиги CS 1.6 Плагины CS 1.6 Патчи CS 1.6 Моды CS 1.6 Карты CS 1.6 Боты CS 1.6

Counter-Strike: Source

Cкачать CSS Перчатки для CSS Руки для CSS Модели игроков для CSS Модели оружия для CSS Готовые сервера для CSS Руссификаторы для CSS Темы меню для CSS Античиты для CSS Плагины для CSS Карты для CSS Моды для CSS Боты для CSS
Категории:
Наши баннеры

Наши баннеры
Наш опрос
Как вам сайт?


Архив
Результаты
Всего голосовало: 1870
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум WEB Мастеров » Система uCoz » Другие скрипты для uCoz » Меню ( аккордеон )
Меню ( аккордеон )
KACTETДата: Вторник, 15.12.2009, 21:34 | Сообщение # 1





[ ]


Шаг №1 - XHTML

Code
demo.html  
<li class="menu">   
<ul>   
<li class="button"><a href="#" class="green">Kiwis <span></span></a></li>  

<li class="dropdown">  
<ul> <!-- Этот список содержит опции, которые выпадают с помощью jQuery -->  

<!-- Каждая опция в своем LI -->  
<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>  

<li><a href="http://www.flickr.com/search/?w=all&q=kiwi&m=text">Flickr   
Stream</a></li>  
</ul>  
</li>  
</ul>  
</li>

Каждый элемент LI содержит UL, который формирует площадь для названия (li.button) и площадь для контента (li.dropdown).

Также у нас элемент якоря находится внутри li.button (кнопка с классом). Эта ссылка позднее будет привязана к специальному событию в jQuery, которое будет открывать секцию со списком при нажатии на ссылку.

Также важно заметить, что элементы списка dropdown спрятаны по умолчанию с помощью свойства CSS display:none.

Шаг №2 - CSS

Code
demo.css  
body{  
/* Задаем цвет по умолчанию, фон и шрифт */  
color:#cccccc;  
font-size:13px;  
background: #302b23;  
font-family:Arial, Helvetica, sans-serif;  
}  

ul{  
margin:0;  
padding:0;  
}  

ul.container{  
/* главный UL */  
width:240px;  
margin:0 auto;  
padding:50px;  
}  

li{  
list-style:none;  
text-align:left;  
}  

li.menu{  
/* Главные элементы списка */  
padding:5px 0;  
width:100%;  
}  

li.button a{  
display:block;  
font-family:BPreplay,Arial,Helvetica,sans-serif;  
font-size:21px;  
height:34px;  
overflow:hidden;  
padding:10px 20px 0;  
position:relative;  
width:200px;  
}  

li.button a:hover{  
/* Removing the inherited underline from the titles */  
text-decoration:none;  
}  

li.button a span{  
/* Этот span играет как правая часть фона секции */  
height:44px;  
position:absolute;  
right:0;  
top:0;  
width:4px;  
display:block;  
}  

/* Разные цветовые схемы для разных отделов */  

li.button a.blue{background:url(img/blue.png) repeat-x top left; color:#074384;}  
li.button a.blue span{ background:url(img/blue.png) repeat-x top right;}  

li.button a.green{background:url(img/green.png) repeat-x top left; color:#436800;}  
li.button a.green span{ background:url(img/green.png) repeat-x top right;}  

li.button a.orange{background:url(img/orange.png) repeat-x top left; color:#882e02;}  
li.button a.orange span{ background:url(img/orange.png) repeat-x top right;}  

li.button a.red{background:url(img/red.png) repeat-x top left; color:#641603;}  
li.button a.red span{ background:url(img/red.png) repeat-x top right;}  

/* Эффекты при наведении */  

li.button a:hover{ background-position:bottom left;}  
li.button a:hover span{ background-position:bottom right;}  

.dropdown{  
/* Расширяющиеся списки */  
display:none;  
padding-top:5px;  
width:100%;  
}  

.dropdown li{  
/* Каждый элемент в таких списках */  
background-color:#373128;  
border:1px solid #40392C;  
color:#CCCCCC;  
margin:5px 0;  
padding:4px 18px;  
}

Шаг №3 - jQuery

Для начала подключаем все необходимые скрипты в шапке документа:

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript" src="jquery.easing.1.3.js"></script>  
<script type="text/javascript" src="script.js"></script>

Как Вы могли заметить в демо панель выезжает не плавно а с прыжками. Это достигается с помощью плагина easing. Плагин имеет множество разных эффектов, и Вы сможете экспериментировать с ними.

Code
script.js  
$(document).ready(function(){  
/* Скрипт будет выполнен после загрузки страницы */  
/* Смена эффекта для плагина easing */  
$.easing.def = "easeOutBounce";  
$('li.button a').click(function(e){  
/* Находим соответствующий текущей секции список */  
var dropDown = $(this).parent().next();  
/* Закрываем все другие списки, кроме текущего */  
$('.dropdown').not(dropDown).slideUp('slow');  
dropDown.slideToggle('slow');  
e.preventDefault();  
})  
});

Для начала мы задаем метод для плагина easing, который будет использоваться для эффектов slideUp/slideDown. Далее привязываем специальную функцию к кнопке, которая будет запукать процесс при нажатии.

Я также использую метод jQuery slideToggle для проверки видимости элемента на странице, и решения показывать его или прятать. Таким образом, при клике на открытую секцию, она будет сворачиваться, а не оставаться на месте.

После этого мы используем функцию e.preventDefault() для того, чтобы браузер не переходил на другую страницу после клика.
Спасибо за внимания!

Форум WEB Мастеров » Система uCoz » Другие скрипты для uCoz » Меню ( аккордеон )
  • Страница 1 из 1
  • 1
Поиск:
Поиск по сайту
Статистика
Онлайн:


Зарег. на сайте:
Всего: 25645
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них:
Администраторов: 2
Модераторов: 1
Дизайнеров:
Файловиков: 1
Журналистов: 0
Проверенных: 24
Обычных: 25617
Забаненых: 0
Из них:
Парней: 2095
Девушек: 67
Счетчики:
Сегодня нас посетили:
Друзья сайта
Мы в TOP'ax
Свободно Свободно Свободно
СвободноСвободно Свободно
|