2012-09-25 3 views
0

forbes.com에서 찾을 수있는 종류의 메뉴를 재현해야합니다. 나는 로고 항목 하위 메뉴에 관심이있다. 거의 끝났습니다. 나는 로고 항목 메뉴, 범주 이름이있는 첫 번째 수준 메뉴 및 두 번째 수준에서 각 범주의 문서 링크가 표시되는 메뉴를 만들었습니다.메뉴 : 첫 번째 하위 항목을 자동 선택하는 방법

지금까지는 기본적인 CSS 메뉴를 설정했습니다. 사용자가 로고 위에 마우스를 놓으면 첫 번째 하위 메뉴 수준 만 표시됩니다. 내 목표는 forbes 하위 메뉴와 마찬가지로 두 번째 하위 메뉴 수준을 동시에 표시 할 수 있도록 첫 번째 하위 항목에 마우스 오버 효과를 표시하기 때문에 JS가 필요할 것이라고 생각합니다. 당신의 도움에 대한

<ul id="menu"><li> 
<a href="#" >Mylogo</a> 

<ul class="submenu1"> 

<li class="item1"><a href="#">item1</a> 
<ul class="subemnu2">content</ul> 
</li> 

</ul>/*----submenu1-------*/ 
</li>/*-----li menu------*/ 
</ul>/*---- ul menu-------*/ 

감사 :

여기 (간체) 내 코드입니다 (이 낫 네요). 감사합니다

답변

0

사용 사례에 대해 자바 스크립트가 필요하지 않습니다. (: 호버 .submenu1), 당신은 또한의 두 번째 수준을 보여주기 위해 애니메이션을 실행할 수있는 사용자가 첫 번째 하위 항목을 가리킬 때

http://www.w3schools.com/css3/css3_animations.asp

, 당신은 모양을 변경할 : 당신은 CSS3 애니메이션으로 작업을 수행 할 수 있습니다 메뉴 항목.

+0

답해 주셔서 감사합니다.하지만 불행히도 모든 브라우저에서 작동하는 솔루션이 필요합니다. 기본적으로 나는 말하고 싶은 JS가 필요하다 : .submenu1을 표시 할 때 .item1에 마우스 오버 효과를 추가한다. (.submenu2가 동시에 표시되게한다. –