基于css3制作圓形下拉框,點擊滑動展開收縮城市菜單,支持多選/勾選城市效果。這是一款實用的下拉菜單選擇代碼。
使用方法:
1、head引入css文件
<!--地球圖標(biāo)-->
<link rel="stylesheet">
<!--核心樣式-->
<link rel="stylesheet" href="css/style.css">
2、body引入HTML代碼
<div class="app-canvas">
<div class="menubox" tabindex="0">
<div class="menubox__label">
<i class="material-icons">language</i>
<span class="menubox__label-text">城市</span>
</div>
<div class="menubox__contents">
<ul class="menubox__options">
<li class="menubox__option">
<label class="menubox__option-toggle">
<input type="checkbox">
<span class="menubox__option-label">上海</span>
<span class="menubox__option-toggle-check"></span>
</label>
</li>
<li class="menubox__option">
<label class="menubox__option-toggle">
<input type="checkbox">
<span class="menubox__option-label">北京</span>
<span class="menubox__option-toggle-check"></span>
</label>
</li>
<li class="menubox__option">
<label class="menubox__option-toggle">
<input type="checkbox">
<span class="menubox__option-label">廣州</span>
<span class="menubox__option-toggle-check"></span>
</label>
</li>
<li class="menubox__option">
<label class="menubox__option-toggle">
<input type="checkbox">
<span class="menubox__option-label">武漢</span>
<span class="menubox__option-toggle-check"></span>
</label>
</li>
<li class="menubox__option">
<label class="menubox__option-toggle">
<input type="checkbox">
<span class="menubox__option-label">湖南</span>
<span class="menubox__option-toggle-check"></span>
</label>
</li>
<li class="menubox__option">
<label class="menubox__option-toggle">
<input type="checkbox">
<span class="menubox__option-label">濟(jì)南</span>
<span class="menubox__option-toggle-check"></span>
</label>
</li>
<li class="menubox__option">
<label class="menubox__option-toggle">
<input type="checkbox">
<span class="menubox__option-label">重慶</span>
<span class="menubox__option-toggle-check"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
<script src="js/index.js"></script>