Добрый день. Помогите разобраться.
Для работы фиксированного меню IceMegaMenu на JQuery написаны два CSS класса меню - .default и .fixed.
Для скроллинга меню в мобильной версии сайта в стиле .fixed установлены значения overflow: auto; и max-height: 50%;
В мобильной версии сайта развернутое меню занимает максимум 50% страницы и прокручиваются все не влазящие пункты меню, что дает возможность прокручивать и меню и контент. Но в обычной версии сайта фиксированное меню полностью не разворачивается и появляется полоса прокрутки.
Если отключить overflow: auto; и max-height: 50%;, то в мобильной версии сайта на маленmких экранах меню раскрывается не полностью: по высоте не влазят все пункты меню и нет возможно скроллинка.
Все примеры на видео:
http://www.yapfiles.ru/show/1174253/02a4520dd929a52cacdfa96b0710c138.mp4.htmlКак убрать полосы прокрутки в обычной версии сайта с помощью CSS или Javascrip и эффектов JQuery?
Или как назначить разные классы меню для обычной и мобильной версий сайта?
Классы меню:
/* IceMegaMenu */
#mainmenu {
/* position: relative;*/
background-color: #3d3d3d;
background: -moz-linear-gradient(top, #484848, #2e2e2e);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#484848), to(#2e2e2e));
background: -webkit-linear-gradient(top, #484848, #2e2e2e);
background: -o-linear-gradient(top, #484848, #2e2e2e);
background: linear-gradient(to bottom, #484848, #2e2e2e);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484848', endColorstr='#ff2e2e2e', GradientType=0);
clear: both;
margin: 0 0 30px;
border-radius: 7px 8px 8px 7px;
/* Search */
}
.default {
position: relative;
top: 0;
left: 0;
height: 55px;
background: url(../images/mainmenu.png) no-repeat;
width: 100%;
border-radius: 7px;
}
.fixed {
position: fixed;
overflow: auto;
z-index:15000;
width:100%;
top:0;
right:0;
left:0;
max-height:50%;
}
#mainmenu:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 55px;
background: url(../images/mainmenu.png) no-repeat;
width: 100%;
border-radius: 7px;
}
Скрипт фиксированного меню на JQuery:
jQuery(document).ready(function(){
var jQuerymenu = jQuery("#mainmenu");
jQuery(window).scroll(function(){
if ( jQuery(this).scrollTop() > 100 && jQuerymenu.hasClass("default") ){
jQuerymenu.removeClass("default").addClass("fixed");
} else if(jQuery(this).scrollTop() <= 100 && jQuerymenu.hasClass("fixed")) {
jQuerymenu.removeClass("fixed").addClass("default");
}
});//scroll
});
13.02.2024, 17:01:12