+7 (911) 913-40---
menu
person
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Обо всём » Собираем скрипты » Фиксируется меню (Меню не уходит вверх)
Фиксируется меню
artnovДата: Среда, 10.06.2015, 21:29 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 151
Награды: 0
Репутация: 0
Статус: Offline
В CSS

Код
#menu {
          width: 100%;
          text-transform: uppercase;
          text-align: center;
          line-height: 30px;
          background: #535353;
}
        #menu ul {
          padding:0;
          margin:0;
          width:100%;
        }
        #menu li{
          display: inline;
          list-style:none;
          margin: 5px 10px;
        }
           #menu li a {
              padding:5px 10px;
              color:#fff;
              text-decoration: none;
           }
           #menu li a:hover{
              background: #868686;
              color: #oooo;
}
#menu.default {
          width:100%;
}
#menu.fixed {
          position:fixed;
          top:0; left:0;
          width:100%;
}


В Java Script

Код
$(document).ready(function(){
       
           var $menu = $("#menu");
       
           $(window).scroll(function(){
               if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
                   $menu.removeClass("default").addClass("fixed");
               } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                   $menu.removeClass("fixed").addClass("default");
               }
           };);//scroll
       };);


В HTML
Код
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Галерея - Картины для интерьера</title>

  <style type="text/css">
   
  body {
width: 50%;
min-width:660px;
}  
   
#menu {
     width: 100%;
     text-transform: uppercase;
     text-align: center;
     line-height: 30px;
     background: #535353;
}
   #menu ul {
     padding:0;
     margin:0;
     width:100%;
   }
   #menu li{
     display: inline;
     list-style:none;
     margin: 5px 10px;
   }
      #menu li a {
         padding:5px 10px;
         color:#fff;
         text-decoration: none;
      }
      #menu li a:hover{
         background: #868686;
         color: #oooo;
}
#menu.default {
     width:100%;
}
#menu.fixed {
     position:fixed;
     top:0; left:0;
     width:100%;
}

</style>

<center>

<p><link rel="stylesheet" type="text/css" href="http://www.novickiy.ru/SLAD/Slideshap/css/style.css" />  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.novickiy.ru/SLAD/Slideshap/js/jquery.flexislider.js" type="text/javascript"></script>
</head>
<body>
  <div id="slider">
  <div id="imageloader">
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/ajax-loader.gif" />
  </div>
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample1.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample2.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample3.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample4.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample5.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample6.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample7.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample8.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample9.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample10.jpg" />
  <img src="http://www.novickiy.ru/SLAD/Slideshap/images/sample11.jpg" />
   
  </div>

<br>

  <div id="menu" class="default">
         <ul>
             <li><a href="http://novickiy.ru/photo/2">Пейзаж</a></li>
             <li><a href="http://novickiy.ru/photo/1">Голландия</a></li>
             <li><a href="http://novickiy.ru/photo/3">Натюрморт</a></li>
             <li><a href="http://novickiy.ru/photo/10">Петербург</a></li>
             <li><a href="http://novickiy.ru/photo/8">Жанр</a></li>
         </ul>
</div>    
      
      
      
      

<p style="text-align: center;"><span style="font-size:20px;"><strong>Добро пожаловать в <a href="http://www.novickiy.ru/photo">галерею</a></strong></span></p>

<p style="text-align: center;"><strong>Картина - это оригинальный подарок друзьям. Живопись - редкий и удачный корпоративный подарок, для оформления интерьеров квартир, домов и офисов. На сайте представлены работы художника. В галерее: пейзаж, натюрморт, сюжетные картины и др.</strong></p>

<center><span style="color:#FF0000;"><strong>Все картины написаны маслом на холсте.</strong></span></center>

