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

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

ОБСУЖДЕНИЕ

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

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

Вертикальное меню на css3 с применением иконических шрифтов......

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

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

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

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

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

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

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

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

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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