Cool Bootstrap Dot Navigation

Cool Bootstrap Dot Navigation.markdown

Cool Bootstrap Dot Navigation

A Pen by Nunaram Hembram on CodePen.

License.

index.html

<!-- PATTERN OVERLAY -->
<div id="overlay"></div>

<!-- MENUBAR TOP -->
<div id="menubar" class="top">
  <ul class="nav menu">
    <li class="active"><a href="#home" class="link" data-toggle="tooltip" title="Home"><i class="fa fa-home"></i></a></li>
    <li><a href="#about" class="link" data-toggle="tooltip" title="About"><i class="fa fa-info-circle"></i></a></li>
    <li><a href="#team" class="link" data-toggle="tooltip" title="Team"><i class="fa fa-users"></i></a></li>
    <li><a href="#portfolio" class="link" data-toggle="tooltip" title="Portfolio"><i class="fa fa-briefcase"></i></a></li>
    <li><a href="#contact" class="link" data-toggle="tooltip" title="Contact"><i class="fa fa-envelope"></i></a></li>
  </ul>
</div>
<!-- MENUBAR BOTTOM -->
<div id="menubar" class="bottom">
  <ul class="nav menu">
    <li class="active"><a href="#home" class="link" data-toggle="tooltip" title="Home"><i class="fa fa-home"></i></a></li>
    <li><a href="#about" class="link" data-toggle="tooltip" title="About"><i class="fa fa-info-circle"></i></a></li>
    <li><a href="#team" class="link" data-toggle="tooltip" title="Team"><i class="fa fa-users"></i></a></li>
    <li><a href="#portfolio" class="link" data-toggle="tooltip" title="Portfolio"><i class="fa fa-briefcase"></i></a></li>
    <li><a href="#contact" class="link" data-toggle="tooltip" title="Contact"><i class="fa fa-envelope"></i></a></li>
  </ul>
</div>
<!-- MENUBAR LEFT -->
<div id="menubar" class="left">
  <ul class="nav menu">
    <li class="active"><a href="#home" class="link" data-toggle="tooltip" title="Home"><i class="fa fa-home"></i></a></li>
    <li><a href="#about" class="link" data-toggle="tooltip" title="About"><i class="fa fa-info-circle"></i></a></li>
    <li><a href="#team" class="link" data-toggle="tooltip" title="Team"><i class="fa fa-users"></i></a></li>
    <li><a href="#portfolio" class="link" data-toggle="tooltip" title="Portfolio"><i class="fa fa-briefcase"></i></a></li>
    <li><a href="#contact" class="link" data-toggle="tooltip" title="Contact"><i class="fa fa-envelope"></i></a></li>
  </ul>
</div>
<!-- MENUBAR RIGHT-->
<div id="menubar" class="right">
  <ul class="nav menu">
    <li class="active"><a href="#home" class="link" data-toggle="tooltip" title="Home"><i class="fa fa-home"></i></a></li>
    <li><a href="#about" class="link" data-toggle="tooltip" title="About"><i class="fa fa-info-circle"></i></a></li>
    <li><a href="#team" class="link" data-toggle="tooltip" title="Team"><i class="fa fa-users"></i></a></li>
    <li><a href="#portfolio" class="link" data-toggle="tooltip" title="Portfolio"><i class="fa fa-briefcase"></i></a></li>
    <li><a href="#contact" class="link" data-toggle="tooltip" title="Contact"><i class="fa fa-envelope"></i></a></li>
  </ul>
</div>

<!--  SECTIONS   -->
<section id="home">
  <h1 class="h1">Home</h1>
</section>  
<section id="about">
  <h1 class="h1">About</h1>
</section>  
<section id="team">
  <h1 class="h1">Team</h1>
</section>  
<section id="portfolio">
  <h1 class="h1">Portfolio</h1>
</section>  
<section id="contact">
  <h1 class="h1">Contact</h1>
</section>  

script.js

  $('#menubar.top a[data-toggle="tooltip"]').tooltip({ placement: 'bottom' });
  $('#menubar.bottom a[data-toggle="tooltip"]').tooltip({ placement: 'top' });
  $('#menubar.right a[data-toggle="tooltip"]').tooltip({ placement: 'left' });
  $('#menubar.left a[data-toggle="tooltip"]').tooltip({ placement: 'right' });


$('.link').click(function(e){
  e.preventDefault();
 var link = $(this).attr('href');
 	var posi = $(link).offset().top-10;
  	$('body,html').animate({scrollTop:posi},1200, 'easeInOutExpo');
 
});

	$('html,body').scrollspy({ target: '#menubar', offset: 10  });

$.scrollify({
		section : "section",
		sectionName : false,
		easing: "easeInOutExpo",
		scrollSpeed: 1200,
		offset :10,
		setHeights: false,
		after:function() {$.scrollify.update()}
	});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.3/jquery.scrollify.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Oswald);
body{background:url(https://pixabay.com/static/uploads/photo/2014/12/15/17/17/scuba-diver-569333_960_720.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  color:#fff;
  text-align:center; 
}
section{
	min-height: 100vh;
	width: 100%;
	padding: 20px 0;
  position:relative;
}
.h1{
  text-align:center;
  width:100%;
	font-family: "Oswald", sans-serif;
  font-size: 50px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
  color:#FF0080;
  font-weight:bold;
	position: absolute;
	top: 45%;
	transform:translateY(-50%);
}

/*  OVERLAY PATTERN  */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: rgba(11,16,31,0.8);
}

/*  MENUBAR  */
#menubar {
	position: fixed;
	z-index: 9999;
	text-align: center;
	-webkit-transform: translateY(-50%) translateZ(100px);
	-ms-transform: translateY(-50%) translateZ(100px);
	transform: translateY(-50%) translateZ(100px);
}
#menubar.left{
  top: 50%;
	left: 30px;
}
#menubar.right{
  top: 50%;
	right: 30px;
}
#menubar.top{
  top: 10%;
	left: 50%;
  -webkit-transform: translateX(-50%) translateZ(100px);
	-ms-transform: translateX(-50%) translateZ(100px);
	transform: translateX(-50%) translateZ(100px);
}

#menubar.bottom{
  bottom: 10%;
	left: 50%;
  -webkit-transform: translateX(-50%) translateZ(100px);
	-ms-transform: translateX(-50%) translateZ(100px);
	transform: translateX(-50%) translateZ(100px);
}
@media(max-width:992px) {
#menubar {
	right:20px;
}
}
.nav {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: none;
}
ul.menu {
	list-style: none;
	padding: 0;
}
.nav>li>a, ul.menu a {
	padding: 0;
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #ddd;
	margin:-3px;
	border-radius: 50%;
	border: none;
	font-size: 10px;
	background: rgba(255,255,255,0.2);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.5s ease-in-out;
}
#menubar.top > .nav>li, #menubar.top > ul.menu li, #menubar.bottom > .nav>li, #menubar.bottom > ul.menu li  {
  display:inline-block;
}
ul.menu li.active a, ul.menu a:hover {
	background-color: #fff;
	color: #222;
	font-size: 14px;
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}
.tooltip {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-family: "Oswald", sans-serif;
}
#menubar.top .tooltip{
	-webkit-animation: fadeInTop 300ms ease-in-out;
	animation: fadeInTop 300ms ease-in-out;
}

#menubar.bottom .tooltip{
	-webkit-animation: fadeInBottom 300ms ease-in-out;
	animation: fadeInBottom 300ms ease-in-out;
}

#menubar.left .tooltip{
	-webkit-animation: fadeInLeft 300ms ease-in-out;
	animation: fadeInLeft 300ms ease-in-out;
}

#menubar.right .tooltip{
	-webkit-animation: fadeInRight 300ms ease-in-out;
	animation: fadeInRight 300ms ease-in-out;
}

.tooltip-inner {
	padding: 5px 15px;
	background-color: rgba(0,0,0,0.8);
}
.tooltip.top .tooltip-arrow {
	border-top-color: rgba(0,0,0,0.8);
}
.tooltip.right .tooltip-arrow {
	border-right-color: rgba(0,0,0,0.8);
}
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: rgba(0,0,0,0.8);
}
.tooltip.left .tooltip-arrow {
	border-left-color: rgba(0,0,0,0.8);
}



/*		 FADE IN TOP 		*/
@-webkit-keyframes fadeInTop {
	from {opacity: 0; -webkit-transform: translate3d(0, -20%, 0);}
	to {opacity: 1;	-webkit-transform: none;}
}
@keyframes fadeInTop {
	from { opacity: 0; transform: translate3d(0, -20%, 0);}
	to {opacity: 1;	transform: none;}
}

/*		 FADE IN BOTTOM 		*/
@-webkit-keyframes fadeInBottom {
	from {opacity: 0; -webkit-transform: translate3d(0%, 20%, 0);}
	to {opacity: 1;	-webkit-transform: none;}
}
@keyframes fadeInBottom {
	from { opacity: 0; transform: translate3d(0, 20%, 0);}
	to {opacity: 1;	transform: none;}
}

/*		 FADE IN LEFT 		*/
@-webkit-keyframes fadeInLeft {
	from {opacity: 0; -webkit-transform: translate3d(-8%, 0, 0);}
	to {opacity: 1;	-webkit-transform: none;}
}
@keyframes fadeInLeft {
	from { opacity: 0; transform: translate3d(-8%, 0, 0);}
	to {opacity: 1;	transform: none;}
}

/*		 FADE IN RIGHT 		*/
@-webkit-keyframes fadeInRight {
	from {opacity: 0; -webkit-transform: translate3d(8%, 0, 0);}
	to {opacity: 1;	-webkit-transform: none;}
}
@keyframes fadeInRight {
	from { opacity: 0; transform: translate3d(8%, 0, 0);}
	to {opacity: 1;	transform: none;}
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />