17:28 Фиксируется меню | |
Фиксированное меню под шапкой (HTML + CSS + jQuery) – меню размещается под шапкой сайта, но, при прокрутке веб страницы, меню фиксируется вверху окна браузера. Если посетитель начнет крутить мышку назад, то меню вернется на свое прежнее место под шапку сайта. В 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%; }
Код
$(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 };);
Код
<!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>
| |
|
| |
| Всего комментариев: 0 | |