"Dot Navigation with tooltips"
Bootstrap 3.1.0 Snippet by maridlcrmn

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 data-spy="affix" id="dot-nav"> <ul> <li class="awesome-tooltip active" title="Home"><a href="#home"></a></li> <li class="awesome-tooltip" title="About"><a href="#about"></a></li> <li class="awesome-tooltip" title="Projects"><a href="#projects"></a></li> <li class="awesome-tooltip" title="Contact"><a href="#contact"></a></li> </ul> </div> <div id="main" class="container"> <section id="home"> <article> <div class="row"> <div class="col-md-12"> <h1>Home Section <small>Secondary text</small></h1> <p> This is a content. </p> </div> </div> </article> </section> <section id="about"> <article> <div class="row"> <div class="col-md-12"> <h1>About Section <small>Secondary text</small></h1> <p> This is a content. </p> </div> </div> </article> </section> <section id="projects"> <article> <div class="row"> <div class="col-md-12"> <h1>Projects Section <small>Secondary text</small></h1> <p> This is a content. </p> </div> </div> </article> </section> <section id="contact"> <article> <div class="row"> <div class="col-md-12"> <h1>Contact Section <small>Secondary text</small></h1> <p> This is a content. </p> </div> </div> </article> </section> </div>
body { background: #f0f0f0; } body, html { height: 100%; } #main { height: 100%; } section { padding: 13% 0; height: 100%; } #dot-nav{ right: 10px; top: 50%; margin-top: -50px; height: 100px; z-index: 999; } #dot-nav ul { list-style: none; margin:0; padding: 0; } #dot-nav li { position: relative; background-color: #bdc3c7; border:3px solid #bdc3c7; border-radius: 15px 15px 15px 15px; cursor: pointer; padding: 5px; height: 10px; margin: 10px 10px 0px 0px; width: 10px; vertical-align:bottom; } #dot-nav li.active, #dot-nav li:hover { background-color: #8e44ad; } #dot-nav a { outline: 0; vertical-align:top; margin: 0px 0px 0px 25px; position: relative; top:-5px; } .awesome-tooltip + .tooltip > .tooltip-inner { background-color: #8e44ad; color: #f5f5f5; border: 1px solid #8e44ad; } .awesome-tooltip + .tooltip.left > .tooltip-arrow{ top:50%; right:0; margin-top:-5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #8e44ad; }
$(document).ready(function(){ $('.awesome-tooltip').tooltip({ placement: 'left' }); $(window).bind('scroll',function(e){ dotnavigation(); }); function dotnavigation(){ var numSections = $('section').length; $('#dot-nav li a').removeClass('active').parent('li').removeClass('active'); $('section').each(function(i,item){ var ele = $(item), nextTop; console.log(ele.next().html()); if (typeof ele.next().offset() != "undefined") { nextTop = ele.next().offset().top; } else { nextTop = $(document).height(); } if (ele.offset() !== null) { thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections); } else { thisTop = 0; } var docTop = $(document).scrollTop(); if(docTop >= thisTop && (docTop < nextTop)){ $('#dot-nav li').eq(i).addClass('active'); } }); } /* get clicks working */ $('#dot-nav li').click(function(){ var id = $(this).find('a').attr("href"), posi, ele, padding = 0; ele = $(id); posi = ($(ele).offset()||0).top - padding; $('html, body').animate({scrollTop:posi}, 'slow'); return false; }); /* end dot nav */ });

Related: See More

Questions / Comments:

Omg, thank you very much! I was going crazy looking for something like this! Beutifully done! Thanks again!

Andréade Ylönen () - 7 years ago - Reply 0

Anyone have multiple sections active at the same time? (despite being nowhere near each other on the page and having other sections in between them)?? How on earth did you fix it?! Thanks...

SJH () - 8 years ago - Reply 0

It's really great! I only have a question. What would I have to do to assign a background image to each section, so that it also works with the dot navigation?

maquir () - 10 years ago - Reply 0

Really unique and creative. Love this! Great work.

BBB Pam Northman () - 10 years ago - Reply 0

thank you! shehbaz1992

Maria del Carmen () - 10 years ago - Reply 0

lovely menu bar. creative and different style.

shehbaz1992 () - 10 years ago - Reply 0