菜单
在一个临时的面板上显示一组操作。
规则
- 至少包含 2 个以上的菜单项。
- 不应该被当做主要导航方式。
- 菜单一般于搜索栏配套使用
代码演示
菜单
默认
请将使用菜单的页面html,body设置：heigth:100%;width:100%,menu-item-action为选中状态
<div class="menu-wrapper " >
<div class="search-wrapper">
<div class="search">
<span class="search-icon icon-search"></span>
<div class="search-text">搜索医院、医生</div>
<input type="text" class="search-input">
<span class="search-close"></span>
</div>
<button class="search-canel">取消</button>
</div>
<div class="menu">
<div class="menu-item ">
<div class="list-ord">
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item menu-item-action">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item ">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
</div>
</div>
</div>
</div>
二级菜单
请将使用菜单页的页面设置：heigth:100%;width:100% 分别为.menu-item添加menu-item-senior、menu-item-junior
<div class="menu-wrapper " >
<div class="search-wrapper">
<div class="search">
<span class="search-icon icon-search"></span>
<div class="search-text">搜索科室，支持中文/拼音/首字母检索</div>
<input type="text" class="search-input">
<span class="search-close"></span>
</div>
<button class="search-canel">取消</button>
</div>
<div class="menu">
<div class="menu-item menu-item-senior">
<div class="list-ord">
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item menu-item-action">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item ">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
<a class="list-item">
<div class="list-content">外科</div>
</a>
</div>
</div>
<div class="menu-item menu-item-junior">
<div class="list-ord">
<a class="list-item">
<div class="list-content"> 骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item menu-item-action">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item ">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
<a class="list-item">
<div class="list-content">骨外科</div>
</a>
</div>
</div>
</div>
</div>