调整固定导航菜单的大小

Resize fixed navigation menu

本文关键字：菜单 导航 调整      更新时间：2023-09-26

调整浏览器大小时，固定菜单存在一个大问题，因为 li 重叠并省略了定义它们的部分:(。所以我在考虑我可以使用的两个选项：1：整个菜单具有固定的宽度（以像素为单位），而不是以%为单位，当调整浏览器大小以向左右滚动该菜单时。2：li 重新排列在用边框定义的同一部分中。

到目前为止，我什么也做不了，因为如果我在调整浏览器大小时使用溢出左右滚动菜单是无法正常工作的。如果有人能为这个闷热的问题给我一个解决方案，我将不胜感激:)

这是一个页面测试：http://mainpage.ueuo.com/Pagina%20start.htm

谢谢。

或者

，您可以使用脚本重写填充和字体大小属性：

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;
            }
-

首先宣布您的决议 0-600 ...1300-2000 并在 modifayMenu 函数中设置 css 的属性：0 位置字体，1位置左填充和右边距，2 位置左边距用于 secon ul 级别。

调用脚本：

<body onresize="renderMenuCorection();" onload="renderMenuCorection();">

添加min-width: 1000px（或更多...恕我直言，你的菜单真的太长了）

到固定#header和body元素。

这将使overflow-x工作（无需指定）。

#firstUl > li {
    display:inline-block; 
    vertical-align:top; 
    display:inline; /* display:inline & zoom:1 for ie7 */ 
    zoom:1;
}
从 ul 和 ul 容器中删除高度

，从容器中删除高度标题使用填充顶部和底部以保持菜单和容器之间的间隙

put 

overflow:hidden;

在 Dividio 的内联样式中

相关文章：