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

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

ОБСУЖДЕНИЕ

Меню с прокруткой

Вертикальное меню с прокруткой
Просмотров: 2266  Скачан: 256 раз  Комментариев в теме: 0

Меню придкльно простое, весит очень мало, подойдёт сайту любой тематики. Если по сути, то это прокрутка картинок, при навидении на которую появляеться подпись (title).

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

 

HTML

<div class="sc_menu_wrapper">
    <div class="sc_menu">
        <a title="Меню" href=""><img src="images/1.jpg" alt="Меню"/></a>
        <a title="Навигация" href=""><img src="images/2.jpg" alt="Навигация"/></a>
        <a title="jQuery" href=""><img src="images/3.jpg" alt="jQuery"/></a>
        <a title="CSS" href=""><img src="images/4.jpg" alt="CSS"/></a>
        <a title="Вертикаль" href=""><img src="images/5.jpg" alt="Вертикаль"/></a>
        <a title="Меню" href=""><img src="images/1.jpg" alt="Меню"/></a>
        <a title="Навигация" href=""><img src="images/2.jpg" alt="Навигация"/></a>
        <a title="jQuery" href=""><img src="images/3.jpg" alt="jQuery"/></a>
        <a title="Навигация" href=""><img src="images/4.jpg" alt="Навигация" /></a>
        <a title="JavaScript" href=""><img src="images/5.jpg" alt="JavaScript"/></a>
        <a title="Меню" href=""><img src="images/1.jpg" alt="Меню"/></a>
        <a title="Навигация" href=""><img src="images/2.jpg" alt="Навигация"/></a>
        <a title="JavaScript" href=""><img src="images/3.jpg" alt="Javascript"/></a>
    </div>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(function(){
    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
</script>
Материалы по теме:

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

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

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

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

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

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

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

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

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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