Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Как сделать фиксированное или плавающее меню

Привет! В этой статье хочу поделиться с вами одним простым и надежным способом как можно прикрепить или сделать фиксированное меню для своего сайта. Каждый вебмастер время от времени сталкивается с задачами, которые нужно решить при создании или верстке сайта. И одной из таких задач может быть возможность закрепить меню или какой-либо блок в определенном месте.

фиксированное меню, меню для сайта, плавающее меню

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

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

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

Наверно ответ прост… но если Вам интересно, то о чем я здесь пишу и Вы хотите реализовать данную функцию, чтобы ваше меню стало плавающим и при прокрутке контента меню фиксировалось вверху экрана и выглядело все это приблизительно так:

фиксированное меню, меню для сайта, плавающее меню

Так вот, сделаем мы это с помощью библиотеки jQuery и CSS в три простых шага. Просто выполните все, что описано ниже и у вас все получится:

1. Скачайте себе библиотеку jquery-1.10.2.min.js  и загрузите себе на сервер, например в папку js сайта. Дальше откройте в редакторе, к примеру Notepad++, страницу, в которой находится меню сайта и перед закрывающимся тегом </head> поместите следующий код:

<script src="js/jquery-1.10.2.min.js"></script>

Далее, в <body> страницы нужно вставить инициализирующий код:

<script src="js/jquery-1.10.2.min.js">

После внутри всё того же блока  <body> вставляем следующий код:

 <script>jQuery("document").ready(function($){  
    var nav = $('. container-nav');  
    $(window).scroll(function () {
        if ($(this).scrollTop() &gt; 136) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    }); 
})</script>

2. Теперь нам нужно настроить стили CSS или вид нашего меню. Для этого вставьте следующий код в подключенный к страничке css-файл:

. container-nav { background: rgba(0,0,0,0.7); repeat-x 0 0;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /*---вот эта строчка прикрепит меню к верху--- */
.nav { height: 42px;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}

3. И последнее, что нам нужно сделать, так это внести изменения в HTML файл следующим образом:

<div>
  <div>
     <ul>
/* --В тегах <li></li> заключены заголовки меню--*/
     <li><a href="">Home</a></li>
     <li><a href="">Wordpress</a></li>
     <li><a href="">O saite</a></li>
     <li><a href="">Services</a></li>
     </ul>
<div class="clear"></div> /*--clear floating div--*/
  </div>
</div>

Все готово. Не забудьте сохранять все изменения. Теперь всё, что находится внутри контейнеров “ container-nav ” и “nav”, а это и есть наше меню, будет закреплено к верху страницы и останется перед глазами посетителя при прокрутке контента. Таким же образом Вы можете закрепить любой другой блок на своем сайте, изменив код HTML. Для этого оберните его в div, как показано выше с меню.

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

С уважение, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