調整固定導航菜單的大小

Question

調整瀏覽器大小時，固定菜單存在很大問題，因為li重疊並且忽略了定義它們的部分:(。因此，我在考慮可以使用的兩個選項：1：整個菜單都有固定位置寬度（以像素為單位，而不是％），以及調整瀏覽器大小以在左右方向上滾動菜單時2：li在由border定義的同一部分中重新排列。

到現在為止，我什么也沒做，因為如果使用溢出在調整瀏覽器大小時左右滾動菜單，則無法正常工作。 如果有人可以給我解決這個悶熱問題的方法，我將不勝感激:)

這是一個頁面測試： http : //mainpage.ueuo.com/Pagina%20start.htm

謝謝。

Answer 1

添加min-width: 1000px （或更多...菜單真的太長了恕我直言）

固定的#header和body元素。

這將使overflow-x工作（無需指定它）。

Answer 2

或者您可以使用腳本來重寫您的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;
            }

-首先聲明您的分辨率0-600 ... 1300-2000，然后在modifayMenu函數中為CSS設置屬性：0position-font，1position-padding left＆right，2position margin for secon ul level。

調用腳本：

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

Answer 3

#firstUl > li {
    display:inline-block; 
    vertical-align:top; 
    display:inline; /* display:inline & zoom:1 for ie7 */ 
    zoom:1;
}

從ul和ul容器中移除高度，從容器中移除高度標題使用填充頂部和底部以保持菜單與容器之間的間隙

Answer 4

放

overflow:hidden;

以dividio的內聯樣式

調整固定導航菜單的大小

問題描述

4 個解決方案

解決方案1
2 2013-01-24 09:29:58

解決方案2
2 已采納 2013-01-25 08:40:42

解決方案3
1 2013-01-24 09:04:10

解決方案4
0 2013-03-09 14:51:13

調整固定導航菜單的大小

問題描述

4 個解決方案

解決方案1 2 2013-01-24 09:29:58

解決方案2 2 已采納 2013-01-25 08:40:42

解決方案3 1 2013-01-24 09:04:10

解決方案4 0 2013-03-09 14:51:13

解決方案1
2 2013-01-24 09:29:58

解決方案2
2 已采納 2013-01-25 08:40:42

解決方案3
1 2013-01-24 09:04:10

解決方案4
0 2013-03-09 14:51:13