Фактически слово «плавающий» является буквальным переводом английского слова « floating», которое относится к движению объекта в воде или других жидкостях. В случае злоупотребления языком плавающий элемент также определяется как элемент, который остается фиксированным в макете веб-страницы при прокрутке. CSS имеет конкретный тег для этого свойства, что позиция: fixed и что наряду с позицией: absolute и положением: relative позволяет позиционировать элементы абсолютно или относительными.
Однако меню, особенно на нескольких уровнях, не позволяет использовать их наилучшим образом, чтобы зафиксировать элемент в верхней части страницы. Давайте посмотрим, как решить это с помощью javascript и библиотеки jQuery. В этой статье я буду иметь дело исключительно с отзывчивым меню, которое было предметом комментария. Если тема интересна, я мог бы также опубликовать статью, чтобы показать, как сделать плавающим большинство меню Blogger и, в частности, меню статических страниц .
Плавающее меню для Blogger
Это адаптивное меню в дополнение к функции адаптации к разрешению всех настольных или мобильных устройств, с которых открывается сайт, также должно оставаться видимым вверху.
В настольной версии есть анимация с переворотом, когда вы наводите курсор мыши на элемент, в то время как в мобильной версии, чтобы открыть меню, вы должны прикоснуться к значку трех горизонтальных линий. В обоих случаях меню останется закрепленным в верхней части страницы.
Как установить фиксированное меню
После сохранения шаблона , перейдите в Тема -> Редактировать HTML и найдите одну из этих двух строк кода: <header> или </header>. Первое указывает на начало заголовка, а второе указывает на конец. Чтобы отобразить меню над заголовком , его код должен быть вставлен перед <header>, а чтобы отобразить его под кодом, он должен быть вставлен в </header>. Код выглядит следующим образом:
<!— Menu Responsive Inizio —>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu{
width:100%;
z-index: 9999;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu > ul {
background: #D5803A;
}
#cssmenu > ul > li {
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 20px;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #D5803A;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
color: #FEE5D0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #FEE5D0;
-webkit-transform: rotateX(90deg) translateY(-23px);
-moz-transform: rotateX(90deg) translateY(-23px);
transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #FEE5D0;
background: #955928;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #D5803A;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #FEE5D0;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #D5803A;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 20px;
top: 17px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #FEE5D0;
border-bottom: 2px solid #FEE5D0;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 20px;
top: 27px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #FEE5D0;
}
</style>
<script src=’http://code.jquery.com/jquery-latest.min.js’ type=’text/javascript’/><script>
//<![CDATA[
$(function() {
var $flotarMenu = $(«#cssmenu»),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({‘position’ : ‘fixed’, ‘width’ : ‘100%’, ‘top’ : ‘0px’});
} else {
$flotarMenu.css({‘position’ : ‘relative’, ‘top’ : ‘auto’});
}
});
});
//]]>
</script>
<script type=’text/javascript’>
//<![CDATA[
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: «Menu»,
format: «dropdown»,
breakpoint: 768,
sticky: false
}, options);
return this.each(function() {
cssmenu.find(‘li ul’).parent().addClass(‘has-sub’);
if (settings.format != ‘select’) {
cssmenu.prepend(‘<div id=»menu-button»>’ + settings.title + ‘</div>’);
$(this).find(«#menu-button»).on(‘click’, function(){
$(this).toggleClass(‘menu-opened’);
var mainmenu = $(this).next(‘ul’);
if (mainmenu.hasClass(‘open’)) {
mainmenu.hide().removeClass(‘open’);
}
else {
mainmenu.show().addClass(‘open’);
if (settings.format === «dropdown») {
mainmenu.find(‘ul’).show();
}
}
});
multiTg = function() {
cssmenu.find(«.has-sub»).prepend(‘<span class=»submenu-button»></span>’);
cssmenu.find(‘.submenu-button’).on(‘click’, function() {
$(this).toggleClass(‘submenu-opened’);
if ($(this).siblings(‘ul’).hasClass(‘open’)) {
$(this).siblings(‘ul’).removeClass(‘open’).hide();
}
else {
$(this).siblings(‘ul’).addClass(‘open’).show();
}
});
};
if (settings.format === ‘multitoggle’) multiTg();
else cssmenu.addClass(‘dropdown’);
}
else if (settings.format === ‘select’)
{
cssmenu.append(‘<select style=»width: 100%»/>’).addClass(‘select-list’);
var selectList = cssmenu.find(‘select’);
selectList.append(‘<option>’ + settings.title + ‘</option>’, {
«selected»: «selected»,
«value»: «»});
cssmenu.find(‘a’).each(function() {
var element = $(this), indentation = «»;
for (i = 1; i < element.parents(‘ul’).length; i++)
{
indentation += ‘-‘;
}
selectList.append(‘<option value=»‘ + $(this).attr(‘href’) + ‘»>’ + indentation + element.text() + ‘</option’);
});
selectList.on(‘change’, function() {
window.location = $(this).find(«option:selected»).val();
});
}
if (settings.sticky === true) cssmenu.css(‘position’, ‘fixed’);
resizeFix = function() {
if ($(window).width() > settings.breakpoint) {
cssmenu.find(‘ul’).show();
cssmenu.removeClass(‘small-screen’);
if (settings.format === ‘select’) {
cssmenu.find(‘select’).hide();
}
else {
cssmenu.find(«#menu-button»).removeClass(«menu-opened»);
}
}
if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass(«small-screen»)) {
cssmenu.find(‘ul’).hide().removeClass(‘open’);
cssmenu.addClass(‘small-screen’);
if (settings.format === ‘select’) {
cssmenu.find(‘select’).show();
}
}
};
resizeFix();
return $(window).on(‘resize’, resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$(«#cssmenu»).menumaker({
title: «Menu»,
format: «dropdown»
});
$(«#cssmenu a»).each(function() {
var linkTitle = $(this).text();
$(this).attr(‘data-title’, linkTitle);
});
});
});
})(jQuery);
//]]>
</script>
<div id=’cssmenu’>
<ul>
<li class=’active’><a href=’#‘>Home</a></li>
<li><a href=’#‘>Disclaimer</a></li>
<li><a href=’#‘>Privacy</a></li>
<li><a href=’#‘>Etichette</a></li>
<li><a href=’#‘>About</a></li>
<li><a href=’#‘>Contatti</a></li>
</ul>
</div>
<!— Menu Responsive Fine —>
Сохраните шаблон.
Настройки
Настройки производятся только в CSS, который находится в коде между тегами <style> и </style>, в то время как изменения в javascript рискованны, если вы плохо знаете этот язык. Цветовые коды и стиль рамки могут быть изменены . В цветовые коды , которые я использовал это # FFFFFF, # FEE5D0 , # D5803A и # 955928 для фона меню и эффекта прокрутки.
Используемое семейство шрифтов — это Raleway, установленный через Google Fonts, который можно заменить другим. Продолжительность анимации для отображения рабочего стола был установлен для 0.3s; то есть за три десятых секунды. Пункты меню могут быть изменены и должны быть вставлены в URL поста или страниц, вставленные вместо знака ( # ). Другие могут быть добавлены с тем же синтаксисом. Линия выделенная желтым цветом является библиотека JQuery(последняя версия), которая может не устанавливаться для шаблонов Blogger где она уже установлена. Наконец, точка останова перехода с настольной на мобильную версию была установлена на разрешение 768 пикселей. То есть для устройств с более высоким разрешением будет показана версия меню для настольного компьютера, а для устройств с более низким разрешением — мобильная версия. Вы всегда будете видеть мобильную версию в своем смартфоне, в то время как на всех планшетах вы увидите настольную версию.
