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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

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

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

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

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

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

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......
Интересные публикации:

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

Sooshal v2.4Sooshal v2.4

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Облако теговОблако тегов на css

В данном примере представлен довольно приятный дизайн облака тегов, который реализован с помощью CSS...

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

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

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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