18/7
 
   

  • Destiny Sphere Unlimited

    Destiny Sphere Unlimited – это военная онлайн стратегия, где игроку даётся возможность управлять территорией. В начале игры вам предоставляется территория, которую вы должны превратить в целую колонию.

    В игры вы сможете зарабатывать с помощью торговли ресурсами или грабежами. Полученные деньги можно использовать для развития вашей колонизации, но и непосредственно на модернизацию армии.

  • Freelancer

    Многострадальный Freelancer не хочется остервенело ругать – жалко и не так уж плохо. Нет и желания брызгать слюной, забивая драгоценное место восторженными "Oh, my god! This is sooo amazing!" В оригинале это полупустой колодец, который суждено наполнить проходящим мимо. Мир, который еще предстоит населить копошащейся фауной. Ситуация до боли напоминает историю с Neverwinter Nights, невероятно тоскливой в "голом" виде, но приобретшей привлекательность и львиную долю популярности за счет любительских модов. Так же и во Freelancer'е редкие пилоты с широкими каналами на пару с такими же умниками уже нарезают круги по пятидесяти системам сектора. Когда бесконечный променад надоест, у «почти вселенной» появится шанс стать полноценным миром со всеми вытекающими.

  • Rayman 3: Hoodlum Havoc

    Каждый уровень диктует свой определенный стиль игры. В самом начале Рэймен, вцепившись в спутника Мерфи, носится от безысходности по окрестностям и коллекционирует красных светлячков. Спустя полчаса герой может выступить в роли профессионального сноубордиста и прокатиться по тоннелю, оформленному в безбашенном стиле диско 80-х.

  • UFO: Aftermath

    В отличие от оригинала десятилетней давности, тактическая часть игры основана на так называемой Simultaneous Action System (SAS). Раздав команды членам отряда, мы откидываемся в кресле, больно стукаясь головой о спинку, и наблюдаем за результатами собственных ошибок.Погодные условия, смена дня и ночи и полное отсутствие самостоятельности пехотинцев обеспечат особое наслаждение на ближайшие сорок-пятьдесят часов. Смущает, правда, что от такого дикого "разнообразия" рискуешь гораздо раньше свихнуться.

  • Master of Orion III

    Master of Orion III – своего рода достижение, игра, которой тесно в принятых рамках жанра. Проект подкупает своим масштабом, безграничными возможностями, но ряду аспектов определенно не достает взвешенности, а самым спорным моментам не хватает продуманности.

  • Star Wars Galaxies (MMORPG)

    Графический движок - поистине повод для гордости разработчиков и обильного слюновыделения даже у самых прожженных игроков. Присмотритесь к кадрам – все они сняты во время игры! Да, да, это не вставки, а сам игровой процесс! Вы скажете, что верится с трудом. И тут я полностью и всецело поддержу – в это невозможно поверить. Так что это не факт. Не, братцы, это не факт. Это куда больше, чем факт! Так оно и будет на самом деле!

  • Virtual Boy

    Почему-то несведущие люди все до единого приняли появившееся у меня красно-черное чудо за мерчандайз для любителей истории покорения космоса. А узнав о том, что на самом деле это компьютерная игровая система, решили, что это аналог «Матрицы», не меньше. Так что один бонус я уже обозначил – "очки виртуальной реальности” (куда встроены и слот для картриджа, и все игровое железо), прочно закрепленные на треноге, могут отлично украсить квартиру компьютерщика-маньяка. Но стоит подключить к этому делу джойстик (один, в него также встроен аккумулятор), как "луноход” превращается в

  • GT Advance 3: Pro Concept Racing

    Локализованная версия японской аркадной гоночки Advance GT2, снискавшая заслуженную популярность на родине благодаря динамичному геймплею и гигантскому выбору из 90 машин и 46 трасс. Пусть использующий аналог Mode 7 графический движок смотрится устаревшим на фоне продвинутых трехмерных представительниц жанра Sega Rally и V-Rally 3, он неплохо справляется со своими обязанностями, стабильно поддерживая 60 кадров в секунду и бережно сохраняя ощущение высокой скорости, которым может похвастать далеко не каждая гоночная игра для GBA.

  • Антология охоты и рыбалки выпуск 3 (4 в 1)

    Антология охоты и рыбалки выпуск 3 (4 в 1): - Hunting Unlimited 2009 - Hunting Unlimited 2008 - In-Fisherman Freshwater Trophies - Trophy Bass

    Hunting Unlimited 2009
    В консервативном жанре охотничьих симуляторов наиболее показательной для нас является серия Hunting Unlimited. Конкуренты в лице Bass Pro Shops и Cabela’s из года в год стараются хоть как-то совершенствовать свои игры: дорабатывают дизайн, добавляют новые спецэффекты, меняют условия охоты — то есть растут, хоть и очень медленно. К тому же за этими сериями стоят одноименные розничные сети охотничьих магазинов, а значит, волей-неволей приходится держать марку.

  • Aztaka (2009/Русский)

    По мотивам легенды Ацтеков, Aataka бросает вас в разгар битвы богов и человечества. Кто одержит победу? Играя Huitzilo, наследником бога Солнца, обученный искусствам боя и магии, только Вы сможете спасти ваших людей от гнева Ацтекских богов.
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Инфо WeB мастеру » Скрипты » Меню ( аккордеон )
Меню ( аккордеон )
Aks1d
  
 Дата: Вторник, 15.12.2009, 01:37 | Сообщение # 1
Aks1d

Сообщений: 19
[ 0 ]
Отключен

Шаг №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
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() для того, чтобы браузер не переходил на другую страницу после клика.
Спасибо за внимания!

Прикрепления: akardion_menu.rar (11.8 Kb)
 
Форум » Инфо WeB мастеру » Скрипты » Меню ( аккордеон )
  • Страница 1 из 1
  • 1
Поиск: