Фиксированный логотип
Логотип должен прежде всего хорошо запоминаться покупателю. А как известно, лучший способ запоминания чего-либо — повторение.
Но как это сделать, не прибегая к размещению логотипа всюду и везде в ущерб гармоничному дизайну страницы? С помощью нашего скрипта логотип можно разместить прямо в фиксированном меню на самом верху страницы. При пролистывании страницы меню будет всё время оставаться наверху вместе с логотипом. Таким образом он не только впишется в дизайн сайта, но и всегда будет перед глазами посетителя страницы, что несомненно закрепит ваше изображение в его памяти. Скрипт будет полезен любому владельцу сайта, который намерен продавать какую-либо продукцию или предоставлять услуги под собственным брендом. Логотип в закреплённом меню сайта выглядит органично и удобно, не слишком сильно бросается в глаза и вместе с тем никогда не пропадает из поля зрения посетителя. Настоятельно рекомендуем воспользоваться в первую очередь именно этим скриптом.
Установка
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
require(['jquery'], function($){
var status_name = 0; // Достаточно ли место для текста лого (1 - нет)
// меню
var fix_logo = $('header .logo-head, header .header-content-left, header .header-content-center-sitename, header .header-content-icon, header .title-box'); // логотип (img и текст)
if(fix_logo.length > 1){
fix_logo.each(function(){
fix_logo = $(this);
});
}
if(fix_logo.length == 0) fix_logo = $('header [id^=ul-id-icon-]').parents('[class*="col"]');
var fix_top = fix_logo.offset().top, // расстояние до потолка
fix_rel_menu = $('.ul-w-mainmenu:eq(0)').parent(), // меню с шириной
fix_logoH = fix_logo.find('img').innerHeight(), // высота картинки
fix_slogan_display = fix_logo.children('*:eq(1)').css('display'),
fix_vertical_menu = $('.vertical-menu'), // Вертикальное меню
fix_sitename = $('header #ul-id-header-sitename'), // Текст лого
fix_logo_ml = 0;
// Ловим
$(document).on('scroll', function(){
fixiki();
setTimeout(function(){fixiki()}, 1000);
});
// фиксируем
function fixiki(){
$('.ul-menu-fixed-container').css({
'height': '73px'
});
var fix_menu = $('.ul-menu-fixed'), // фикс меню
fix_menuH = fix_menu.innerHeight(); // высота меню
fix_rel_menu = $('.ul-w-mainmenu:eq(0)').parent(); // меню с шириной
// Если есть фикс меню
if(fix_menu.length > 0){
// Пусть ходит с меню
fix_logo.css({
'top': '0',
'position': 'fixed',
'z-index': '999',
'width': 'auto',
'margin-top': '0',
'height': 'auto'
});
// Блок картинки
$('header [id^="ul-id-icon-"]').css({
'height': ''+fix_menuH+'px',
'position': 'relative'
});
if($('header [id^="ul-id-icon-"] span').length > 0){
$('header [id^="ul-id-icon-"] span').css({
'top': '50%',
'position': 'relative',
'margin-top': '-'+($('header [id^="ul-id-icon-"] span').innerHeight()/2)+'px',
});
$('header [id^="ul-id-icon-"]').attr('style', ''+$('header [id^="ul-id-icon-"]').attr('style')+'padding:0!important;');
}
// Картинка
fix_logo.find('img').parent('a').css({
'height': '100%',
'max-height': ''+fix_menuH+'px'
});
fix_logo.find('img').css({
'height': '100%',
'max-height': ''+fix_menuH+'px'
});
// Если меню вертикальное
if(fix_vertical_menu.length > 0){
fix_sitename.css({
'height': ''+fix_menuH+'px'
});
if(fix_logo_ml == 0) fix_logo_ml = fix_logo.innerWidth()/2;
fix_logo.css({
'left': '50%',
'margin-left': '-'+fix_logo_ml+'px'
});
}else{
// Определение места для лого
if(fix_rel_menu.offset().left < fix_logo.innerWidth()){
status_name = 1;
fix_logo.children('*:eq(1)').hide();
$('header [id^="ul-id-icon-"]').parent().children().hide();
$('header [id^="ul-id-icon-"]').show();
// Измерим ширину кнопок меню, если есть место, то добавим лого
var width = 0;
fix_rel_menu.find('.ul-w-mainmenu-item').each(function(){
width = width+$(this).innerWidth();
});
if((width+fix_logo.innerWidth()) < $(window).width()){
fix_logo.css('left', '0');
fix_rel_menu.find('.ul-w-mainmenu-item:eq(0)').attr('style', 'padding-left:'+fix_logo.innerWidth()+'px!important');
}else{
ishod();
}
}else{
fix_logo.css({
'left': ''+(fix_rel_menu.offset().left-fix_logo.children('*:eq(1)').innerWidth())+'px',
});
}
}
}else{
ishod();
}
}
// В исходную
function ishod(){
// на место барсик
fix_logo.css({
'top': '',
'position': '',
'z-index': '',
'left': '',
'width': '',
'margin-left': '',
'margin-top': '',
'height': ''
});
// Блок картинки
$('header [id^="ul-id-icon-"]').css({
'height': '',
'position': ''
});
if($('header [id^="ul-id-icon-"] span').length > 0){
$('header [id^="ul-id-icon-"] span').css({
'top': '',
'position': '',
'margin-top': '',
});
$('header [id^="ul-id-icon-"]').css('padding', '');
}
// Картинка
fix_logo.find('img').parent('a').css({
'height': '',
'max-height': ''
});
fix_logo.find('img').css({
'height': ''+fix_logoH+'px'
});
if(status_name == 1 && fix_slogan_display != 'none'){
fix_logo.children('*:eq(1)').show();
$('header [id^="ul-id-icon-"]').parent().children().show();
}
}
});
</script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
| Всего комментариев: 7 | |
Здравствуйте!
Фиксированное меню во всю ширину сайта, к сожалению пока нету универсального скрипта, но когда ни будь мы его реализуем  По поводу существующего скрипта — "Фиксированный логотип" Используйте следующий код: Код <style> .header-content-icon { left: auto!important; } </style> | |
0
