집 >웹 프론트엔드 >JS 튜토리얼 >범용 보조 메뉴 코드(css javascript)_탐색 메뉴

범용 보조 메뉴 코드(css javascript)_탐색 메뉴

WBOY원래의: 2016-05-16 18:51:032067검색

] 그러나 "CSS 보조 메뉴"에서는 1차 메뉴의 하이퍼링크가 #인 경우 1차 메뉴를 클릭하는 동안에는 이 1차 메뉴에 해당하는 2차 메뉴가 항상 표시됩니다. 웹페이지는 숨길 수 없습니다. 작은 버그입니다.
잘 생각해 보면 사실 어떤 2차 메뉴라도 원리는 같습니다.
1. 각 1차 메뉴는 하나의 레이어에 해당하고, 이 레이어에 배치됩니다. 1단계 메뉴에 해당하는 2단계 메뉴입니다.
2. 기본적으로 보조 메뉴 레이어는 숨겨져 있습니다. CSS에서 레이어의 표시 속성 값을 없음으로 설정하면 됩니다.
3. 1차 메뉴에 마우스를 놓으면 해당 2차 메뉴 레이어가 표시됩니다. CSS에서 해당 레이어의 표시 속성 값을 block으로 설정하면 됩니다.
4. 마우스를 1차 메뉴에서 벗어나면 해당 2차 메뉴 레이어가 숨겨집니다.
5. 물론 1차 메뉴에서 2차 메뉴로 마우스를 이동하는 경우에는 2차 메뉴를 숨길 수 없으므로 2차 메뉴에 대해서도 언제로 설정해야 합니다. 마우스가 그 위에 있습니다. 현재 레이어를 표시하고 마우스를 멀리 이동하면 숨깁니다.
자, 이제 기본 아이디어가 생겼으니 보조 메뉴 만들기를 시작해 보겠습니다.
먼저 1차 메뉴와 2차 메뉴를 모두 포함하는 레이어를 만듭니다. 이 레이어를 만든 이유는 메뉴 레이어에 표시하거나 오른쪽에 메뉴를 표시하는 등 전체 메뉴를 쉽게 설정하기 위함입니다.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

그런 다음 메뉴 레이어에 첫 번째 수준 메뉴를 추가합니다. 이 첫 번째 수준 메뉴는 직접 하이퍼링크일 수도 있고 범위 또는 div일 수도 있습니다. 누군가는 1단계 메뉴가 단순한 하이퍼링크가 아니냐고 물을 수도 있다. 그렇다고 말할 수 있지만, 스팬이나 div에 하이퍼링크를 적용할 수도 있으며, 스팬이나 div를 사용하면 또 다른 이점이 있습니다. 이 이점에 대해서는 나중에 간단히 하이퍼링크 몇 개만 추가해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

메뉴 1

메뉴 2 div1 ">
하위 메뉴 1

< a href="#">하위 메뉴 1
하위 메뉴 2

왜 보조 메뉴 레이어를 메뉴 레이어에 배치해야 하나요? 이렇게 하면 보조 메뉴 레이어의 위치를 쉽게 설정할 수 있기 때문입니다.

네 번째 단계는 CSS를 사용하여 보조 메뉴 레이어의 위치를 설정하는 것입니다. 일반적으로 CSS의 position 속성은 레이어의 위치를 설정하는 데 사용됩니다. 이 속성에 일반적으로 사용되는 값에는 상대값, 절대값, 고정값이 있습니다. 그 중 절대(absolute)는 절대적인 위치 지정을 의미하며, 레이어의 위치를 설정하는 경우 전체 를 기준으로 레이어의 위치를 지정하므로 브라우저 창의 크기가 변경되면 레이어의 위치도 변경됩니다. 변경, 고정은 상대적 위치를 의미하며, 이 "상대적"은 브라우저 창의 상단에서 10픽셀 떨어져 있을 때 스크롤 막대를 어떻게 드래그하든 상관없이 이 위치를 나타냅니다. 레이어는 브라우저 창 상단에서 10픽셀 떨어진 곳에 나타납니다. 즉, 항상 브라우저 창에 표시됩니다. Relative는 상대적 위치 지정이기도 합니다. 이 상대적 위치 지정은 이 레이어의 원래 위치를 기준으로 합니다. 상대 모드에서 브라우저는 먼저 레이어의 위치를 출력한 다음 이 레이어의 위치를 기준으로 이를 오프셋합니다. 이것이 우리가 메뉴 레이어에 보조 메뉴 레이어를 배치하는 이유입니다. 보조 메뉴 레이어가 생성되면 이전 위치를 기준으로만 오프셋될 수 있으므로 브라우저 창이 어떻게 변경되더라도 레이어 위치에는 영향을 미치지 않습니다. 보조 메뉴 레이어의 위치가 다르기 때문에 아래와 같이 보조 메뉴 레이어마다 오프셋을 다르게 설정해야 합니다.

