I'd like to add some dynamic menu functionality to my <ul> menu.

Question

Here's the JSFiddle http://jsfiddle.net/7mzH2/ It's an easy version of what I have right now.

I have two problems which I can't seem to figure out.
The first problem: I want the dot to stay filled when it's on the active page.
Second problem: I want a label to appear on the right of the menu when you hover the dots.

I've tried several ways and in other designs I never had this problem, so I don't understand what I should do. Hope someone can help me out.

This is the HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>   <a href="#first" class="smoothScroll">Home</a>
<a href="#second" class="smoothScroll">De mogelijkheden</a>
<a href="#third" class="smoothScroll">Restauratie</a>
<a href="#fourth" class="smoothScroll">Het Proces</a>
<a href="#fifth" class="smoothScroll">Werkplaats</a>
<a href="#six" class="smoothScroll">Ambacht en Handwerk</a>
<a href="#seven" class="smoothScroll">Mogelijkheden</a>
<a href="#eight" class="smoothScroll">Contact</a>

    </nav>
</div>
<ul class="content">
    <li class="first" id="first">
    <div id="pagina01"></div>
    <li class="second" id="second">
        <div id="pagina02"></div>
    </li>
    <li class="third" id="third">
        <div id="pagina03"></div>
    </li>
    <li class="fourth" id="fourth">
        <div id="wrapper04">
            <div id="first04"></div>
            <div id="second04"></div>
        </div>
    </li>
    <li class="fifth" id="fifth">
        <div id="pagina05"></div>
    </li>
    <li class="six" id="six">
        <div id="pagina06"></div>
    </li>
    <li class="seven" id="seven">
        <div id="pagina07"></div>
    </li>
    <li class="eight" id="eight">
        <div id="pagina08"></div>
    </li>
</ul>

This is the CSS

body {
background: white;
min-width: 300px;
height: 100%;
font:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:100;
}
ul.options {
margin-top: 0px;
width: 100%;
}
ul.options li {
display: inline-block;
margin-bottom: 20px;
}
ul.options li h4 {
color: rgba(0, 0, 0, 0.8);
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
}
ul.btn-group {
color: #000;
margin: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
ul.btn-group li {
background: #7958b8;
border-bottom: 1px solid #563f83;
border-left: 1px solid #563f83;
border-top: 1px solid #563f83;
cursor: pointer;
display: inline-block;
float: left;
margin: 0;
padding: 7px;
}
ul.btn-group li:hover, ul.btn-group li.active {
background: rgb(150, 110, 226);
}
ul.btn-group li:first-child {
border-radius: 2px 0 0 2px;
padding-left: 7px;
}
ul.btn-group li:last-child {
border-radius: 0 2px 2px 0;
border-right: 1px solid #563f83;
padding-right: 7px;
}
ul.content {
margin-top: 0px;
width: 100%;
}
ul.content li {
display: block;
height: 100%;
width: 100%;
}
ul.content li h1 {
color: #000;
padding-top: 20px;
}
.scroller {
background: #CCC;
box-shadow: inset 0 0 5px 0 black;
height: 1px;
overflow: hidden;
}
.scroller h3 {
color: rgba(0, 0, 0, 0.3);
font-size: 30px;
margin-top: 20px;
text-align: center;
}
ul.content li.first {
background: url('../inhouds/images/page01.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.second {
background: url('../inhouds/images/page02.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.third {
background: url('../inhouds/images/page03.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fourth {
background: url('../inhouds/images/page04.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fifth {
background: url('../inhouds/images/page05.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.six {
background: url('../inhouds/images/page06.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.seven {
background: url('../inhouds/images/page07.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.eight {
background: url('../inhouds/images/page08.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid transparant;
background:#666;
}
#pagina01 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8ffff;
}
#pagina02 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beff;
}
#pagina03 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beb0;
}
#pagina04 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6abeb0;
}
#pagina05 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: white;
}
#pagina06 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6a6d6d;
}
#pagina07 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d6d;
}
#pagina08 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d39;
}

Sorry for the long code's but I though maybe this will make it easier to help.

Answer 1

For the labels you can use CSS3 pseudo-elements to create a custom tooltip, and HTML5's data- tag to get the content (text) of the tooltip.

Pseudo-elements are :after and :before

To create a label or tooltip, try to add this to your CSS code:

nav a:hover:before {
   pointer-events: none;
   content: attr(data-name);
   position: absolute;
   display: block;
   width: 30px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   color: #FFF;
   background: #000;
   top: -4px;
   right: -40px;
}

..and in your HTML add this to your links: data-name="your text here".

(You can call the data attribute whatever you want. It just has to start with data-).

---

To make the dots stay filled, you can use jQuery.

When you click on the nav a it adds an .active-class to the <a> which make the dot stay filled. But first we have to make sure that all the other dots gets inactive. Else we suddenly would have every dots active. To do that we first remove the .active-class on all dots. Then we add an .active-class, on that <a> we have clicked on:

$(document).ready(function() {

   $('nav a').click(function() {
      $('nav a').removeClass('active');
      $(this).addClass('active');
   });

});

Then we change the .cbp-fbscroller > nav a:hover in your css to .cbp-fbscroller > nav a:hover, nav a.active. Now the active dot, has the same style like when we hover it.

You can test it all, in this Fiddle: http://jsfiddle.net/7mzH2/3/

P.S: I think it's better to move the tooltip/label to the left instead of to the right. Right now, you can't add much text, because of the space.

Hope this helped.