CSS 메뉴에서이 작업을 수행 할 수 있습니까?

Question

자바 스크립트를 사용하지 않고 드롭 다운 메뉴 탐색을 만들고 각 항목 옆에 이미지를 표시 할 수 있습니까?

또한이 작업을 테이블과 함께하고 싶습니다. 테이블 셀 위로 마우스를 가져 가면 각 셀 옆에 아이콘이있는 링크 목록이 드롭 다운됩니다. 이것이 자바 스크립트를 사용하지 않고도 가능한지 확실하지 않은가요?

나는 당신은 HTML과 CSS를 사용하여 메뉴를 디자인 할 수있다 포토 버킷의 메뉴 alt text http://img2.pict.com/f9/72/7f/1437912/0/640/screenshot2b9.png

Answer 1

가능합니까? 예

권장합니까? 없음

는 여전히 IE6 및 그 이하 만 href 속성 <a> 태그에 :hover 의사 선택을 지원을 지원해야합니다. 다른 태그의 의사 셀렉터는 무시됩니다 (:hover). 다른 브라우저의 경우 해당 제한이 없습니다.

<a> 태그를 사용하면 자신에게 다음과 같은 제한 사항을 제공하지 않습니다 :

• 없음 서브에게 <a> 태그, 메뉴가 기본적으로 한 곳으로 이어질 것입니다 것을 의미한다. 쉽게 인라인 요소에 display: block를 사용하여 해결할 수있는 <a> 태그 (내부
• 없음 블록 레벨 요소. 이것은 더 <div>없는 <table>이나 다른 block level elements 의미합니다. 세상에서

를 Internet Explorer 6 및없이 아래의이 오히려 할 사소한. 그러나 2009 년 7 월 there is still 27.21% of the web using IE6, 당신이 그들을 밖으로 쓰고 싶어하지 않을 수도 고려 될 것입니다. 당신이 할 수 물론

Answer 2

에 할 것을 시도하고있는 것과 유사한 무언가가있다. 그러나 모든 이벤트 [키보드 및 마우스]을 처리하려면 JavaScript를 사용해야합니다.

Answer 3

. 목록이 <li> 태그에 지나지 않는다. <li> 태그 안에는 뭐든간에 넣을 수있어. OU 원하는 :

<ul> 
    <li> 
     <img src="someimage.jpg" alt="alttext" /> 
     <p><a href="yourlink.html">Your link</a></p> 
    </li> 
</ul> 

다음이 당신의 CSS

편집/ 아, 난 당신이 테이블 만 사용하려는 참조 승 메뉴 효과를 확인하십시오. 더 신중하게 읽어야합니다. 당신이 자바 스크립트 (왜, 나도 몰라)를 사용하고 싶지 않다면, 아니, 아니 승/CSS와 HTML, 적어도 크로스 브라우저. 최신 브라우저의 모든 요소에서 사용할 수있는 유사 복제본 :hover을 사용하여 수행 할 수 있지만 < IE6은 어떻게 처리해야할지 모릅니다. 그러나 어쨌든 IE6 지원을 중단해야합니다. 어쩌면 당신은 괜찮습니다.

Answer 4

글쎄, 그렇습니다. 페이지의 소스를 보면 <ul>이 표시되는 것을 볼 수 있습니다. 그들은 확실히 JS를 사용합니다. Firefox에서 JS를 사용하지 않도록 설정 한 다음 메뉴를 다시로드하면 메뉴가 작동하지 않지만 메뉴 자체가 얼마나 필요한지 잘 모르겠습니다.

(x) html의 <img /> 태그를 사용하거나 CSS의 배경 이미지를 사용하여 각 메뉴 항목 옆에 이미지를 표시 할 수 있습니다.

CSS 기반의 접근 방식 :

<style type="text/css" media="all"> 
ul li {display: inline; position: relative;} 

ul li ul {display: none; } 

ul li:hover ul {display: block; position: absolute; top: 0; left: 0; } 

ul li ul li {padding-left: 10px; background: #fff url(path-to-image.png) top left no-repeat; } 
</style> 

<ul> 
<li>First item</li> 
<li>Second item 
    <ul> 
     <li>Sub-level one</li> 
     <li>Sub-level two</li> 
    </ul></li> 
<li>Third item</li> 
</ul> 

(X) HTML 기반의 접근 방식 :

<style>... /* will still need to be styled according to your theme */ ...</style> 

<ul> 
<li><img src="menu-icon-1.png" alt="menu-icon" />First item</li> 
<li><img src="menu-icon-2.png" alt="menu-icon" />Second item 
    <ul> 
     <li><img src="menu-icon-2-1.png" alt="menu-icon" />Sub-level one</li> 
     <li><img src="menu-icon-2-2.png" alt="menu-icon" />Sub-level two</li> 
    </ul></li> 
<li><img src="menu-icon-3.png" alt="menu-icon" />Third item</li> 
</ul> 

당신은 고유의 아이콘을 가지고 메뉴 항목을 원하는 경우/그와 관련된 이미지, 당신은 좋겠 (x) html에 특정 id을 사용해야하므로 특정 방법을 사용하여 다른 쪽을 선호하는 것이 편리하지 않습니다.

Answer 5

IE6에 대한 지원 : ie7-js을 살펴보십시오. 다음을 사용하여 역방향 호환성 문제가 많은 도움이됩니다. a 이외의 요소를 가리 키십시오. 나는 그것이 ricebowl이 제시 한 CSS 솔루션과 작동한다는 것을 확인했습니다.

편집 :이 스크립트에 대한 좋은 점은 IE5.5 및 IE6 (그리고 최신 버전을 사용하는 경우 IE7)에서만 사용된다는 것입니다. 최신 버전은 페이지를 렌더링 할 때 IE7이 IE8과 비슷한 동작을하도록하여 간단하고 좋은 HTML/CSS를 작성하기가 더 쉽습니다.