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

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

ОБСУЖДЕНИЕ

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

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

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

Горизонтальное меню в темном стиле с выпадающими пунктами....

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

Горизонтальное многоуровневое фиксированного меню в темном стиле...

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

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

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

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

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

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

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

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....
  • Текущий 1.58/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

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

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

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

Страницы: 1

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


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