Фиксированное меню является трендом в веб-дизайне за 2014 год. Данный вид меню прекрасно выглядит, а также эффективен для посетителей.
В данной статье мы расскажем вам, как создать легкое, функциональное и красивое фиксированное меню для сайта или блога на Вордпрессе.
HTML
Начнем с основы, HTML. Вставьте данный код сразу после открывающего тега вашего HTML документа. Если вы применяете этот урок для WordPress блога, тогда код должен быть в файле header.php.
|
1
2
3
4
5
6
7
|
<div id="fixmenu">
<a href="http://www.вашсайт.com"><img src="path/to/yourlogo.png" alt="" /></a>
<ul class="menu-fixed">
<li><a href="http://www.вашсайт.com">Home</a></li>
<li><a href="#header" id="srolltotop">Top</a></li>
</ul>
</div><!-- #fixmenu -->
|
Как вы видите, мы создали контейнер ( #fixmenu), логотип для сайта и ссылку, а также список
- содержащий наши пункты меню. Не бойтесь добавлять дополнительные пункты меню в свои проекты.
CSS
Вторым шагом является CSS. Давайте создадим красивое фиксированное меню! Вставьте приведенный ниже код в ваш style.css файл.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
#fixmenu{
width: 1122px;
height:30px;
margin-left:-48px;
padding:5px 48px;
position:fixed;
top:0;
background:#7eb7d9;
display:none;
}
.menu-fixed{
width: 260px;
float: right;
text-align: right;
padding:4px 0 5px 0;
list-style-type:none;
}
.menu-fixed li{ display:inline; }
.menu-fixed a{
ont-size:0.9em;
color:#fff;
text-shadow:1px 1px #5E8BC5;
padding:0 0 0 10px;
}
|
Если вы прямо сейчас посмотрите на ваш HTML документ, то тогда там ничего не будет отображаться. Почему? Все из-за display:none; свойства, которое мы добавили к #fixmenu контейнеру. Это необходимо, потому что нам нужно, чтобы фиксированное меню было видимым тогда, когда обычное меню header’a не видно из-за прокрутки.
jQuery
Так как же нам определить, когда страница уже прокрутилась настолько, что заголовок сайта больше не видно? Пришло время jQuery! Вставьте этот код в нижней части HTML документа; в файле footer.php, если вы применяете это в блоге WordPress. Убедитесь, что вы включили jQuery фреймворк перед этим кодом
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(document).ready(function() {
$(window).scroll(function(){
if(document.body.scrollTop > 300)
$('#fixmenu').fadeIn( "slow", function() { });
else
$('#fixmenu').fadeOut( "slow", function() { });
});
$('a#srolltotop').click(function(){
$('html, body').animate({scrollTop:0}, 100);
return false;
});
});
|
В строке 3 мы определяем, если документ был прокручен более 300 пикселей сверху. Если да, то тогда вызывается ()FadeIn функция jQuery, чтобы отобразить фиксированное меню. С другой стороны, функция fadeOut() используется, чтобы скрыть меню, когда верхняя часть документа видна. В строке 9, мы добавили код, чтобы определить, когда активируется #scrolltop ссылка.
Вот и все! Ждем лайков внизу статьи!
