"Dot Navigation with tooltips"
Bootstrap 3.1.0 Snippet by maridlcrmn

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="//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>
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: #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;
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
$(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');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 () - 8 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 () - 9 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