наверх





Создадим простое, но удобное и понятное для пользователя меню с использованием jQuery. Такое меню можно будет установить практически на любой сайт.


Если вы хотите сразу два вида меню, переключающихся по щелчку, то вы можете это реализовать с использованием, например, jQuery. Сделать это легко и просто, всего лишь использовав одну функцию.

Для начала разметим наш документ.

<div class="block" id="bnToggle">
<a href="/">Главная</a>
<a href="/messages/">Мои сообщения</a>
<a href="/">Пример на BlueCode</a>
</div>

<div class="block" id="bnToggle2">
<a onclick="toggleBlock()" style="cursor: pointer;">переключить меню</a>
</div>


То есть, HTML код нашего меню будет один, менять мы будем лишь его класс.

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

/* общие стили */
.block, .block-new {
  left: 20px;  	/* Отступ слева */
  top: 20px;		/* Отступ сверху */
  position: fixed; 	/* Фиксированное расположение */
  padding: 5px 10px; /* внутренние отступы */
}
.block a, .block-new a{
  font-size: 10pt; /* размер ссылки */
}

/* стили для меню, вид 1 */
.block{
  background: #3483F7; /* фон */
  border: 1px solid #3079ED; /* цвет границы */
}
.block a{
  display: block; /* Расположение ссылок как блочный элемент */
  color: #fff; /* цвет текста */
  text-decoration: none; /* убираем нижнюю линию */
  padding: 2px 3px; /* внутренние отступы */
}
.block a:hover{
  background: #3079ED; /* фон */
}

/* стили для меню, вид 2 */
.block-new{
  background: #f5f5f5; /* фон */
  border-bottom: 1px solid #bbb; /* цвет границы */
}
.block-new a{
  display: inline; /* расположение ссылок как строчные */
  margin-right: 7px; /* отступ справа */
  color: #444; /* цвет текста */
  text-decoration: none; /* убираем нижнюю линию */
  padding: 2px 3px; /* внутренние отступы */
}
.block-new a:hover{
  background: #eee; /* фон */
}


Осталось самое главное: написать функцию, которая будет задействована при событии onclick, которую указали как toggleBlock().

Изначально, для работы jQuery стоит импортировать саму библиотеку:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>


Далее сама функция:

<script language="javascript" type="text/javascript">
function toggleBlock() {
	if ($('#bnToggle').attr('class')=='block') $('#bnToggle').attr('class', 'block-new');
	else $('#bnToggle').attr('class', 'block');
	
	if ($('#bnToggle2').attr('class')=='block') $('#bnToggle2').attr('class', 'block-new');
	else $('#bnToggle2').attr('class', 'block');		
}
</script>


При событии onclick срабатывает функция toggleBlock(), которая сравнивает по идентификатору bnToggle, какой у нас сейчас стоит класс у нашего меню. Если стандартный, то меняем на второй класс и наоборот.

Для присваивания класса мы используем функцию attr(). Так же, можно привести еще несколько примеров с данной функцией:

ПримерОписание
$("div").attr("class") вернет имя класса у первого div-элемента на странице
$("div").attr("class", "divEl") класс всех div-элементов на странице станет равным divEl
$("div").attr({"class":"divEl", "title":"Див"}) класс div-элементов станет равен divEl, а title — "Див"
$(".rool").attr("title") вернет подсказку элемента с классом rool. Если таких элементов на странице несколько — вернет первого из них.





Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.