Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body bgcolor="#E6E6FA">
  <div id="mainicons">
    <a href="/"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
    <a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
    <a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
  </div>
</body>
</html>
 
#mainicons {
  height: 50px;
  width: 70px;
  position: fixed;
  top: 0px;
  left: 0px;
  text-align: center;
}
​
#mainicons>a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
​
#mainicons i {
  display: flex;
  flex-direction: column;
  height: 40px;
  width: 50px;
  padding: 10px;
  color: #fff;
  background: #CE9C87;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
​
#mainicons i:hover {
  -webkit-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  -moz-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  box-shadow: inset 7px 0px 0px 0px #CE9C87;
  color: #CE9C87;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
​
#mainicons span {
  color: #CE9C87;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
​
#mainicons a:hover>span {
  left: 70px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
LeoChen-XtremeApppro
0viewers