2897
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css html
Все привет, и это снова я. Ну наверное многие наблюдали на современных сайтах фиксированное меню, которое постоянно на виду ,даже когда прокручиваешь страницу. Мне лично такой вариант нравится, на первом варианте этого сайта была такая плюшка, я еще и подвал (*футер нижния часть сайта) тоже тогда зафиксировал.
Ну такие менюшки бывают нескольких видов, но мы разберем четыре вида.
И так
Вид 1 .Фиксированное меню сверху (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей верхней позиции. Вот этот вариант и был на первом шаблоне этого сайта.
Вот гифка 
Ну теперь сам код
В 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>
Можешь почитать и вот эту статейку "Разметка Ogmeta без плагина на Twige"
Это тоже интересно
25.03.14 Много-уровневое адаптивное меню
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.