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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

Jquery меню горизонтальноеJquery меню горизонтальное с анимир...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

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

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

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

Горизонтальное меню на css3 с замечательным эффектом....
Интересные публикации:

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

MinimoSity v1.1MinimoSity v1.1

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

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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