탈부착 식 멀티 패널 만들기

내 웹 사이트 http://animevoters.apphb.com을 참조하십시오. 기본 메뉴에서 태그를 클릭하십시오. 너무 깁니다. 나는 espn.com과 같은 웹 사이트를 보았습니다. 이곳에서 드 뿌리리스트가 패널에있어 항목이 꽤 잘 배치되어 있습니다. 내가 좋아할만한 것은 그 종류의 아이디어를 따르는 것입니다. 예를 들어, 드롭리스트의 멀티 패널 (2 ~ 3 개)을 만들면 항목이 화면 너머로 내려 가지 않아도됩니다. 이것이 어떻게 수행 될 수 있는지에 대한 제안? 고맙습니다.탈부착 식 멀티 패널 만들기

Btw, ASP.NET MVC 및 JQuery를 사용하고 있습니다.

출처

2011-08-18 Ronald

당신은 타락을 좋아하는 경우에 ... 당신이보기에 얻을 수있는 모든 목록을 밀어하는 MouseMove 이벤트 효과를 추가 할 수 있습니다 여분의 항목. –

또는 google을 위해 ** 메가 드롭 다운 메뉴 **와 같은 것을 얻을 수 있습니다 : http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt -css3-mega-drop-down-menu/ –

감사합니다. @roXon, 저것 좀 살펴 보겠습니다. – Ronald

DIV를 사용하여 메뉴 패널을 래핑 한 다음 그 안에 여러 개의 목록을 사용하십시오.

참조 : http://jsfiddle.net/cFvpe/1/

HTML :

<div class="wrapper"> 
    <ul> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     </ul> 
    <ul> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     </ul> 
</div>

CSS :

.wrapper { 
    background-color:#0000f0; 
    padding:4px; 
    width:220px; 
} 

.wrapper ul, .wrapper li { 
    list-style-type:none; 
    padding:0; 
    margin:0 
} 

.wrapper ul { 
    width:100px; 
    margin-right:10px; 
    float:left; 
} 

.wrapper a { 
    display:block; 
    font-family:arial; 
    text-decoration:none; 
    padding:3px; 
    font-size:12px; 
    color:#ffffff; 
    width:100px; 
    margin-bottom:2px; 
    background-color:#0000c0; 
} 

.clear { 
    clear:both; 
}

출처

2011-08-18 21:13:15

이것은 좋아 보인다! – Ronald

탈부착 식 멀티 패널 만들기

답변

관련 문제