菜单
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
4.3.1 下拉菜单
HTML
SCSS
CSS
<span class="hui-dropdown"> <a class="hui-dropdown-link" data-toggle="hui-dropdown" aria-haspopup="true" aria-expanded="true">点击菜单</a> <ul class="hui-dropdown-menu hui-menu radius box-shadow"> <li class="hui-menu-item"><a href="#">菜单一</a></li> <li class="hui-menu-item"><a href="#">菜单二</a></li> </ul> </span>
.hui-menu { background-color: #fff; border: solid 1px #f2f2f2; display: inline-block; &.radius { border-top-left-radius: 0; border-top-right-radius: 0; } &.box-shadow { border-top: none; } > .hui-menu-item { position: relative; clear: both; > a { display: block; border-bottom: solid 1px #f2f2f2; padding: 5px 20px; line-height: 1.8; text-align: left; font-weight: normal; white-space: nowrap; &:hover, &:focus { text-decoration: none; background-color: #fafafa; } .arrow { position: absolute; top: 50%; margin-top: -10px; right: 5px; line-height: 20px; height: 20px; color: #999; } } &.open > a { text-decoration: none; background-color: #fafafa; } &:last-child>a { border-bottom: none; } > .hui-menu { display: none; } &.open { > .hui-menu { display: inline-block; position: absolute; left: 100%; top: -1px; min-width: 100%; } } &.disabled>a { color: #999; text-decoration: none; cursor: no-drop; background-color: transparent; } /*线条*/ .divider { display: block; height: 0px; line-height: 0px; margin: 9px 0; overflow: hidden; border-top: solid 1px #eee; } } } .hui-dropdown { display: inline-block; &:focus{ outline: 0; } .hui-dropdown-link { display: inline-block; } .hui-dropdown-menu { display: none; @include transition(all 0.3s ease 0s); &:focus { outline: 0; } .hui-menu-item.arrow { position: absolute; display: block; width: 12px; height: 8px; margin-top: -13px; margin-left: 20%; line-height: 0; background: url(../images/dropDown/icon-jt.png) no-repeat 0 0 } } /*鼠标经过*/ &.hover, &.open { .hui-dropdown-link { text-decoration: none; background-color: rgba(255, 255, 255, 0.2); } } &.open { .hui-dropdown-link{ .hui-dropdown-arrow { transition-duration: 0.3s; transition-property: all; _background-position: 0 0; transform: rotate(180deg); } } } >.hui-menu { display: none; } /*打开菜单*/ &.open { position: relative; z-index: 990; /*默认左对齐*/ > .hui-dropdown-menu { position: absolute; z-index: 1000; display: inline-block; top: 100%; left: -1px; min-width: 100%; background-color: #fff; border: solid 1px #f2f2f2; } /*右对齐*/ &.right > .hui-dropdown-menu { right: -1px!important; left: auto!important; } } }
.hui-menu { background-color: #fff; border: solid 1px #f2f2f2; display: inline-block; } .hui-menu.radius { border-top-left-radius: 0; border-top-right-radius: 0; } .hui-menu.box-shadow { border-top: none; } .hui-menu > .hui-menu-item { position: relative; clear: both; /*线条*/ } .hui-menu > .hui-menu-item > a { display: block; border-bottom: solid 1px #f2f2f2; padding: 5px 20px; line-height: 1.8; text-align: left; font-weight: normal; white-space: nowrap; } .hui-menu > .hui-menu-item > a:hover, .hui-menu > .hui-menu-item > a:focus { text-decoration: none; background-color: #fafafa; } .hui-menu > .hui-menu-item > a .arrow { position: absolute; top: 50%; margin-top: -10px; right: 5px; line-height: 20px; height: 20px; color: #999; } .hui-menu > .hui-menu-item.open > a { text-decoration: none; background-color: #fafafa; } .hui-menu > .hui-menu-item:last-child > a { border-bottom: none; } .hui-menu > .hui-menu-item > .hui-menu { display: none; } .hui-menu > .hui-menu-item.open > .hui-menu { display: inline-block; position: absolute; left: 100%; top: -1px; min-width: 100%; } .hui-menu > .hui-menu-item.disabled > a { color: #999; text-decoration: none; cursor: no-drop; background-color: transparent; } .hui-menu > .hui-menu-item .divider { display: block; height: 0px; line-height: 0px; margin: 9px 0; overflow: hidden; border-top: solid 1px #eee; } .hui-dropdown { display: inline-block; /*鼠标经过*/ /*打开菜单*/ } .hui-dropdown:focus { outline: 0; } .hui-dropdown .hui-dropdown-link { display: inline-block; } .hui-dropdown .hui-dropdown-menu { display: none; transition: all 0.3s ease 0s; } .hui-dropdown .hui-dropdown-menu:focus { outline: 0; } .hui-dropdown .hui-dropdown-menu .hui-menu-item.arrow { position: absolute; display: block; width: 12px; height: 8px; margin-top: -13px; margin-left: 20%; line-height: 0; background: url(../images/dropDown/icon-jt.png) no-repeat 0 0; } .hui-dropdown.hover .hui-dropdown-link, .hui-dropdown.open .hui-dropdown-link { text-decoration: none; background-color: rgba(255, 255, 255, 0.2); } .hui-dropdown.open .hui-dropdown-link .hui-dropdown-arrow { transition-duration: 0.3s; transition-property: all; _background-position: 0 0; transform: rotate(180deg); } .hui-dropdown > .hui-menu { display: none; } .hui-dropdown.open { position: relative; z-index: 990; /*默认左对齐*/ /*右对齐*/ } .hui-dropdown.open > .hui-dropdown-menu { position: absolute; z-index: 1000; display: inline-block; top: 100%; left: -1px; min-width: 100%; background-color: #fff; border: solid 1px #f2f2f2; } .hui-dropdown.open.right > .hui-dropdown-menu { right: -1px !important; left: auto !important; }