У меня есть большая проблема с фиксированным меню, когда размер браузера изменен, потому что li перекрываются и пропускают раздел, в котором они определены :(. Поэтому я думал о двух опциях, которые я мог бы использовать: 1: все меню имеет фиксированный ширина в пикселях, а не в%, и при изменении размера браузера для прокрутки этого меню справа налево. 2: li переставляются в том же разделе, определенном с рамкой.

До сих пор я не мог ничего делать, потому что, если я использую переполнение для прокрутки меню влево и вправо, когда браузер изменен, размер не работает. Если кто-то может дать мне решение этой знойной проблемы, я буду благодарен :)

Вот тест страницы: http://mainpage.ueuo.com/Pagina%20start.htm

Спасибо.

2
BurebistaRuler 24 Янв 2013 в 12:44

4 ответа

Лучший ответ

Или вы можете использовать скрипт, чтобы переписать ваши свойства 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 left для второго уровня ul.

Скрипт вызова на:

<body onresize="renderMenuCorection();" onload="renderMenuCorection();">
2
RulerNature 25 Янв 2013 в 08:40

Добавьте min-width: 1000px (или больше ... ваше меню действительно слишком длинное, imho)

Как к вашему фиксированному #header, так и к body элементу.

Это заставит overflow-x работать (без необходимости указывать это).

2
Andrea Ligios 24 Янв 2013 в 09:29
#firstUl > li {
    display:inline-block; 
    vertical-align:top; 
    display:inline; /* display:inline & zoom:1 for ie7 */ 
    zoom:1;
}

Удалить высоту из ul и ul контейнера, убрать высоту из containerHeader использовать отступ сверху и снизу, чтобы оставить зазор между меню и контейнером

1
Andrea Ligios 24 Янв 2013 в 09:22

Ставить

overflow:hidden;

В стиле inline дивидио

0
Matt Busche 9 Мар 2013 в 15:11