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

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню на jQuery «Menu Kwicks»
Просмотров: 1252  Скачан: 217 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

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

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

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню н...

Горизонтальное меню на css3 с замечательным эффектом....

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

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

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

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

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

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

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

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

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Exterior DesignExterior Design

Неплохой html шаблон с готовым набором страниц, на главной странице расположено два слайдера, имеется портфолио, контактная форма......
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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