7+ CSS Sliding Menu Examples

This post contains a total of 7+ Hand-Picked CSS Sliding Menu Examples with Source Code. All these Sliding Menus are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Sliding Menu Examples

1. By Je

Made by Je. Pure CSS Sliding Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  margin: 0;
  font-family: 'Roboto';
  background-color:#229F8E;
  color:#fff;
}

.menu {
  font-weight: 100;
  background: #efefef;
  width: 150px;
  height: 100%;
  padding-left: 50px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
  right: -130px;
  transition: all .3s;
  -webkit-transition: all .3s;
  color: #222
}

.menu:hover, .menu:focus {
  transform: translate3d(-130px, 0, 0);
  animation-timing-function: 1s ease-in
}

.menu .title {
  top: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transform: rotate(270deg);
  left: 10px;
  font-weight: 800;
  font-size: 15px
}

.menu .nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-weight: 100
}

.menu .nav li {
  padding-bottom: 30px;
  list-style-type: none
}

.menu .nav li a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all .3s;
  -webkit-transition: all .3s
}

.menu .nav li a:hover { color: #aaa }

.intro {
  position: absolute;
  top: 30%;
  width: 40%;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-size: 45px;
  text-align: center;
  font-family: 'Muli-ExtraLightItalic'
}
</style>
</head>
<body>
  <div class="menu">
    <div class="title">MENU</div>
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

<div class="intro">
  Pure CSS Sliding Menu Demo</div>
</body>
</html>

2. By EL Criptico

Made by EL Criptico. Sliding menu with icon animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>

<style>
html, body {height:100%;}

#header {width:220px; margin:50px auto 0px auto;}
#header h1 {font:bold 18px verdana; color:#454545; }
#header h1 a {text-decoration:none; padding:4px; background:#fff; color:#000; border:4px solid #ff923a;}
#header h1 a:hover {border:4px solid #01b4ff;}

.logo {font-family: 'Lobster Two', cursive; font-size:42px; background: -webkit-linear-gradient(#135964, #0d3a46);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
.logo:hover {cursor:pointer; background: -webkit-linear-gradient(#d20f0a, #960505);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

#wrapper {margin:0 auto; width:100%;}
textarea {width:400px; margin-left:33%; }
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body:before, body:after {
  content: "";
  display: block;
  height: 50%;
  background: #00bdea;
}
body:after {
  background: #208FF9;
}

/* MAIN VARIABLES FOR CUSTOMIZATION */
/* -------------------------------- */
.nav {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 90px;
  margin-top: -45px;
  background: #fff;
  border-radius: 5px;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
}
.nav__cb {
  z-index: -1000;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}
.nav__content {
  position: relative;
  width: 90px;
  height: 100%;
  -webkit-transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);
  transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);
}
.nav__cb:checked ~ .nav__content {
  -webkit-transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  width: 410px;
}
.nav__items {
  position: relative;
  width: 410px;
  height: 100%;
  padding-left: 20px;
  padding-right: 110px;
  list-style-type: none;
  font-size: 0;
}
.nav__item {
  display: inline-block;
  vertical-align: top;
  width: 70px;
  text-align: center;
  color: #6C7784;
  font-size: 14px;
  line-height: 90px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  cursor: pointer;
}
.nav__item:hover {
  color: #00bdea;
}
.nav__item-text {
  display: block;
  height: 100%;
  -webkit-transform: rotateY(-70deg);
          transform: rotateY(-70deg);
  opacity: 0;
  -webkit-transition: opacity 0.84s, -webkit-transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: opacity 0.84s, -webkit-transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.84s;
  transition: transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.84s, -webkit-transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5);
}
.nav__cb:checked ~ .nav__content .nav__item-text {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  opacity: 1;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: opacity 0.2s, -webkit-transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5);
  transition: transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s;
  transition: transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s, -webkit-transform 0.84s cubic-bezier(0.48, 0.43, 0.7, 2.5);
}
.nav__item:nth-child(1) .nav__item-text {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(1) .nav__item-text {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav__item:nth-child(2) .nav__item-text {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(2) .nav__item-text {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.nav__item:nth-child(3) .nav__item-text {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(3) .nav__item-text {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.nav__item:nth-child(4) .nav__item-text {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav__cb:checked ~ .nav__content .nav__item:nth-child(4) .nav__item-text {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.nav__btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
  height: 90px;
  padding: 36px 31px;
  cursor: pointer;
}
.nav__btn:before, .nav__btn:after {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: #096DD3;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  transition: background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
  transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s;
  transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s, -webkit-transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
}
.nav__btn:before {
  margin-bottom: 10px;
}
.nav__btn:hover:before, .nav__btn:hover:after {
  background: #00bdea;
}
.nav__cb:checked ~ .nav__btn:before {
  -webkit-transform: translateY(7px) rotate(-225deg);
          transform: translateY(7px) rotate(-225deg);
}
.nav__cb:checked ~ .nav__btn:after {
  -webkit-transform: translateY(-7px) rotate(225deg);
          transform: translateY(-7px) rotate(225deg);
}
</style>
</head>
<body>
		<div id="header">
			<div class="logo"><a href="http://prostokod.ru">ProstoKod.ru</a></div>
		</div>
		<div id="wrapper">

<nav class="nav">
  <input type="checkbox" class="nav__cb" id="menu-cb"/>
  <div class="nav__content">
    <ul class="nav__items">
      <li class="nav__item">
        <span class="nav__item-text">
          Home
        </span>
      </li>
      <li class="nav__item">
        <span class="nav__item-text">
          Works
        </span>
      </li>
      <li class="nav__item">
        <span class="nav__item-text">
          About
        </span>
      </li>
      <li class="nav__item">
        <span class="nav__item-text">
          Contact
        </span>
      </li>
    </ul>
  </div>
  <label class="nav__btn" for="menu-cb"></label>
</nav>
		</div>
</body>
</html>

3. By Egor Avakumov

Made by Egor Avakumov. CSS Sliding menu with list style. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
:root {
  background: #345;
}
.menu {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  overflow: hidden;
}
.menu ul {
  padding: 0;
  margin: 0;
  transform: translateY(-100%);
  transition: all 0.4s;
}
.menu ul:hover {
  transform: translateY(0%);
}
.menu .current-item,
.menu li {
  color: #333;
  padding: 20px 35px;
  list-style: none;
  background: #fff;
  border-bottom: 2px solid #ddd;
  cursor: pointer;
}
.menu li:hover {
  background: #26a69a;
}
.menu li:last-child {
  border-bottom: 0;
}
.current-item {
  z-index: 2;
  position: relative;
}
.current-item:hover + ul {
  transform: translateY(0%);
}
</style>
</head>
<body>
  <nav class="menu">
 <div class="current-item">Menu</div>
 <ul>
   <li>First</li>
   <li>Second</li>
   <li>Three</li>
   <li>Four</li>
 </ul>
</nav>
</body>
</html>

4. By Ants

Made by Ants. Simple toggle sliding menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
* {
  transition: 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

body {
  background: #eee;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: Raleway, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: row-reverse;
}
.frame svg {
  position: absolute;
  width: 128px;
  height: 128px;
  top: 40px;
  left: 70px;
}

input#menu {
  display: none;
}

.footer {
  color: #888;
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.footer a {
  color: #80c3f0;
  padding-bottom: 3px;
  text-decoration: none;
  border-bottom: 2px dashed #80c3f0;
  transition: 0.3s;
}
.footer a:hover {
  color: #4479c3;
  border-bottom: 2px solid #4479c3;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 250px;
}

#menu:checked ~ .other svg {
  left: 5px;
}

#menu:checked ~ .menu {
  margin-left: 0;
}
#menu:checked ~ .menu li {
  margin-left: 0px;
  opacity: 1;
  cursor: pointer;
}
#menu:checked ~ .menu .toggle {
  right: 10px;
}
#menu:checked ~ .menu .toggle .line:nth-child(1), #menu:checked ~ .menu .toggle .line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#menu:checked ~ .menu .toggle .line:nth-child(3) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu {
  list-style: none;
  padding: 20px;
  padding-top: 50px;
  margin: 0;
  margin-left: -240px;
  width: 200px;
  height: 100%;
  background: #80c3f0;
  color: #fff;
  box-shadow: inset -20px 0 20px -20px #4479c3;
  position: relative;
}
.menu .toggle {
  cursor: pointer;
  display: block;
  width: 32px;
  height: 32px;
  background: #4479c3;
  position: absolute;
  top: 20px;
  right: -50px;
  border-radius: 50%;
  box-shadow: 0 5px 20px 0 #4479c3;
}
.menu .toggle:hover {
  background: #3159a4;
}
.menu .toggle .line {
  width: 15px;
  height: 2px;
  background: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.menu .toggle .line:nth-child(1) {
  transform: translate(-50%, -50%);
}
.menu .toggle .line:nth-child(2) {
  transform: translate(-50%, -50%) translateY(-5px);
}
.menu .toggle .line:nth-child(3) {
  transform: translate(-50%, -50%) translateY(5px);
}
.menu li {
  margin-left: -50px;
  opacity: 0;
  margin-bottom: 5px;
}
.menu .title {
  font-weight: bold;
  margin-bottom: 15px;
}

.other {
  position: relative;
  width: 100%;
}
</style>
</head>
<body>
  <div class="frame">
	<input type="checkbox" id="menu" name="menu">
	<div class="other">
		<svg viewBox="80 95 100 97" xmlns="http://www.w3.org/2000/svg">
  <defs></defs>
  <path style="stroke-dasharray: 5px; stroke: rgb(68, 121, 195); fill: none; stroke-width: 2px; stroke-linecap: round;" d="M 87.021 101.278 C 87.021 101.278 132.743 113.569 126.844 157.325"></path>
  <path d="M 227.139 103.772 L 233.069 114.044 L 221.208 114.044 L 227.139 103.772 Z" style="fill: rgb(68, 121, 195);" transform="matrix(-0.987791, 0.155788, -0.155788, -0.987791, 327.144318, 174.670074)" bx:shape="triangle 221.208 103.772 11.861 10.272 0.5 0 [email protected]"></path>
			
<text style="fill: rgb(68, 121, 195);" x="127.38" y="124.877">Toggle</text>

</svg>
		<div class="center">
			
			<h1>Sliding menu</h1>
			<h2>Only css</h2>
		</div>
	</div>
	<ul class="menu">
		<label for="menu" class="toggle">
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		</label>
		<li class="title">Menu</li>
		<li>Main page</li>
		<li>Docs</li>
		<li>Support</li>
	</ul>
</div>

<div class="footer">
	<p>Inspired by:</p>
	<p><a href="https://codepen.io/dev_loop/pen/ZZPoEB" target="_blank">Sliding menu by Dev Loop</a> and 100dayscss</p>
</div>
</body>
</html>

5. By Iain Earl

Made by Iain Earl. Dual CSS Sliding Menus. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700" rel="stylesheet">
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #000;
}

.page-wrapper {
  transition: 250ms;
}

.page-content {
  text-align: center;
  transition: 250ms;
  background-color: honeydew;
}
.page-content .text-content {
  padding: 40px;
}
.page-content .text-content p {
  max-width: 600px;
  margin: 20px auto;
}
.page-content .full-screen.image {
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://pixabay.com/get/e833b50e21f3083ed1534705fb0938c9bd22ffd41cb117449cf7c77ba4/motion-1641979_1920.jpg);
  background-size: cover;
}
.page-content .full-screen.image h1 {
  padding-top: 25vh;
  font-size: 68px;
  color: #ebebeb;
  text-shadow: 0 0 15px #333333;
}

h1, h2 {
  text-transform: uppercase;
  font-weight: 100;
}

.sidebar {
  width: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  padding-top: 66px;
  background-color: #333;
  color: #bbbbbb;
  transition: 250ms;
}
.sidebar .link {
  padding: 8px 25px;
  cursor: pointer;
  transition: 250ms;
  font-weight: 300;
}
.sidebar .link:hover {
  color: #ebebeb;
}

.sidebar.menu-1 {
  left: -200px;
}

.sidebar.menu-2 {
  right: -200px;
}

.menu-toggle {
  z-index: 100;
  position: fixed;
  top: 25px;
  padding: 5px 10px;
  border: 1px solid #ebebeb;
  color: #ebebeb;
  border-radius: 4px;
  cursor: pointer;
  transition: 250ms;
}
.menu-toggle.menu-1-toggle {
  left: 25px;
}
.menu-toggle.menu-2-toggle {
  right: 25px;
}
.menu-toggle .menu-label {
  display: block;
}
.menu-toggle .close-label {
  display: none;
}

#menu1Toggle {
  display: none;
}
#menu1Toggle:checked ~ .page-wrapper .sidebar.menu-1 {
  left: 0;
  box-shadow: 0 0 15px #000;
}
#menu1Toggle:checked ~ .page-wrapper .menu-toggle.menu-1-toggle {
  border-color: #ebebeb;
  color: #ebebeb;
  left: 115px;
}
#menu1Toggle:checked ~ .page-wrapper .menu-toggle.menu-1-toggle .menu-label {
  display: none;
}
#menu1Toggle:checked ~ .page-wrapper .menu-toggle.menu-1-toggle .close-label {
  display: block;
}

