[英]Resize fixed navigation menu
I have a big problem with a fixed menu when browser is resized because the li are overlapping and leaving out the section in which they are defined :(. So I was thinking about two options that I could use: 1: entire menu has a fixed width in pixels and not in % and when browser is resized to scroll that menu in right-left. 2: li are rearranged in the same section defined with border. 调整浏览器大小时,固定菜单存在很大问题,因为li重叠并且忽略了定义它们的部分:(。因此,我在考虑可以使用的两个选项:1:整个菜单都有固定位置宽度(以像素为单位,而不是%),以及调整浏览器大小以在左右方向上滚动菜单时2:li在由border定义的同一部分中重新排列。
Till now I was not able to do nothing because if I use overflow to scroll my menu left and right when browser is resized is not working. 到现在为止,我什么也没做,因为如果使用溢出在调整浏览器大小时左右滚动菜单,则无法正常工作。 If someone can give me a solution for this sultry issue I'll be grateful :)
如果有人可以给我解决这个闷热问题的方法,我将不胜感激:)
Here is a page test: http://mainpage.ueuo.com/Pagina%20start.htm 这是一个页面测试: http : //mainpage.ueuo.com/Pagina%20start.htm
Thank you. 谢谢。
Add min-width: 1000px
(or more... your menu is really too long imho) 添加
min-width: 1000px
(或更多...菜单真的太长了恕我直言)
to both your fixed #header
and to body
element. 固定的
#header
和body
元素。
This will make overflow-x
work (with no need to specify it). 这将使
overflow-x
工作(无需指定它)。
Or u can use a script to rewrite your padding and font-size properties: 或者您可以使用脚本来重写您的padding和font-size属性:
function renderMenuCorection(){
if ($('#containerHeader').exists()) {
var resizeObject = {
'0-640': '9px,2px,-3px',
'640-800': '10px,2px,-5px',
'800-1024': '10px,8px,-13px',
'1024-1300': '12px,12px,-13px',
'1300-2000': '14px,20px,-21px'
}
var win = $(window);
var win_width = win.width();
if (win_width > 0 && win_width <= 640) {
var value = getValueByKey(resizeObject, '0-640')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 640 && win_width <= 800) {
var value = getValueByKey(resizeObject, '640-800')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 800 && win_width <= 1024) {
var value = getValueByKey(resizeObject, '800-1024')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 1024 && win_width <= 1300) {
var value = getValueByKey(resizeObject, '1024-1300')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 1300 ) {
var value = getValueByKey(resizeObject, '1300-2000')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
}
}
function modifayMenu(value){
var vals = value.split(',')
$('#containerHeader').find('.roundMenuLi').each(function(index, item){
$(item).find('a').css('font-size', vals[0]);
$(item).css('padding-right', vals[1]);
$(item).css('padding-left', vals[1]);
$(item).find('ul').css('margin-left', vals[2]);
});
}
function getValueByKey(obj, myKey){
$.each(obj, function(key, value){
if (key == myKey) {
returnValue = value;
}
});
return returnValue;
}
-first declare your resolutions 0-600 ... 1300-2000 and in modifayMenu function set your properties for css: 0position-font,1position-padding left&right,2position margin left for secon ul level. -首先声明您的分辨率0-600 ... 1300-2000,然后在modifayMenu函数中为CSS设置属性:0position-font,1position-padding left&right,2position margin for secon ul level。
call script on: 调用脚本:
<body onresize="renderMenuCorection();" onload="renderMenuCorection();">
#firstUl > li {
display:inline-block;
vertical-align:top;
display:inline; /* display:inline & zoom:1 for ie7 */
zoom:1;
}
remove height from ul & ul container, remove height from containerHeader use padding top & bottom to keep gap between menu & container 从ul和ul容器中移除高度,从容器中移除高度标题使用填充顶部和底部以保持菜单与容器之间的间隙
put 放
overflow:hidden;
in the inline style of the dividio 以dividio的内联样式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.