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

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

ОБСУЖДЕНИЕ

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

Фиксированое меню (вертикальное и горизонтальное)
Просмотров: 2430  Скачан: 354 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

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

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

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

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......
Интересные публикации:

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

XMarket v1.1XMarket v1.1

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

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

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

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

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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