Float Menu

by sungsoonz

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//use.fontawesome.com/05799db3cf.js"></script>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav nav-pills">
            <li><a href="#step1" data-toggle="tab" data-step="1">Step 1</a></li>
            <li class="active"><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li>
            <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</a></li>
        </ul>
    </div>
</div>
<div id="floatMenu">
    <ul>
        <li><a href="#" data-placement="left"><span>1</span> Select your country of citizenship</a></li>
        <li><a href="#"><span>2</span> Where are you currently living</a></li>
        <li><a href="#"><span>3</span> Select the visa you'd like to apply for</a></li>
        <li class="c"><a href="#"><span class="c">C1</span> Are you</a></li>
		<li class="c"><a href="#"><span class="c">C2</span> Are you living with a partner?</a></li>
        <li class="c"><a href="#"><span class="c">C3</span> Post Graduate : Please select one of the options below</a></li>
    </ul>
</div>
<button class="btn btn-primary">+</button>

<div class="tab-content">
    <div class="tab-pane fade in active" id="step1">

        <div class="well">
            <div class="form">
                <ul>
                    <li><span>1</span> Select your country of citizenship</li>
                    <li><span>2</span> Where are you currently living?</li>
                    <li><span>3</span> Select the visa you'd like to apply for
                        <ul>
                            <li>1. Work</li>
                            <li>2. Visit</li>
                            <li>3. Study</li>
                            <li>4. Live</li>
                            <li>5. Invest</li>
                            <li>6. Business</li>
                     ...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    padding: 20px;
    height: 1000px;
    color: #222;
    background: #fff;
}
.well {
	box-shadow: none;
	padding: 0;
	background: #fafafa;
	border-radius: 0;
}
.navbar {
	margin-bottom: 0;
}
ul {
	margin: 0;
	padding: 0;
}
ul li {
    list-style: none;
    color: #555;
    font-size: 13px;
}
ul li span {
	background: #82ce6f;
	width: 20px;
	height: 20px;
	font-size: 12px;
	text-align: center;
	display: inline-block;
	border-radius: 100px;
	margin-right: 3px;
	color: #fff;
	line-height:1.6;
}

.btn-primary {
    font-size: 30px;
    font-weight: 600;
    border: 1px solid #B9C4D3;
    background: #fff;
    color: #0E68C5;
    width: 44px;
    padding: 0;
    float: left;
    display: block;
    position: fixed;
	left: 28px;
    top: 78px;
}


.btn-primary:hover {
    color: #0E68C5;
	background: #fff;
}

#floatMenu {
    position: absolute;
    top: 90px;
    right: 40px;
	background: #fff;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
	height: 240px;
	overflow: auto;
	border-radius: 4px;
}

#floatMenu > ul > li {
	position: relative;
	padding: 0;
}

#floatMenu ul li a {
    display: block;
	color: #555;
    background-color: #fff;
    text-decoration: none;
	padding: 10px 20px 10px 16px;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#floatMenu ul li.c a {
	background: #fffff3;
}
#floatMenu ul li a:hover {
	background: #eeffea;
}
#floatMenu ul li.c a:hover {
	background: #fff8dc;
}

.well > div {
	width: 100%;
	padding: 20px 80px;
}

#floatMenu > ul,
.form > ul {
    padding: 0;
    margin: 0;
}

.well > div > ul > li {
	font-size: 14px;
	font-weight: 600;
	color: #222;
	padding: 10px;
}

.well > div > ul > li > ul {
	margin: 5px 0;
	padding: 0px 16px;
	border-left: 1px dashed #d4d4d4;
}
.well > div > ul > li > ul > li {
	padding: 10px;
	cursor: pointer;
	border: 1px dashed...

JavaScript

var menu = "#floatMenu";
var menuYloc = null;

$(document).ready(function() {

	$(document).on('click', '.well > div > ul > li > ul > li', function() {
		$(this).toggleClass('active').siblings().removeClass('active');
	});
	
	$(document).on('click', '#floatMenu a', function(e) {
		e.preventDefault();
		var clone = $(this).find('span').clone();
		if ($('.well > div > ul > li > ul > li').hasClass('active')) {
			$('.well > div > ul > li > ul > li.active').append(clone);
			$('.well > div > ul > li > ul > li').removeClass('active');
		}
		
	});
	
	$(document).on({
		mouseenter: function(){
			$(this).popover({
				content: $(this).text,
				placement: 'top',
				container: 'body'
			}).popover('show');
		},
		mouseleave: function(){
			$(this).popover('hide');
		}
	}, '#floatMenu a');

    menuYloc = parseInt($(menu).css("top").substring(0, $(menu).css("top").indexOf("px")))
    $(window).scroll(function() {
        var offset = menuYloc + $(document).scrollTop() + "px";
        $(menu).animate({
            top: offset
        }, {
            duration: 700,
            queue: false
        });
    });
});