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

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

ОБСУЖДЕНИЕ

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

Вертикальное меню с прокруткой
Просмотров: 1808  Скачан: 236 раз  Комментариев в теме: 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...

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

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

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

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

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

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

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

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

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

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Hope CenterHope Center

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

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фоном

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

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

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

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

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

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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