Smooth CSS 드롭 다운 메뉴를 추가하는 방법

Question

CSS를 사용하여 드롭 다운 메뉴 (하위 메뉴)로 메뉴를 만들 수있었습니다. 그러나 나는 코딩에 부드러운 드롭 다운 메뉴 효과를 추가 할 수 없다. 나는 -moz-transition 등을 추가하려고했다. 나는 정상적인 드롭 다운 메뉴를 부드럽게 드롭 다운 메뉴 효과로 만들기 위해 그 트랜지션을 추가 할 위치를 알지 못했습니다.

아래는 여기에

<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Products</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>Product 1</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Product 2</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

코딩 내 HTML 것은 CSS를

<style media="screen" type="text/css"> 
    #cssmenu ul, 
    #cssmenu li, 
    #cssmenu span, 
    #cssmenu a { 
     margin: 0; 
     padding: 0; 
     position: relative; 
    } 
    #cssmenu { 
     height: 49px; 
     border-radius: 5px 5px 0 0; 
     -moz-border-radius: 5px 5px 0 0; 
     -webkit-border-radius: 5px 5px 0 0; 
     background: #fefefe; 
     background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0)); 
     background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     border-bottom: 2px solid #db000b; 
     width: auto; 
    } 
    #cssmenu:after, 
    #cssmenu ul:after { 
     content: ''; 
     display: block; 
     clear: both; 
    } 
    #cssmenu a { 
     background: #fefefe; 
     background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec)); 
     background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: linear-gradient(top, #fefefe 0%, #ececec 100%); 
     color: #000; 
     display: inline-block; 
     font-family: Helvetica, Arial, Verdana, sans-serif; 
     font-size: 12px; 
     line-height: 49px; 
     padding: 0 20px; 
     text-decoration: none; 
    } 
    #cssmenu ul { 
     list-style: none; 
    } 
    #cssmenu > ul { 
     float: left; 
    } 
    #cssmenu > ul > li { 
     float: left; 
    } 
    #cssmenu > ul > li > a { 
     color: #000; 
     font-size: 12px; 
    } 
    #cssmenu > ul > li:hover:after { 
     content: ''; 
     display: block; 
     width: 0; 
     height: 0; 
     position: absolute; 
     left: 50%; 
     bottom: 0; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid #db000b; 
     margin-left: -10px; 
    } 
    #cssmenu > ul > li:first-child > a { 
     border-radius: 5px 0 0 0; 
     -moz-border-radius: 5px 0 0 0; 
     -webkit-border-radius: 5px 0 0 0; 
    } 
    #cssmenu > ul > li.active:after { 
     content: ''; 
     display: block; 
     width: 0; 
     height: 0; 
     position: absolute; 
     left: 50%; 
     bottom: 0; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid #db000b; 
     margin-left: -10px; 
    } 
    #cssmenu > ul > li.active > a { 
     -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     background: #ececec; 
     background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); 
     background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    } 
    #cssmenu > ul > li:hover > a { 
     background: #ececec; 
     background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); 
     background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
    } 
    #cssmenu .has-sub { 
     z-index: 1; 
    } 
    #cssmenu .has-sub:hover > ul { 
     display: block; 
    } 
    #cssmenu .has-sub ul { 
     display: none; 
     position: absolute; 
     width: 200px; 
     top: 100%; 
     left: 0; 
    } 
    #cssmenu .has-sub ul li { 
     *margin-bottom: -1px; 
    } 
    #cssmenu .has-sub ul li a { 
     background: #db000b; 
     border-bottom: 1px dotted #ff0f1b; 
     filter: none; 
     font-size: 11px; 
     display: block; 
     line-height: 120%; 
     padding: 10px; 
     color: #ffffff; 
    } 
    #cssmenu .has-sub ul li:hover a { 
     background: #a80008; 
    } 
    #cssmenu .has-sub .has-sub:hover > ul { 
     display: block; 
    } 
    #cssmenu .has-sub .has-sub ul { 
     display: none; 
     position: absolute; 
     left: 100%; 
     top: 0; 
    } 
    #cssmenu .has-sub .has-sub ul li a { 
     background: #a80008; 
     border-bottom: 1px dotted #ff0f1b; 
    } 
    #cssmenu .has-sub .has-sub ul li a:hover { 
     background: #8f0007; 
    } 
    </style> 

Answer 1

내가 원하는 효과를주고, jQuery와 같은 좀 더 광범위한 무언가를 사용하는 것이 좋습니다 것에게 있습니다. 여기에 '아코디언'효과에 대한 링크가 있습니다. 아코디언 메뉴의 레이아웃은 완전히 조정 가능합니다. 기본 레이아웃의 디자인이 마음에 들지 않으므로 걱정하지 마십시오. 웹 페이지에 jQuery를 추가

http://jqueryui.com/accordion/#default

약 30 초 정도 걸립니다,하지만 당신에게 당신의 페이지에 대한 유용한 추가, 애니메이션의 영원하고, 대화 형 콘텐츠 조작을 제공합니다! u는 여기 dropdwon 메뉴에 대한 효과를 완화하기위한 jQuery를 사용할 수 있습니다

Answer 2

것은

http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html

Answer 3

당신이 자바 스크립트 만 CSS없이 의미 '부드러운 CSS 메뉴'를 쓴 한 예입니다?

그렇다면 CSS 레벨 3 전환을 사용하십시오.

#cssmenu ul ul { 
    /* this will apply to inner UL, adapt to your desired selector */ 
    -webkit-transition: height 0.3s ease-in-out; 
    -o-transition: height 0.3s ease-in-out; 
    -moz-transition: height 0.3s ease-in-out; 
    transition: height 0.3s ease-in-out; 
} 

[편집]

그것은 당신의 상황을 위해 작동하지 않는 경우, 아마 당신의 내면의 UL 요소에는 '높이가없는 때문입니다.

크로스 브라우저 솔루션의 항목에 대한 자세한 내용은

#cssmenu .has-sub:hover > ul { 
    display: block; 
    height:auto; /* add this */ 
} 
#cssmenu .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    height:0; /* add this */ 
    top: 100%; 
    left: 0; 
} 

, CSS 전이 발전기의 순을 검색

Answer 4

나는 경우에만 CSS3에서 만든이 http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu

이 메뉴를 사용하여 Forrst에서이 게시물에서 영감을 얻었습니다! 이것은 중첩 된 ul 구조체로 구성되어 메뉴의 두 번째 레벨을 생성합니다.이 메뉴는 처음에는 불투명도가 0으로 설정되어 숨겨져 있습니다. 링크가 올라 오면 각각의 ul이 표시되고 아래로 내려갑니다. 이는 불투명도를 1로 설정하고 CSS3 전환과 결합하여 위쪽 오프셋을 변경하여 프로세스를 부드럽게 애니메이트합니다.

체크 아웃 코드 및만큼 당신이 원하는대로 그것으로 재생 :