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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

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

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

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

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

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css

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

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

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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