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

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

ОБСУЖДЕНИЕ

Фиксированое меню для сайта

Фиксированое меню (вертикальное и горизонтальное)
Просмотров: 2583  Скачан: 364 раз  Комментариев в теме: 0

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

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

 

HTML разметка горизонтальное расположение меню прижатое к верху

<ul class="anyClass1">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Каталог</a></li>
    <li><a href="#">Партнеры</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Доставка</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

HTML разметка вертикальное расположение меню

<div class="layout_column">
    <ul class="anyClass3">
        <li><a href="#">Главная</a></li>
        <li><a href="#">О компании</a></li>
        <li><a href="#">Каталог</a></li>
        <li><a href="#">Партнеры</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">Доставка</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>       
</div>

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

<ul class="anyClass2">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Каталог</a></li>
    <li><a href="#">Партнеры</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Доставка</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.8.min.js"></script>
<script type="text/javascript" src="js/jquery.liFixar.js"></script>
<script type="text/javascript">
$(function(){
    $(window).load(function(){
        $('.anyClass1').liFixar({
            relative:'top',//Край окна, относительно которого будет фиксироваться блок ('top' или 'bottom')
            fixStart:0//Отступ от края окна браузера (любое целое число в пикселях)
        });
        $('.anyClass2').liFixar({
            relative:'bottom',//Край окна, относительно которого будет фиксироваться блок ('top' или 'bottom')
            fixStart:0//Отступ от края окна браузера (любое целое число в пикселях)
        });
        $('.anyClass3').liFixar({
            relative:'top',//Край окна, относительно которого будет фиксироваться блок ('top' или 'bottom')
            fixStart:50//Отступ от края окна браузера (любое целое число в пикселях)
        });
    })
});
</script>
Материалы по теме:

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

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

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....
Интересные публикации:

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

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

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

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (0)

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


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