#menu2Toggle {
  display: none;
}
#menu2Toggle:checked + .page-wrapper {
  padding-right: 200px;
}
#menu2Toggle:checked + .page-wrapper .page-content {
  transform: scale(0.9);
}
#menu2Toggle:checked + .page-wrapper .sidebar.menu-2 {
  right: 0;
}
#menu2Toggle:checked + .page-wrapper .menu-toggle.menu-2-toggle {
  border-color: #ebebeb;
  color: #ebebeb;
}
#menu2Toggle:checked + .page-wrapper .menu-toggle.menu-2-toggle .menu-label {
  display: none;
}
#menu2Toggle:checked + .page-wrapper .menu-toggle.menu-2-toggle .close-label {
  display: block;
}
</style>
</head>
<body>
  <input id="menu1Toggle" type="checkbox"/>
<input id="menu2Toggle" type="checkbox"/>
<div class="page-wrapper">
  <div class="page-content">
    <div class="full-screen image">
      <h1>Beach?</h1>
    </div>
    <div class="text-content">
      <h1>Some title or something</h1>
      <p>Some Text</p>
    </div>
  </div>
  <label class="menu-toggle menu-1-toggle" for="menu1Toggle"><span class="menu-label">Menu 1</span><span class="close-label">Close</span></label>
  <label class="menu-toggle menu-2-toggle" for="menu2Toggle"><span class="menu-label">Menu 2</span><span class="close-label">Close</span></label>
  <div class="sidebar menu-1">
    <div class="link">Home</div>
    <div class="link">About</div>
    <div class="link">Portfolio</div>
    <div class="link">Contact</div>
  </div>
  <div class="sidebar menu-2">
    <div class="link">Home</div>
    <div class="link">About</div>
    <div class="link">Portfolio</div>
    <div class="link">Contact</div>
  </div>
