2012-02-22 5 views
1

저는 using jquery mega menu plugin입니다. 상단 메뉴 막대의 각 메뉴에서 오른쪽 및 왼쪽 패딩을 조금 작게 만들고 싶습니다.jquery 메가 메뉴의 메뉴 주변에서 오른쪽 및 왼쪽 패딩을 변경하고 하위 메뉴를 계속 정렬 할 수 있습니까?

내가 (나는 검은 피부를 사용하고 있습니다)는 CSS로 가서 패딩을 변경할 수 있습니다

.black ul.mega-menu li a {float: left; display: block; color: #fff; 
padding: 12px 38px 12px 25px; background: url(images/bg_black.png) 
    repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} 

.black ul.mega-menu li a {float: left; display: block; color: #fff; 
padding: 12px 28px 12px 15px; background: url(images/bg_black.png) 
repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} 

참고 : 난 그냥 패딩 위 12 픽셀 28px 변경 12px 15px;

하지만 여기서 문제는 드롭 다운 메뉴가 더 이상 메뉴 아래에 제대로 표시되지 않는다는 것입니다.

어쨌든 메뉴 버튼의 패딩을 변경하고 하위 메뉴 항목을 올바르게 유지하십시오.

+0

확실하지 않습니까? 어떤 브라우저를 테스트하고 있습니까? Chrome의 개발자 도구로 값을 변경해 보았는데 문제가있는 것처럼 보였습니다. 그러나 웹 사이트에서 플러그인/CSS를 다운로드했으며 변경 사항이있는 기본 예제 페이지를 테스트하고 있습니다. 당신이 말한 것에 대한 실제 CSS의 값은 잘 작동합니다. 개발자 도구를 통해 값을 변경할 때 작동하지 않지만 (내 추측으로는 정렬 값이 @doc 문서를 준비하고 각 클릭에 계산되지 않습니다.) –

+0

@Matt Wolfe - 당신이 옳다고 생각합니다. 일단 페이지가로드되면 난봉꾼 (firebug)에서 테스트했습니다. – leora

답변

2

패딩을 변경하면 실제로 정렬되는 방식을 변경해서는 안됩니다. 플러그인은 전체 너비와 상위 항목의 위치를 ​​기반으로 하위 메뉴의 위치를 ​​계산합니다. 컨테이너에 적용되는 것을 볼 수있는 인라인 스타일입니다. 그것이 항상 중앙에 놓으려고 할 수 있다면 가능하지 않다면 서브 메뉴를 정렬 할 것입니다. 인해 전용 "서비스"탭을 중심으로 메뉴의 폭이 경우

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu3.html

:

아래 링크는 예에서와 같이 감소 패딩 메뉴의 일례를 도시 . 나머지는 다시 왼쪽으로 정렬됩니다. 당신의 예에서 다른 행동을하고 있습니까?

1

이 경우 하위 메뉴 위치는 인라인으로 설정됩니다.

따라서 위에서 설명한대로 padding을 변경하면 인라인 스타일의 margin-left 비트를 조정해야합니다.

서비스 탭의 경우, 유사한 margin-left

<div class="sub-container mega" style="left: 429px; margin-left: -40px; top: 40px; z-index: 1000; ">

에서

<div class="sub-container mega" style="left: 429px; margin-left: -115px; top: 40px; z-index: 1000; ">

또는 뭔가를 변경합니다. 그런 다음 필요에 따라 각 탭에 대해 수행하십시오.

참고 : #은 항상 동일하지는 않습니다. 당신은 그것으로 바이올린을해야합니다. 더 많거나 적음 -115px