Bootstrap Snippet CSS only PEEK navigation for mini navigation using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CSS only PEEK navigation for mini navigation"
Bootstrap 4.0.0 Snippet by mayasky76

Related: See More

Questions / Comments:

"CSS only PEEK navigation for mini navigation" Bootstrap 4.0.0 Snippet by mayasky76

Related: See More

Questions / Comments:

"CSS only PEEK navigation for mini navigation"
Bootstrap 4.0.0 Snippet by mayasky76