ふわっと出るDropdownメニュー
http://www.red-team-design.com/wp-content/uploads/2011/11/css3-animated-dropdown-menu-demo.html
なんかこれっぽい感じにしたくてやってみた。
表示のon/offをdisplay: block/display: noneでスイッチするとCSS3のアニメーションが働かないので表示切替はvisibility: visible/visibility: hiddenでスイッチしている。
これに加えtranslateyでスライド、opacityでフェードを行っている。
.dropdown-menu { display: block; visibility: hidden; opacity: 0; -webkit-transition-timing-function: cubic-bezier(0, 0, 0.25 ,1); -moz-transition-timing-function: cubic-bezier(0, 0, 0.25 ,1); -o-transition-timing-function: cubic-bezier(0, 0, 0.25 ,1); transition-timing-function: cubic-bezier(0, 0, 0.25 ,1); -webkit-transition-property: transform; -moz-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; } li:hover > .dropdown-menu { visibility: visible; opacity: 1; -webkit-transform: translatey(-10px); -moz-transform: translateY(-10px); -ms-transform: translatey(-10px); -o-transform: translatey(-10px); transform: translatey(-10px); }
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="fluid-container"> <ul class="nav"> <li class="active"> <a class="profile" data-setup="profile"> <i class="icon-user"></i> <span>Menu</span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="/signout" data-setup="localize" data-text-ja="サインアウト">Sign Out</a></li> </ul> </li> </ul> </div> </div> </div>