摆动的菜单 - 踏得网

点击“Menu”，菜单从左侧渐入

menu,swing

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2081
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Base
-------------------------- */
body {
  background: #fff;
  color: #454545; }

a {
  color: #09f; }

a:hover {
  color: #007acc; }

button {
  -webkit-font-smoothing: antialiased;
  background-color: #09f;
  border: none;
  border-radius: 0.1875em;
  color: white;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  padding: 0.75em 1em;
  text-decoration: none; }

button:hover {
  background-color: #007acc;
  color: white;
  /* Header
-------------------------- */ }

.l-header {
  height: 80px;
  position: relative;
  background: #212121; }

.logo {
  float: left; }

.logo__title {
  margin: 0; }

.logo__link {
  display: inline-block;
  text-decoration: none;
  padding: 0 10px;
  line-height: 80px;
  height: 80px;
  color: #fff;
  word-wrap: no-wrap; }

.menu-btn {
  display: none;
  position: absolute;
  right: 10px;
  top: 20px; }

@media (max-width: 768px) {
  /*  Menu
-------------------------- */
    .logo {
      float: none; }
    .menu-btn {
      display: block; } }

.menu {
  float: right; }

.menu__list {
  overflow: hidden;
  padding-left: 0;
  margin: 0;
  list-style: none; }

.menu__item {
  float: left;
  text-align: center;
  text-align: center; }

.menu__link {
  display: block;
  color: #fff;
  text-decoration: none;
  line-height: 5em;
  height: 5em;
  padding: 0 1.5em;
  word-wrap: no-wrap;
  transition: all 0.3s ease; }

.menu__link:hover, .menu__link:focus {
  background: #09f;
  color: #fff; }

@media (max-width: 768px) {
  /* Wrap
-------------------------- */
    .menu {
      float: none; }
    .menu__item {
      display: block;
      float: none;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -o-transform: translateX(-100%);
      transform: translateX(-100%);
      transition: all 0.3s ease-out; }
    .menu__item--play {
      display: block;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
    .menu__item + .menu__item {
      border-top: 1px solid #008ae6; }
    .menu__link {
      background: #09f; }
    .menu__link:hover {
      background: #007acc; } }

.wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px; }

.l-main .wrap {
  padding: 0 20px; }

HTML

<div id="header" class="l-header">
            <div class="wrap">
                <header class="logo">
                    <h1 class="logo__title">
                        <a href="#" class="logo__link">
                           Swing Menu
                        </a>
                    </h1>
                </header>
                <button class="btn menu-btn">Menu</button>
                <nav class="menu">
                    <ul class="menu__list">
                        <li class="menu__item">
                            <a href="#" class="menu__link">Lien A</a>
                        </li><li class="menu__item">
                            <a href="#" class="menu__link">Lien B</a>
                        </li><li class="menu__item">
                            <a href="#" class="menu__link">Lien C</a>
                        </li><li class="menu__item">
                            <a href="#" class="menu__link">Lien D</a>
                        </li><li class="menu__item">
                            <a href="#" class="menu__link">Lien E</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

<main class="l-main">
            <div class="wrap">
                <h1>Hello world</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, repellat, ducimus quidem doloribus inventore sunt in officiis esse. Eos commodi cum maxime, sapiente beatae dolorum quidem, nisi ratione fugit et.</p>
            </div>
        </main>

点击“Menu”，菜单从左侧渐入

menu,swing

编辑器支持Emmet

快捷键

点击“Menu”，菜单从左侧渐入

menu,swing

HTML5渐变色波动背景的菱形导航菜单

纯CSS3实现的汉堡菜单、飞碟和小行星动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：