RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

Горизонтальное меню с ползунком

Горизонтальное меню с ползунком
Просмотров: 2931  Скачан: 317 раз  Комментариев в теме: 2

Стильное горизонтальное меню с ползунком на css, в меню предусмотрено место для поиска. Фишка данного меню в его анимации а точнее в анимации ползунка, который следует за курсором мыши. Меню представлено в разных цветовых стилях, темном и светлом и с разными ползунками.

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

 

HTML

<div class="container">
    <div class="lightmenu">
        <ul class="lightBlue" id="one">
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="lightsearch" />
        </form>
        </div>
    </div>
    <div class="lightmenu">
        <ul class="lightGreen" id="two">
            <li><a href="#">Home</a></li>
            <li class="current"><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="lightsearch" />
        </form>
        </div>
    </div>
    <div class="lightmenu">
        <ul class="lightPink" id="three">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="current"><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="lightsearch" />
        </form>
        </div>
    </div>
    <div class="lightmenu">
        <ul class="lightRed" id="four">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li class="current"><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="lightsearch" />
        </form>
        </div>
    </div>
    <div class="darkmenu">
        <ul class="darkBlue" id="five">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li class="current"><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="darksearch" />
        </form>
        </div>
    </div>
    <div class="darkmenu">
        <ul class="darkGreen" id="six">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="current"><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="darksearch" />
        </form>
        </div>
    </div>
    <div class="darkmenu">
        <ul class="darkPink" id="seven">
            <li><a href="#">Home</a></li>
            <li class="current"><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="darksearch" />
        </form>
        </div>
    </div>
    <div class="darkmenu">
        <ul class="darkRed" id="eight">
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">News</a></li>
        </ul>
        <div class="searchbox">
        <form method="get" action="">
        <input type="text" value="" onfocus="doClear(this)" name="s" class="darksearch" />
        </form>
        </div>
    </div>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#one,#two,#three,#four,#five,#six,#seven,#eight").lavaLamp({
        fx: "backout", 
        speed: 700,
        click: function(event, menuItem) {
            return false;
        }
    });
});
</script>
Материалы по теме:

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

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

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

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

Горизонтальное мега меню на css3Горизонтальное мега меню на css3

Отличное горизонтальное меню с большое количество пунктов....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

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

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

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

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilyslider...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

JQuery ползунокJQuery ползунок

Красивый горизонтальный JQuery ползунок (Slider) для сайта, реализованный с помощью JQuery....

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (2)
↑ 0 ↓
Vladimir
как это меню сделать фиксированным?
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Для позиционирования используйте свойство - position: fixed.
А положение элемента задается свойствами left, top, right и bottom.

Пример со светлым стилем данного меню:
Открываем стили, находим класс .lightmenu и добавляем к нему свойство position: fixed; и top:0;
Должно получится так :

.lightmenu {
position: fixed;
top:0;
}

В результате меню будет прижато к верху страницы.
Данный пример был показан методом css, так же можно использовать JavaScript. Для более развернутого понимания, прочтите вот эту статью

Ответить Ответ с цитатой

Страницы: 1

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


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