코드 복사

코드는 다음과 같습니다.

위 코드에서 CSS의 display는 레이어를 숨기도록 설정하고, position은 레이어의 원래 위치를 기준으로 오프셋을 설정하고, left 및 top은 오프셋을 설정하고, width는 레이어의 너비를 설정합니다. 물론 원하는 만큼 글꼴 크기 등 다른 속성도 설정할 수 있는데 이에 대해서는 자세히 소개하지 않겠습니다. 여기서, 2레벨 메뉴 레이어는 1레벨 메뉴와 너무 멀리 떨어져 있을 수 없다는 점에 유의해야 한다. 앞서 소개한 바와 같이 1차 메뉴에서 2차 메뉴로 마우스를 이동할 때 2차 메뉴 레이어를 숨길 수는 없다. 1단계 메뉴가 2단계 메뉴 레이어에서 너무 멀리 떨어져 있는 경우 1단계 메뉴에서 마우스를 떼면 2단계 메뉴 레이어가 숨겨지므로 2단계 메뉴의 목적이 무용지물이 됩니다. 메뉴. 따라서 1차 메뉴에서 2차 메뉴 레이어로 마우스가 이동할 때 2차 메뉴 레이어가 숨길 시간이 없도록 보장해야 한다. 이를 위해서는 두 가지 기술을 사용해야 합니다. 첫 번째 및 두 번째 수준 메뉴 레이어는 첫 번째 수준 메뉴에서 너무 멀리 떨어져 있으면 안 됩니다. 이 예에서 볼 수 있듯이 두 번째 수준 메뉴 레이어의 최상위 속성 값은 0px입니다. 마우스가 1단계 메뉴에서 2단계 메뉴로 이동합니다. 2차 메뉴가 켜져 있으면 2차 메뉴를 숨길 시간이 없습니다. 둘째, 첫 번째 수준 메뉴를

또는 에 배치합니다. 그러면 마우스가

또는 에 있는 동안에는 두 번째 수준 메뉴 레이어가 숨겨지지 않습니다. 1차 메뉴 레이어와 2차 메뉴 레이어는 꽤 멀리 떨어져 있는 것처럼 보이지만, 사실 2차 메뉴 레이어와 1차 메뉴 레이어는 매우 유사하며, 심지어 겹칠 수도 있습니다. 두 개의 레이어.

다섯 번째 단계는 1차 메뉴 레이어와 2차 메뉴 레이어의 onmouseover 및 onmouseout 속성을 설정하는 것으로 2차 메뉴 레이어의 표시 및 숨기기를 제어하는 것입니다. 주로 2차 메뉴 레이어의 표시 속성 값을 설정하는 데 사용됩니다. 여기서는 자세한 내용을 소개하지 않겠습니다. 전체 소스 코드는 다음과 같습니다.

범용 보조 메뉴

메뉴 1
|
메뉴 2<title>
|
</title>메뉴 3<style type="text/css"> 
    #menu 
    { 
        width:300px; 
        margin:auto; 
    } 
#div1 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:0px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div2 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:50px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div3 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:120px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div4 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:200px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
    </style>
|
메뉴 4
<div id="menu">
<a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">하위 메뉴 1</a>
<a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">
</a>
<a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">하위 메뉴 1</a>
<a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">하위 메뉴 2</a>
<div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">
</a>하위 메뉴 1</div>
<div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">하위 메뉴 2<a href="#">
</a>하위 메뉴 3<a href="#">
</a>
</div>
<div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">하위 메뉴 1<a href="#">
</a>하위 메뉴 2<a href="#">
</a>하위 메뉴 3<a href="#">
</a>하위 메뉴 4</div>
<div id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">
</a>
<a href="#">
</a><a href="#"></a> <a href="#"> </a>[Ctrl A 모두 선택 참고: </div>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 </div>]<br>위 코드는 IE 7, Opera 9.6, Firefox 3, Flock 2에서 정상적으로 실행됩니다. 소스 코드 다운로드<br><a href="http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar">http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar</a>

성명：

이전 기사：javascript DOM 개체_javascript 기술에 대한 학습 예제 코드다음 기사：javascript DOM 개체_javascript 기술에 대한 학습 예제 코드

범용 보조 메뉴 코드(css javascript)_탐색 메뉴

관련 기사