Bootstrap Snippet float nav using HTML CSS Javascript

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="menu">
        <div class="hamburger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="menu-inner">
            
            <ul>
                <li>Menu Item</li>
                <li>Menu Item</li>
                <li>Menu Item</li>
                <li>Menu Item</li>
                <li>Menu Item</li>
                <li>Menu Item</li>
            </ul>
        </div>
  
  
        
        <svg version="1.1" id="blob"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path id="blob-path" d="M60,500H0V0h60c0,0,20,172,20,250S60,900,60,500z"/>
        </svg>
    </div>
<h2> hover close to the menu </h2>
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, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color:#26394E ;
        }
        #menu {
            height: 100%;
            position: fixed;
            background-color: #FED057;
            width: 300px;
            transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
            transform: translateX(-100%);
            left: 60px;
        }
        #menu.expanded {
            transform: translateX(0%);
            left: 0px;
        }
        .menu-inner {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #blob {
            top: 0;
            z-index: -1;
            right: 60px;
            transform: translateX(100%);
            height: 100%;
            position: absolute;
        }
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
$(window).load(function(){
    var height = window.innerHeight,
  x= 0, y= height/2,
    curveX = 10,
    curveY = 0,
    targetX = 0,
    xitteration = 0,
    yitteration = 0,
    menuExpanded = false;
    
    blob = $('#blob'),
    blobPath = $('#blob-path'),
    hamburger = $('.hamburger');
    $(this).on('mousemove', function(e){
        x = e.pageX;
        
        y = e.pageY;
    });
    $('.hamburger, .menu-inner').on('mouseenter', function(){
        $(this).parent().addClass('expanded');
        menuExpanded = true;
    });
    $('.menu-inner').on('mouseleave', function(){
        menuExpanded = false;
        $(this).parent().removeClass('expanded');
    });
    function easeOutExpo(currentIteration, startValue, changeInValue, totalIterations) {
        return changeInValue * (-Math.pow(2, -10 * currentIteration / totalIterations) + 1) + startValue;
    }
    var hoverZone = 150;
    var expandAmount = 20;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"float nav"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"float nav" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"float nav"
Bootstrap 3.0.0 Snippet by evarevirus