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

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

ОБСУЖДЕНИЕ

Фиксированное меню на JQuery

Вертикальное фиксированное меню на JQuery
Просмотров: 2942  Скачан: 241 раз  Комментариев в теме: 0

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

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

 

HTML

<ul id="navigation">
    <li class="home"><a href="" title="Home"></a></li>
    <li class="about"><a href="" title="About"></a></li>
    <li class="search"><a href="" title="Search"></a></li>
    <li class="photos"><a href="" title="Photos"></a></li>
    <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
    <li class="podcasts"><a href="" title="Podcasts"></a></li>
    <li class="contact"><a href="" title="Contact"></a></li>
</ul>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
    $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
    $('#navigation > li').hover(
        function () {
            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
        },
        function () {
            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
        }
    );
});
</script>
Материалы по теме:

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

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

Красивое вертикальное меню, реализованное с помощью JavaScript...

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......
Интересные публикации:

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

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

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

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

Hope CenterHope Center

Универсальный шаблон Hope Center на HTML5, был разработан для благотворительного сайта, в шаблоне используется красивый слайдер......

Контактная форма (дизайн)Контактная форма (дизайн)

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

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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