29 Jun 2017, 12:35 avatar

Будем фиксировать менюшку

  1. Адаптировал: irbees2008
  2. Уровень сложности исполнения:нужны навыки css html
Все привет, и это снова я. Ну наверное многие наблюдали на современных сайтах фиксированное меню, которое постоянно на виду ,даже когда прокручиваешь страницу. Мне лично такой вариант нравится, на первом варианте этого сайта была такая плюшка, я еще и подвал (*футер нижния часть сайта) тоже тогда зафиксировал.
Ну такие менюшки бывают нескольких видов, но мы разберем четыре вида.
И так
Вид 1 .Фиксированное меню сверху (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей верхней позиции. Вот этот вариант и был на первом шаблоне этого сайта.
Вот гифка
36.gif (8.35 Mb)
Ну теперь сам код
В main.tpl туда где хотим видеть меню добавляем само меню:
Код:
<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>

И в файл стилей добавляем стили менюшки:
Код:
.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;
Ну с эти все понятно и просто . Дальше стилизуйте под свой шаблон

Вариант номер 2, это тоже самое меню но фиксированное снизу – при прокрутке страницы, меню всегда на виду и не теряет своей нижней позиции

Также код менюшки в main.tpl:
Код:
<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>

И стили в файл стилей:
Код:
.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. И под шапкой размещено фиксированное меню.
Здесь показан код шапки и менюшки в main.tpl:
Код:
<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>

Ну куда мы без стилей:
Код:
body{
font-family:Arial;
color:#000;
}

header{
height:150px;
background: #00ff00;
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>
и скрипт обработки нашего меню
Код:
<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 – высота шапки. Если высота шапки будет больше, нужно это значение заменить.

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

Итак, добавьте код менюшки в main.tpl:
Код:
<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>
<!-- дальше контент -->
Теперь в стили:
Код:
*{margin:0; padding:0;}
.firstScreen
{
height:100%;
background:#00ff00;
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>
Ну и скрипт для работы нашего меню
Код:
<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>
Вот и все,пользуемся,правим подсвои нужды, основные данные даны.
Можешь почитать и вот эту статейку "Тег hr /"

mistakes

0 комментариев

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.