QQ客服
当前位置 : 上海时时乐开奖彩经 > 代码 > 网页特效 > 表单代码 > js css3下拉城市菜单多选代码

彩票走势图上海时时乐组选号: js css3下拉城市菜单多选代码

基于css3制作圆形下拉框,点击滑动展开收缩城市菜单,支持多选/勾选城市效果。这是一款实用的下拉菜单选择代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<!--地球图标-->
<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">济南</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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 上海时时乐开奖彩经

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了