falbar Плавающее горизонтальное меню на jQuery

Плавающее горизонтальное меню на jQuery

6 августа 2014 3341 0

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

Реклама

Первым делом необходимо нанести HTML разметку на странице. Структура будет состоять из дива, в котором находиться список с пунктами меню:

<!-- Структура скролмени -->
<div class="scrollmenu">
    <ul>
      <li>Пункт №1</li>
       <li>Пункт №2</li>
       <li>Пункт №3</li>
       <li>Пункт №4</li>
       <li>Пункт №5</li>
       <li>Пункт №6</li>
   </ul>
</div>
<!-- Структура скролмени -->

Далее мы наметим несколько блоков для теста:

<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>

И так, структура нашего плавающего горизонтального меню готова, стилизуем его:

/*****Оформление*****/
/*****Оформление*****/
body{margin: 0; padding: 0;}
    .block1,
    .block2,
    .block3{
        border: 2px solid red;
      width: 800px;
       height: 300px;
      margin: 15px auto;
  }
   .block1{background-color: #8EC1DA;}
 .block2{background-color: #420100;}
 .block3{background-color: #6CE26C;}
 div.scrollmenu{
     background-color: #3187D0;
      margin: 0 auto;
 }
       div.scrollmenu ul{
          width: 70%;
         margin: 0 auto;
         padding: 15px 0 0px;
            text-align: justify;
            overflow: hidden;
       }
       div.scrollmenu ul:after{
            content: "";
          width: 100%;
            display: inline-block;
      }
           div.scrollmenu ul li{
               display: inline-block;
              color: #fff;
                text-transform: uppercase;
              cursor: pointer;
            }
/*****END Оформление*****/
/*****END Оформление*****/

div.scrollmenu{
    width: 100%;
    position: fixed;
    top: 0;
 left: 0;
    opacity: 0.3;
   z-index: 999;
   display: none;
}
div.scrollmenu:hover{
    opacity: 1;
}

Общие стили, как видно, я отделил от основных комментариями. После того, как мы написали HTML и CSS, осталось написать сам скрипт, не забываем подключить библиотеку jQuery и приступаем к написанию. Для того что бы реализовать плавающие горизонтальное меню, нам потребуется повесить обработчик прокрутки на окно. Далее в зависимости от величины прокрутки мы показываем или прячем меню.

$(function(){
  $(window).scroll(function(){
        if($(this).scrollTop() > 250)
            $("div.scrollmenu").fadeIn();
     else
            $("div.scrollmenu").fadeOut(400);
 });
});

Вот и всё, плавающие горизонтальное меню готово.

Реклама
Комментариев еще не оставлено
no_avatar