<table border="0" cellpadding="1" cellspacing="1" dir="ltr" style="width: 100%;">
  <tbody>
  <tr>
  <td><a href="http://novickiy.ru/photo/2"><img alt="Пейзаж" src="http://www.novickiy.ru/SLAD/Slideshap/images/sample5.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>

  <p>Пейзаж по своей природе искусство, в котором наиболее непосредственно выражаются эмоции. В этом смысле пейзаж можно было бы сравнить с музыкой. Цветовые оттенки красочной палитры передают в картине гамму чувств, даже без ясно обозначенного литературного сюжета.</p>
  </td>
  <td><a href="http://novickiy.ru/photo/1"><img alt="Голландские пейзажи" src="http://www.novickiy.ru/_ph/1/2/433340324.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>
  <p>Голландские пейзажи Нидерландская буржуазная революция (1566–1609) оживила культурную жизнь страны и способствовала творческому прогрессу. На XVII век приходится необычайный расцвет голландской живописи и всех ее жанров, наиболее распространенным, становится пейзажный.</p>
  </td>
  </tr>
  <tr>
  <td><a href="http://novickiy.ru/photo/6"><img alt="Морские пейзажи" src="http://www.novickiy.ru/SLAD/Slideshap/images/sample9.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>
  <p>Морские пейзажи украсят любой интерьер кабинета, офиса, квартиры, подчеркивая особый стиль помещения. Морской пейзаж- это жанр изобразительного искусства, в котором основной предмет изображения — виды морей, побережья, водного пространства, моря.</p>
  </td>
  <td><a href="http://novickiy.ru/photo/3"><img alt="Натюрморт" src="http://www.novickiy.ru/SLAD/Slideshap/images/sample4.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>
  <p>Натюрморт, жанр изобразительного искусства (главным образом станковой живописи), который посвящен изображению вещей, размещенных в единой среде и организованных в группу.</p>
  </td>
  </tr>
  <tr>
  <td><a href="http://novickiy.ru/photo/10"><img alt="Картины с видами Петербурга" src="http://www.novickiy.ru/SLAD/Slideshap/images/sample2.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>
  <p>Картины с видами Петербурга украсят любой интерьер помещения, подчеркивая особый стиль. Картина придаст любому помещению особый шарм.</p>
  </td>
  <td><a href="http://novickiy.ru/photo/4"><img alt="Картины с цветами" src="http://www.novickiy.ru/SLAD/Slideshap/images/sample6.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>
  <p>Картины с цветами украсят любой интерьер помещения, подчеркивая особый стиль. Картина придаст любому помещению особый шарм.</p>
  </td>
  </tr>
  <tr>
  <td><a href="http://novickiy.ru/photo/8"><img alt="Жанровая живопись" src="http://www.novickiy.ru/SLAD/Slideshap/images/sample7.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>
  <p>Жанровая живопись Жанр — особая категория, позволяющая объединить произведения живописи разных эпох по предметам изображения.</p>
  </td>
  <td><a href="http://novickiy.ru/photo/5"><img alt="Картины" src="http://www.novickiy.ru/_ph/5/2/448228832.jpg" style="margin: 5px; float: left; width: 120px; height: 120px;" /></a>
  <p>Картины с Абстракцией украсят любой интерьер помещения, подчеркивая особый стиль. Картина придаст любому помещению особый шарм.</p>
  </td>
  </tr>
  </tbody>
</table>

<center><br />
<br />
$MYINF_50$</center>

<hr />

<p> </p>

<p>Одним из самых совершенных украшений интерьера являются картины. Их можно подобрать под абсолютно любой стиль, от классики до модерна. Никогда не бывает лишних картин в интерьере, они одинаково хорошо смотрятся и в квартирах и в офисных помещениях, отлично оживляя интерьер. Наш сайт поможет подобрать картину, подходящую именно Вам, которая будет соответствовать вашему интерьеру.</p>
</center>

<script type='text/javascript'>

$(document).ready(function(){
   
         var $menu = $("#menu");
   
         $(window).scroll(function(){
             if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
                 $menu.removeClass("default").addClass("fixed");
             } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                 $menu.removeClass("fixed").addClass("default");
             }
         });//scroll
     });

</script>


ПРИМЕР
В html менять на своё


Artnov
 
Форум » Обо всём » Собираем скрипты » Фиксируется меню (Меню не уходит вверх)
  • Страница 1 из 1
  • 1
Поиск: