고정 된 탐색 메뉴 크기 조정

리가 겹쳐서 정의 된 섹션이 없어 브라우저 크기가 변경 될 때 고정 메뉴에 큰 문제가 있습니다. ( 그래서 사용할 수있는 두 가지 옵션에 대해 생각하고있었습니다. : 1 : 전체 메뉴 픽셀 아닌 % 및 일정 폭을 갖는 브라우저가 좌우에서 해당 메뉴를 스크롤 조정할 때 2. Li를 경계로 정의 된 동일한 부분에 재배치고정 된 탐색 메뉴 크기 조정

를 지금까지. 브라우저 크기를 조정할 때 메뉴를 좌우로 스크롤하여 오버플로를 사용하면 작동하지 않습니다. 누군가가 내게 열정적 인 문제에 대한 해결책을 줄 수 있다면 감사 할 것입니다.

http://mainpage.ueuo.com/Pagina%20start.htm

감사합니다 :

여기 페이지 테스트입니다.

출처

2013-01-24 BurebistaRuler

또는 u는 당신의 패딩 및 글꼴 크기 속성을 재 작성하는 스크립트를 사용할 수

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 ... 1,300에서 2,000 사이를 선언하고 modifayMenu 기능에 - 첫는 CSS에 대한 귀하의 속성을 설정 : 0 위치 - 글꼴, 1 위치 - 패딩 왼쪽 & 오른쪽, 2 위치 여백 secon ul 수준을 남겼습니다. 에

호출 스크립트 :

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

출처

2013-01-25 08:40:42 RulerNature

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

제거 높이, & 용기를 메뉴 사이의 간격을 유지하는 containerHeader 사용 패딩 상단에서 & 바닥 높이를 제거 ... 메뉴는 정말 너무입니다 긴 imho)

(수정 된 #header 및 body 요소 모두)

이렇게하면 overflow-x이 작동합니다 (지정할 필요 없음).

출처

2013-01-24 09:04:10

정말 :( – BurebistaRuler

min-width: 1000px (이상 추가 UL & UL 컨테이너에서

출처

2013-01-24 09:29:58

도움이되지 dividio의 인라인 스타일에

overflow:hidden;

를 넣어이 해결책이 될 것 같다, 나는 이유를 이해 할 수없는 것은 body min-width와 overflow-x가 선언되었을 때 nav menu를 포함한 body overflow가 몸 전체를 스크롤하지 않습니다 – BurebistaRuler

고정되어 있기 때문에'# header'에서'position : fixed;'를 제거하십시오 '# containerHeader' 그리고'min-height : 1000px;'를'body '로 설정하면됩니다. –

예 알아 두지 만 고정 위치를 제거 할 수없는 이유는 페이지가 아래로 스크롤 될 때 맨 위에 메뉴가 있어야하기 때문입니다. 어쨌든 고마워요;) – BurebistaRuler

이

출처

2013-03-09 14:51:13

고정 된 탐색 메뉴 크기 조정

답변

관련 문제