qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Горизонтальное меню на jQuery

Горизонтальное меню на jQuery «Menu Kwicks»
Просмотров: 1276  Скачан: 220 раз  Комментариев в теме: 0

Неплохое горизонтальное меню (Menu Kwicks) с выдвижными иконками для вашего сайта реализованное с помощью jQuery. Когда вы наводите курсор мыши на заглавный текст меню, текст плавно уходит в сторону затем выезжает иконка.

Шаг 1 - создание разметки

 

HTML

<div class="container">
    <ul class="kwicks">
        <li id="kwick_1"><a href="#">Home<h3>Front page</h3></a></li>
        <li id="kwick_2"><a href="#">CSS & XHTML<h3>Makeup web page</h3></a></li>
        <li id="kwick_3"><a href="#">Java<h3>Learning Java</h3></a></li>
        <li id="kwick_4"><a href="#">Others<h3>In the other hand</h3></a></li>
        <li id="kwick_5"><a href="#">PHP<h3>PHP Programming</h3></a></li>
        <li id="kwick_6"><a href="#">Resources<h3>Resources for Web Developers</h3></a></li>
        <li id="kwick_7"><a href="#">Themes<h3>Bloggers - Wordpress Themes</h3></a></li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$().ready(function() {
    $('.kwicks').kwicks({
        max : 200,
        duration: 800,  
        easing: 'easeOutQuint'
    });
});
</script>
Материалы по теме:

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией н...

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

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu...

Стильное горизонтальное меню с выдвижными иконками

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимис...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

Горизонтальное многоуровневое фиксированного меню в темном стиле...

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....
Интересные публикации:

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......

JourneyJourney

Шаблон Journey построенный на HTML5, в шаблоне имеется слайдер, стрелка вверх, табы, галерея, контактная форма с Google Maps....

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.5/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить