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

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

ОБСУЖДЕНИЕ

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

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

Красивое горизонтальное меню, используется изображения и анимация текста....

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

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией н...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slic...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

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

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

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

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

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

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

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

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

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

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

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

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MySQL

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...
  • Текущий 1.64/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (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
Обновить