css3右键功能菜单ui布局特效代码下载


css3右键功能菜单ui布局特效代码下载
css3右键功能菜单ui布局特效代码下载以及右键功能、菜单ui布局等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='https://unpkg.com/feather-icons'></script>
<script  src="js/script.js"></script>

3. HTML代码

<div class="container">
  <div class="menu">
    <ul class="menu-list">
      <li class="menu-item"><button class="menu-button"><i data-feather="corner-up-right"></i>分享</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="edit-2"></i>重命名</button></li>
    </ul>
    <ul class="menu-list">
      <li class="menu-item"><button class="menu-button menu-button--black"><i data-feather="circle"></i>未审核<i data-feather="chevron-right"></i></button>
      <ul class="menu-sub-list">
        <li class="menu-item"><button class="menu-button menu-button--orange"><i data-feather="square"></i>需要审核</button></li>
                <li class="menu-item"><button class="menu-button menu-button--purple"><i data-feather="octagon"></i>进行中</button></li>
                <li class="menu-item"><button class="menu-button menu-button--green"><i data-feather="triangle"></i>审核通过</button></li>
                <li class="menu-item"><button class="menu-button menu-button--black menu-button--checked"><i data-feather="circle"></i>未审核<i data-feather="check"></i></button></li>
      </ul>
      </li>
      <li class="menu-item"><button class="menu-button"><i data-feather="link"></i>复制链接</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="folder-plus"></i>移动到</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="copy"></i>复制到</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="lock"></i>锁定</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="download"></i>下载</button></li>
    </ul>
    <ul class="menu-list">
      <li class="menu-item"><button class="menu-button menu-button--delete"><i data-feather="trash-2"></i>删除</button></li>
    </ul>
  </div>
</div>
<!--图标库-->
<!--核心-->

相关推荐

发表评论

相关文章