微信扫码登录 ×
js css3下拉城市菜单多选代码

js css3下拉城市菜单多选代码

收藏
js css3下拉城市菜单多选代码
基于css3制作圆形下拉框,点击滑动展开收缩城市菜单,支持多选/勾选城市效果。这是一款实用的下拉菜单选择代码。

使用方法:

1、head引入css文件

<!--地球图标-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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">济南</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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。

x
×
×

注册

QQ注册 立即下载 微信注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了