вход

Создаем вертикальное меню с эффектом выскакивания при помощи CSS и jQuery

tb

Здравствуйте уважаемые читатели блога mainview.ru. Продолжаем осваивать jQuery и делать сайт более привлекательным и динамичным. Сегодня попробуем создать вертикальное jQuery меню с интересным эффектом. Суть эффекта заключается в том, что при наведении курсора мыши на пункт меню, он раздвигается с эффектом выскакивания. После того как курсор переместился на другую позицию, открытый пункт закрывается и открывается следующий. Здесь мы будем использовать связку jQuery и CSS.

Для того чтобы движения открытия сделать более привлекательными, будем использовать эффект выскакивания (bounce effect). Для этого просто подключим соответствующую библиотеку, что избавит нас от написания большого кода.

Как это выглядит


 

Что нам понадобиться

Фреймворк jQuery – скачать

Плагин jQuery Easing – скачать

Шаг1. Структура меню

Создаем простейшее меню на основе немаркированного списка, где в каждом пункте идут название и описание пункта меню. Приведённый ниже код показывает как выглядит наше меню:


<div id="vnav">
<ul>
<li>
  <h3>Главная</h3>
  <p>Здесь размещается контент для этого пункта меню</p></li>
<li>
  <h3>О сайте</h3>
  <p>Информация о компании и о сайте</p></li>
<li>
  <h3>Портфолио</h3>
  <p>Здесь размещается портфолио</p></li>
<li>
  <h3>Контакты</h3>
  <p>У вас есть вопросы? Можете связаться с нами через контактную форму</p></li>
</ul>
</div>

Шаг 2: Правила CSS

Приведенный ниже код для правил CSS не является обязательным, это просто пример как можно оформить пункт меню. Вы сами можете определить необходимые вам параметры и сделать пункты вашего меню в одном стиле с дизайном вашего сайта. Здесь я использовал некоторые свойства CSS3 для получения интересного эффекта пользовательского интерфейса. Тут вы видите тени для текста и контейнера.


li {
	height:20px;
	width:200px;
    
    /* Выжно! */
	overflow:hidden;  
    
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    
    /* Скругление углов */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
 
    /* Box Shadow */
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;

    /* Text Shadow */
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    padding: 7px 10px 6px;
    margin-top:5px;
    background-color:#a447cf;
}

li p {
	margin-top:10px;
	font-size:12px;
	color:#6CF;
}

Правило Box-Shadow - тень бокса, создает тень для всего элемента, содержащего меню.

Правило Text-Shadow – тень текста, схожа с предыдущим правилом, но действует уже только для текста.

Важное примечание: Убедитесь, что вы указали параметр overflow как hidden. Это скроет часть меню, разворачивать которую мы будем уже при помощи JQuery.

Шаг3. Подключение библиотек.

На этом шаге мы подключаем к нашему документу необходимые библиотеки, прописывая следующий код в шапке документа.


<link type="text/css" href="style.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js" ></script>
<script type="text/javascript" src="custom.js" ></script>

Шаг 4: JQuery

Заключительный этап – написание кода, который и будет управлять состоянием нашего меню в зависимости от событий курсора. Здесь будет использовать свойства MouseOver и MouseOut библиотеки JQuery.


$(document).ready(function(){

    //Указатель мыши над тегом li
    $("li").mouseover(function(){
        $(this).stop().animate({height:'80px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //Указатель мыши не над тегом li
    $("li").mouseout(function(){
        $(this).stop().animate({height:'20px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
    });

});


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

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

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Создаем вертикальное меню с эффектом выскакивания при помощи CSS и jQuery

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.