jquery实现悬浮菜单伸缩动画效果代码-html代码-BFW代码库

jquery实现悬浮菜单伸缩动画效果代码

代码语言：html

代码描述：jquery实现悬浮菜单伸缩动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome.3.2.0.css">
<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body {
  background: #444444;
}

#wrapper {
  margin-top: 100px;
}

.menu-container {
  margin: 10px auto;
  width: 64px;
  height: 64px;
  white-space: nowrap;
  box-shadow: 3px 3px #2E2E2E;
}
.menu-container .label {
  display: none;
  position: absolute;
  font: 26px/64px electrolize;
  width: 64px;
  text-align: center;
  color: white;
}
.menu-container .tile {
  float: left;
  height: 64px;
  width: 64px;
}
.menu-container .bar {
  display: inline-block;
  height: 64px;
  vertical-align: top;
  width: 0px;
  overflow: hidden;
  background: #777;
}
.menu-container .bar .buttons {
  width: 300px;
  height: 64px;
  text-align: center;
}
.menu-container .bar .buttons img {
  height: 48px;
  padding: 8px 0;
}
.menu-container .bar .buttons p {
  font: 12px/64px roboto;
  color: #fff;
  letter-spacing: 3px;
}

/* Tile colouring */
#life .label, #life .tile {
  background: #52CC5C;
}

#work .label, #work .tile {
  background: #CC5252;
}

#play .label, #play .tile {
  background: #52A3CC;
}

#talk .label, #talk .tile {
  background: #CCCC52;
}

#link .label, #link .tile {
  background: #7C22D6;
}

/* Styling for font text icons */
[class^="icon-"] {
  display: inline-block;
  width: 100%;
  line-height: 64px;
  text-align: center;
  height: 64px;
  font-size: 37px;
  background: -webkit-linear-gradient(#fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[class^="icon-"]:before {
  display: initial;
}

/* Vertical adjustments to font text icons */
.icon-briefcase {
  line-height: 68px;
}

.icon-gamepad {
  line-height: 60px;
}

.icon-comments {
  line-height: 62px;
}

.icon-link {
  line-height: 66px;
}

/* Hide the secret (shh!) menu */
#link {
  display: none;
}
</style>




  <link href='https://fonts.googleapis.com/css?family=Roboto|Electrolize' rel='stylesheet' type='text/css' />
</head>

<body>
  <div id="wrapper">
    <div id="life" class="menu-container" tabindex="1">
      <div class="label">life</div>
      <div class="tile"><i class="icon-user"></i></div>
      <div class="bar">
        <div class="buttons">
          <!-- Image links here -->
        </div>
      </div>
    </div>
    <div id="work" class="menu-container" tabindex="2">
      <div class="label">work</div>
      <div class="tile"><i class="icon-briefcase"></i></div>
      <div class="bar">
        <div class="buttons">
          <!-- Image links here -->
        </div>
      </div>
    </div>
    <div id="play" class="menu-container" tabindex="3">
      <div class="label">play</div>
      <div class="tile"><i class="icon-gamepad"></i></div>
      <div class="bar">
        <div class="buttons">
          <!-- Image links here -->
        </div>
      </div>
    </div>
    <div id="talk" class="menu-container" tabindex="4">
      <div class="label">talk</div>
      <div class="tile"><i class="icon-comments"></i></div>
      <div class="bar">
        <div class="buttons">
          <!-- Image .........完整代码请登录后点击上方下载按钮下载查看