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 {
  .........完整代码请登录后点击上方下载按钮下载查看