Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Выпадающее меню на JavaScript

  • Суббота, 30 июля 2012, 15:54 |
  • Автор: fiamma |
  • Просмотров: 7699 |
  • Комментарии: 4 |
  • В закладки:
Мне очень часто приходится разрабатывать скрипты и дизайн различных проектов. Иногда в проектах приходится создавать выдающее меню. Именно поэтому в данной статье я расскажу как сделать красивое выпадающее меню с эффектом скрытия\показа содержимого.

Выпадающее меню на JavaScript

Для начала нам необходимо написать HTML код выпадающего меню. Выглядит он так:
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu" style="display:none;">
<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>
</ul>

Пишем обработчик сворачивания/разворачивания блока
Теперь необходимо написать сам обработчик для показа\скрытия списка.
Входным параметром функции showElement будет идентификатор того элемента, который необходимо развернуть или свернуть.

После нескольких минут коддинга у меня получился такой скрипт:
<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>
  • Пишет: Den (Гости) |
  • Сообщений: 0 |
  • 29 ноября, 21:11
  • #1
Спасибо большое)) действительно очень простая реализация))
Добавить комментарий