JavaScript를 사용하지 않고 HTML에서 메뉴를 만드는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/233251

  •  04-07-2019
  •  | 
  •  

문제

수년 이래로 GUI 표준은 메뉴가 팝업되는 응용 프로그램의 메뉴 바입니다. 메뉴 바에서 항목을 클릭하거나 호버링하면 메뉴가 나타납니다. 일부 웹 사이트는이 기능도 구현하지만 내가 볼 수있는 한 JavaScript를 사용하고 있습니다. 다른 이유로 JavaScript가 문제가 될 수 있으므로 질문은 다음과 같습니다. JavaScript없이 HTML 및 CSS를 사용하여 구현할 수 있습니까?

도움이 되었습니까?

해결책

나는 전에 이런 일을 해냈고, 앵커 태그 내부에 숨겨진 divs의 하위 메뉴가있는 앵커 태그에 메뉴 항목을 배치하여 트릭이 시작되었습니다. CSS 트릭은 A : 호버 이벤트에서 내부 DIV를 나타내는 것입니다.

그것은 다음과 같습니다.

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

귀하의 마일리지가 다를 수 있습니다...

편집 : Internet Explorer 6 이하 A는 다음을 지원하지 않습니다. 모든 태그.

다른 팁

살펴보십시오 CSS 메뉴 제작자.

가장 잘 알려진 기술은입니다 빨판 메뉴. 이를 검색하면 흥미로운 메뉴가 많이 나옵니다. IE6 이하의 JavaScript 만 필요합니다.

다음은 Suckerfish 메뉴의 아들 목록입니다.

JavaScript를 사용할 수없는 경우 CSS 메소드를 백업으로 사용하는 것을 고려하십시오. JavaScript는 마우스가 잠시 호버 영역을 떠나면 즉시 사라지는 메뉴를 막기 위해 몇 가지 지연 계수를 추가 할 수 있기 때문에 드롭 다운 메뉴에 대한 더 나은 사용자 경험을 제공 할 수 있습니다. 순수한 CSS 메뉴는 때때로 사용하기가 약간 까다로울 수 있습니다. 특히 호버 대상이 작 으면됩니다.

*: 물론, 모든 메뉴 스크립트가 실제로 이것을 귀찮게하는 것은 아닙니다 ...

의사 클래스 : 호버를 사용하여 호버 효과를 얻을 수 있습니다.

a:link {
 color: blue;
}

a:hover {
  color: red;
}

더 광범위한 예를들 수는 있지만 지금은 그렇지 않습니다 (아이들을 치과 의사에게 데려 가야합니다).

또한 있습니다 에릭 메이어의 원본 기사 순수한 CSS 메뉴.

이제 다른 사람들이 언급 한 훨씬 더 강력하고 현대적인 테위가 나올 것이지만, 나는 후손에 대해 언급 할 것이라고 생각했습니다. :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top