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

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

ОБСУЖДЕНИЕ

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

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

Выпадающее меню в темном стиле, реализованное полностью на css...

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

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

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

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

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

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

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

Sooshal v2.4Sooshal v2.4

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

Шаблон Desire Night ClubШаблон Desire Night Club

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

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

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

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

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......
  • Текущий 1.88/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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