BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Фиксированное меню при прокрутке сайта

Фиксированное меню при прокрутке сайта

2016-10-10 / Вр:01:52 / просмотров: 1592

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

Фиксированное меню сверху (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей верхней позиции.

[посмотреть демонстрацию]

Фиксированное меню снизу (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей нижней позиции

[посмотреть демонстрацию]

Фиксированное меню под шапкой (HTML + CSS + jQuery) – меню размещается под шапкой сайта, но, при прокрутке веб страницы, меню фиксируется вверху окна браузера. Если посетитель начнет крутить мышку назад, то меню вернется на свое прежнее место под шапку сайта.

[посмотреть демонстрацию]

Фиксированное меню внизу экрана (HTML + CSS + jQuery) – шапка сайта занимает весь экран, а меню прилепляется к низу экрана. При прокрутке страницы, меню прилепляется к верхней части экрана.

[посмотреть демонстрацию]


Фиксированное меню сверху
(HTML + CSS)

В HTML:

<div class="nav">
<ul>
<li><a href="">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ul>
</div>

В CSS:

.nav {
top:0px !important;
position: fixed;
border: 1px solid #000;
width: 99%;
height: 50px;
background-color: #ccc;
marging:0;
}
li {
list-style: none;
float: left;
padding-right:10px;
}

Самый главный параметр для фиксированного меню для сайта – это:

top:0px !important;
position: fixed;

Фиксированное меню снизу (HTML + CSS)

В HTML:

<div class="nav">
<ul>
<li><a href="">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ul>
</div>

В CSS:

.nav {
bottom:0px !important;
position: fixed;
border: 1px solid #000;
width: 99%;
height: 50px;
background-color: #ccc;
marging:0;
}
li {
list-style: none;
float: left;
padding-right:10px;
}

Самый главный параметр для фиксированного меню для сайта – это:

bottom:0px !important;
position: fixed;

Фиксированное меню под шапкой (HTML + CSS + jQuery)

К примеру, шапка сайта имеет высоту 150 px. И под шапкой размещено фиксированное меню.

Добавьте в HTML вот такой код:

<header>
<h2>BlogGood.ru</h2>
</header>
<nav id="top_nav">
<ul>
<li class="first"><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
<li><a href="">Пункт 4</a></li>
<li><a href="">Пункт 5</a></li>
</ul>
</nav>
<div id="content">
куча текста
</div>

В CSS:

body{
font-family:Arial;
color:#000;
}

header{
height:150px;
background:url(http://bloggood.ru/wp-content/themes/bloggood/images/bloggood.png) no-repeat;
position:relative;
}

/*фиксированное плавающее меню*/
#top_nav{
top: 150px; /*высота шапки в пикселях*/
position: fixed;
z-index: 1000;
border-bottom:1px dotted #999;
border-top:1px dotted #999;
width:100%;
background:#f0f0f0;
}

#top_nav ul li{
float:left;
margin-right:40px;
list-style:none;
padding:15px 0;
color:#666;
}

Строка № 7 – это высота шапки, выставленная по умолчанию 150 px.  Если высоту шапки нужно сделать больше, тогда не забудьте эту цифру поменять во всех местах кода, где она встречается.
Строка № 14 – высота шапки, которая задается в зависимости от ширины шапки .

Теперь jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>

JS

<script>
var h_hght = 150; // высота шапки
var h_mrg = 0; // отступ когда шапка уже не видна

$(function(){

var elem = $('#top_nav');
var top = $(this).scrollTop();

if(top > h_hght){
elem.css('top', h_mrg);
}

$(window).scroll(function(){
top = $(this).scrollTop();

if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
});

});
</script>

Строка №2 – высота шапки. Если высота шапки будет больше, нужно это значение заменить.

var h_hght = 150; // высота шапки 

Фиксированное меню внизу экрана (HTML + CSS + jQuery)

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

Итак, добавьте этот код в HTML:

<div class="firstScreen">
<nav id="top_nav">
<ul>
<li class="first"><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
<li><a href="">Пункт 4</a></li>
<li><a href="">Пункт 5</a></li>
</ul>
</nav>
</div>
<!-- дальше контент -->

Теперь в CSS:

*{margin:0; padding:0;}
.firstScreen
{
height:100%;
background:
fixed url(http://bloggood.ru/wp-content/themes/bloggood/images/bloggood.png) no-repeat 50% 0;
background-size: cover;
}

#top_nav{
bottom:0;
position: fixed;
z-index: 1000;
border-bottom:1px dotted #999;
border-top:1px dotted #999;
background: rgba(200,200,200,0.6);
width:100%;
height:100px;
}
#top_nav ul
{
overflow:hidden;
width:990px;
margin: 25px auto 0;
}
#top_nav ul li
{
float:left;
margin-right:40px;
list-style:none;
padding:15px 0;
color:#5f0f0f;
font-size:1.4em;
font-weight: bold;
}

#top_nav a
{
text-decoration:none;
color:#5f0f0f;
font-family:"Trebuchet MS";
font-size:.9em;
border-bottom:1px dashed #666;
}

Теперь jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>

JS

<script>
$(function(){
// высота "шапки", px
var h_hght = $('.firstScreen').outerHeight();
// высота блока с меню, px
var h_nav = $('#top_nav').outerHeight();
var top;
$(window).scroll(function(){
// отступ сверху
top = $(this).scrollTop();
if((h_hght-top) <= h_nav){
$('#top_nav').css('top','0');
}
else if(top < h_hght && top>0){
$('#top_nav').css({'bottom' : top, 'top':''});
}
else if(top < h_nav){
$('#top_nav').css({'top':'','bottom':'0'});
}
});
});
</script>

Вот и все.
Ковыряйте кода, меняйте под свои нужды и потребности. Естественно, чтобы делать какие-либо изменения в коде, нужно знать, как минимум, основы HTML и CSS.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Фиксированное меню при прокрутке сайта

  1. Кирилл

    Интересный прием, взял на заметку. Только думаю, что он будет красиво смотреться только на коммерческих сайтах или интернет-магазинах

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Да, Кирилл, Вы правы, для коммерческих сайтов или интернет-магазинов такой прием будет красивый и эффектный.

    Ответить

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 718
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3911