jQuery로 드롭 다운 메뉴를 만드는 방법

커서를 올려 놓지 않아도 드롭 다운 메뉴가 사라지길 원합니다 (상단 상자 제외).

상단 상자에는 파란색 배경 및 흰색 텍스트와 이미지가 표시됩니다.

마우스로 가리키면 해당 상자가 노란색 화살표 상자로 바뀌며 다른 모든 요소가 표시되고 검은 색으로 표시됩니다.

모든 것이 이미지를 갖게됩니다 (이제는 노란색 상단이 동일한 이미지를 유지하게됩니다).

어떻게해야합니까?

이것은 본질적으로 내가 여기있는 것입니다. jQuery를 사용하는 것이 가장 좋다고 가정합니다.

<ul> 
<li id="topitem"><img src="blahblahblah1"/>Setup Wizard</li> 
<li><img src="blahblahblah2"/>Language</li> 
<li><img src="blahblahblah3"/>Password</li> 
<li><img src="blahblahblah4"/>Bluetooth Devices</li> 
<li><img src="blahblahblah5"/>Network Config</li> 
<li><img src="blahblahblah6"/>Finish</li> 
</ul>

출처

2013-09-25 Andrew Alexander

jQuery UI를 보았습니까? 내 말은, 본질적으로 이것은'ul' 엘리먼트를 숨기고 링크 상에 hover 이벤트를 묶는 것입니다. 아주 간단합니다. – Sethen

내가보고 당신이 좋아하는 일 (스타일과 행동) 다음 jQuery를, HTML보고 및 CSS 코드를 찾는 것이 좋습니다 ...이 이것을 수행하는 방법에 대한 자습서의 톤이있다 어떻게 작동하는지.

http://css-tricks.com/simple-jquery-dropdowns/

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

출처

2013-09-25 19:56:02 Jim

위대한 있습니다. 나는이 자원 (및 다른 것들)을 사용할 수있는 한 그리고 질문을 다시 게시하는 데 어려움을 겪고 있다면 OP에게 요청할 것입니다. – Sethen

오, 감사합니다. 이것들은 많은 유용한 자료입니다. 나는 그것에 대해 좋은 방법을 찾는 데 어려움을 겪고있었습니다. –

문제 없습니다 ... Sethen이 말했듯이, 그에게 총을 줘야하고, 특정 문제가 생겨서 새로운 질문을 게시하면됩니다. 또한, 좋은 디버거는 매우 편리하게 제공됩니다 - Firebug와 같은 기능을 사용하면 브라우저에서 HTML, CSS 및 스크립트 문제를 해결할 수 있습니다. – Jim

당신이 JQuery와에 그 효과를 사용 CSS에 대한 UL 리를 작성하여이 작업을 수행 할 수 있습니다 여기에 당신이 시작하는 링크의 몇 가지 있습니다.

<style> 
     ul.menu { 
      display: block; 
      position: relative; 
      list-style: none; 
      background-color: beige; 
      font-weight: bold; 
      width: 150px; 
     } 

     li > ul.subMenu { 
      display: none; 
      list-style: none; 
      background-color: beige; 
      font-weight: bold; 
      white-space: nowrap; 
     } 

     ul.subMenu > li { 
      display: block; 

     } 

     li:hover ul.subMenu { 
      display: block; 
      position: absolute; 
     } 
    </style> 
</head> 
<body> 
    <ul class="menu"> 
     <li> TEST 
      <ul class="subMenu"> 
       <li id="topitem"> 
        <img src="blahblahblah1" />Setup Wizard</li> 
       <li> 
        <img src="blahblahblah2" />Language</li> 
       <li> 
        <img src="blahblahblah3" />Password</li> 
       <li> 
        <img src="blahblahblah4" />Bluetooth Devices</li> 
       <li> 
        <img src="blahblahblah5" />Network Config</li> 
       <li> 
        <img src="blahblahblah6" />Finish</li> 
      </u> 

     </li> 
    </ul> 

</body>

출처

2013-09-25 20:07:12

jQuery로 드롭 다운 메뉴를 만드는 방법

답변

관련 문제