</div>
</body>
</html>

6. By Daniel

Made by Daniel. Simple sliding menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 16px;
}
.menu {
  position: fixed;
  width: 4em;
  height: inherit;
  background: #00b300;
}
.menu .item {
  font-family: arial;
  line-height: 2.75em;
  text-align: center;
  transition: 550ms;
  display: block;
  width: inherit;
  height: 3em;
  position: relative;
  cursor: pointer;
}
.menu .item:hover {
  width: 200%;
  background: inherit;
}
.menu .item:hover:before {
  content: "This is ";
}
</style>
</head>
<body>
  <div class='menu'>
  <div class='item'>A</div>
  <div class='item'>B</div>
</div>
</body>
</html>

7. By Virlyz ID

Made by Virlyz ID. Awesome CSS Drop Down Sliding Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>  
<style>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
.samsury-tab1{background:#27ae60;}
.samsury-tab1:hover{background:#555;}
.samsury-fb{background:#555;}
.samsury-fb:hover{background:#2A82D9;}
.samsury-tw{background:#555;}
.samsury-tw:hover{background:#0CA8F0;}
.samsury-g{background:#555;}
.samsury-g:hover{background:#DC321E;}
.samsury-in{background:#555;}
.samsury-in:hover{background:#16a085;}
.samsury-tab2{background:#34495e;}
.samsury-tab2:hover{background:#555;}
.samsury-tab2sub{background: #555;}
.samsury-tab2sub:hover{background: #007f74;}
.samsury-tab3{background:#16a085;}
.samsury-tab3:hover{background:#555;}
.samsury-tab3sub{background: #555;
height:70px;}
.samsury-tab3sub:hover{background: #007f74;}
.samsury-tab4{background:#222;}
.samsury-tab4:hover{background:#555;}
.samsury-tab4sub{background: #555;}
.samsury-tab4sub:hover{background: #007f74;}
.samsury-metro-menu {font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
    position:relative;
    background:none;
    width:500px;
    height:90px;
    border:none;
    margin:20px auto;
    padding:20px;
float:left;
}
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:70px;
    height:70px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:relative;
    top:30%;
    font: 14px Segoe UI, Helvetica, Arial, sans-serif;
    color:#fff;
}
ul.navi:hover {
    height:200px;}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(90px);
    -ms-transform: translatex(90px);
    -o-transform: translatex(90px);
    -webkit-transform: translatex(90px);
    transform: translatex(90px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(180px);
    -ms-transform: translatex(180px);
    -o-transform: translatex(180px);
    -webkit-transform: translatex(180px);
    transform: translatex(180px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(270px);
    -ms-transform: translatex(270px);
    -o-transform: translatex(270px);
    -webkit-transform: translatex(270px);
    transform: translatex(270px);
}
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:100%;
    height:200px auto;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;
    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
        width:80px auto;
       height:80px;
       position:absolute;
       left:0;
      top:0;
      z-index:-1;
    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}
ul.navi > li:hover ul {
    opacity:1;
    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(90px);
    -ms-transform: translatex(-70px) translatey(90px);
    -o-transform: translatex(-70px) translatey(90px);
    -webkit-transform: translatex(-70px) translatey(90px);
    transform: translatex(-70px) translatey(90px);
}

ul.navi li:hover ul li.c {
    -moz-transform: translatex(2px) translatey(90px);
    -ms-transform: translatex(2px) translatey(90px);
    -o-transform: translatex(2px) translatey(90px);
    -webkit-transform: translatex(2px) translatey(90px);
    transform: translatex(2px) translatey(90px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(74px) translatey(90px);
    -ms-transform: translatex(74px) translatey(90px);
    -o-transform: translatex(74px) translatey(90px);
    -webkit-transform: translatex(74px) translatey(90px);
    transform: translatex(74px) translatey(90px);
}
ul.navi li:hover ul li.r1 {
    -moz-transform: translatex(146px) translatey(90px);
    -ms-transform: translatex(146px) translatey(90px);
    -o-transform: translatex(146px) translatey(90px);
    -webkit-transform: translatex(146px) translatey(90px);
    transform: translatex(146px) translatey(90px);
}
i.fa-th-large,i.fa-facebook,i.fa-twitter,i.fa-google-plus,i.fa-download,i.fa-linkedin,i.fa-list,i.fa-cogs,i.fa-wrench,i.fa-volume-up,i.fa-power-off,i.fa-file-o,i.fa-music,i.fa-picture-o,i.fa-sitemap,i.fa-envelope-o,i.fa-random{font-size:30px;color:#fff;padding-top:20px;}
</style>
</head>
<body>
  <div class="samsury-metro-menu">
<ul class="navi">
 <li id="n1"><a class="samsury-tab1" href="#" ><i class="fa fa-th-large"></i></a>
<ul class="sub">
 <li class="l"><a class="samsury-fb" href="#"><i class="fa fa-facebook"></i></a></li>
 <li class="c"><a class="samsury-tw" href="#"><i class="fa fa-twitter"></i></a></li>
  <li class="r"><a class="samsury-g" href="#"><i class="fa fa-google-plus"></i></a></li>
  <li class="r1"><a class="samsury-in" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</li>
<li id="n2"><a class="samsury-tab2" href="#" ><i class="fa fa-download"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab2sub" href="#" title="label 1"><i class="fa fa-file-o"></i></a></li>
<li class="c"><a class="samsury-tab2sub" href="#"><i class="fa fa-music"></i></a></li>
 <li class="r"><a class="samsury-tab2sub" href="#"><i class="fa fa-picture-o"></i></a></li>
</ul>
</li>
<li id="n3"><a class="samsury-tab3" href="#"><i class="fa fa-cogs"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab3sub" href="#"><i class="fa fa-wrench"></i></a></li>
<li class="c"><a class="samsury-tab3sub" href="#"><i class="fa fa-volume-up"></i></a></li>
<li class="r"><a class="samsury-tab3sub" href="#"><i class="fa fa-power-off"></i></a></li>
</ul>
</li>
<li id="n4"><a class="samsury-tab4" href="#"><i class="fa fa-list"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab4sub" href="#"><i class="fa fa-random"></i></a></li>
<li class="c"><a class="samsury-tab4sub" href="#"><i class="fa fa-sitemap"></i></a></li>
<li class="r"><a class="samsury-tab4sub" href="#"><i class="fa fa-envelope-o"></i></a></li>
</ul>
</li>
</ul>
<div style="clear:both"></div>
</div>
</body>
</html>

8. By Marcello Africano

Made by Marcello Africano. Simple Animated sliding menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
#menu {
  height: 100px;
  width: 630px;
  overflow: hidden;
  margin: 50px auto;
  text-align: center;
}

#menu ul li {
  float: left;
  margin: 0 5px;
  list-style-type: none;
}

/* Menu Link Styles */
#menu ul a {
  display: block;
  background: #e0192d;
  color: #fff;
  height: 100px;
  width: 200px;
  font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  text-decoration: none;

  transition: all .35s ease-in-out;
}

/* Secondary Link Styles */
#menu ul a:nth-of-type(even) {
  text-shadow: 0 0 6px #fff;
  background: #333;
  color: white;
}

/* Hover Slide */
#menu ul li:hover :first-child {
  margin-top: -100px;
}
</style>
  <script>
  window.console = window.console || function(t) {};
</script>
</head>
<body>
  <div id="menu">
  <ul>
    <li><a href="#">Home</a><a href="#">See Us</a></li>
    <li><a href="#">About</a><a href="#">Meet Us</a></li>
    <li><a href="#">Contact</a><a href="#">Greet Us</a></li>
  </ul>
</div>
</body>
</html>