<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-8">
<hr>
<h2>Simple Peek navigation</h2>
<p>Built for the minimal novel writing software on the <a href="http://wavemaker.co.uk">Cards novel writing software</a></p>
<p>This works well enough on mobile for the quick tests I've done as long as you're only using a short navigation</p>
</div>
</div>
</div>
<!-- Here is the start of the snippet -->
<div id="peek-nav">
<div id="peek-nav-toggle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" style="fill: #888;" viewBox="0 0 512 512">
<path d="M512 160l-256-128-256 128 256 128 256-128zM256 74.485l171.029 85.515-171.029 85.515-171.029-85.515 171.029-85.515zM460.722 230.361l51.278 25.639-256 128-256-128 51.278-25.639 204.722 102.361zM460.722 326.361l51.278 25.639-256 128-256-128 51.278-25.639 204.722 102.361z"></path>
</svg>
</div>
<div id="peek-nav-container">
<ul>
<li><a href=""><i class="fa fa-home"></i> Dashboard</a></li>
<li><a href=""><i class="fa fa-user"></i> This doesnt break on long sentences</a></li>
<li><a href=""><i class="fa fa-info-circle"></i> And another</a></li>
<li><a href=""><i class="fa fa-facebook"></i> And another one</a></li>
<li><a href=""><i class="fa fa-bomb"></i> Bomb</a></li>
</ul>
</div>
</div>
<!-- Here is the END of the snippet -->
body{
background-color:transparent;
color:#fff;
}
html {
background: url('http://wavemaker.co.uk/themes/Wavemaker/assets/images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Below this is the PEEK CSS you will need- you can ignore all above this*/
#peek-nav{
position:fixed;
top:10px;
left:10px;
min-width:50px;
font-family: "Raleway", sans-serif;
color:#222;
padding:10px;
}
#peek-nav-toggle{
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
transition: .5s ease-out;
width:30px;
height:30px;
}
#peek-nav:hover>#peek-nav-toggle{
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
#peek-nav-container{
white-space:nowrap;
opacity: 0;
max-height:0px;
max-width:0px;
overflow:hidden;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
#peek-nav-container>ul{
margin:0px;
padding:0px;
list-style:none;
}
#peek-nav-container>ul>li{
margin:0px;
padding:0px;
list-style:none;
padding-top:5px;
padding-bottom:5px;
}
#peek-nav-container>ul>li>a{
color:#888;
padding:5px;
text-decoration:none;
display:block;
padding-top:10px;
padding-bottom:5px;
}
#peek-nav-container>ul>li>a:hover{
color:#222;
text-decoration:none;
border-bottom: 1px solid #ccc;
background-color:#fff;
}
#peek-nav:hover>#peek-nav-container{
max-height:1000px;
max-width:1000px;
overflow:visible;
opacity: 1;
}
#peek-nav:hover{
background-color:#fff;
background-color:rgba(255,255,255,0.7);
border-right:1px solid #efefef;
border-bottom:1px solid #efefef;
}
