Need some help, regarding an active state in floating menu

1 Views

This is my 1st post here and i’m quite new to development but i’ll give it a try a

Im working on my portfolio website, and it will be a long page so i wanted to add bullets / dots on the side, so you can navigate trough the projects quite easily and also see where you are. For example, scroll down this site (http://discover.store.sony.com/be-moved/) and see the bullets / dots on the right..

Read More

This is what I have atm: http://thinkagain.nu/?page_id=2501

I tried to achieve somewhat of the same thing, I managed to create a floating menu and add some type of button (styles like a bullet / dot) with a mouseover style. Now it works perfectly when you click and all, but it doesn’t go into active state.

So when on the first project the first bullet / dot should be white, 2nd projects makes the 2nd bullet go white and so on you get the picture…

This are the following codes used:

CSS 

#floatnav {
  position: fixed;
  right: -50px;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

.bullit {
    background-color:#242424;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    border-radius:17px;
    border:0px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    padding:5px 5px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    box-shadow: inset 1px 4px 9px -6px;
    box-shadow: 2px 2px 1px #888888; 
}
.bullit:hover {
    background-color:#ebebeb;
    box-shadow: inset 1px 4px 9px -6px;
}
.bullit:active {
    position:relative;
    top:1px;
}

HTML 

<ul id="floatnav">
<a href="#cinerama" class="bullit"></a>
<a href="#magicalgems" class="bullit"></a>
<a href="#deltalloyd" class="bullit"></a>
<a href="#ezchef" class="bullit"></a>
</ul>

If anyone could help me out or point me out in the right direction it would be greatly appreciated!

Thanks in advance

EDIT:

Thanks man! Almost there… I also want the dots / bullets to become active when you scroll down each content section. Is this possible?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. With Jquery you can addClass() at click on the bullets, try this:

    $('#floatnav a').click(function() {
    $('#floatnav a').removeClass('active'); /*Remove previous*/
    $(this).addClass('active');             /*Active clicked*/
})

    And the class in CSS:

    .bullit.active {
  position:relative;
  top:1px;
  background:orange;
}

    Check this Demo Fiddle

  2. Rest of your code is fyn just add this jquery code in ur js file (use jquery lib also before using the code)

    $('#floatnav a').on('click',function() {
$('#floatnav a').removeClass('active');
$(this).addClass('active');
})

    & one line line of css: 

     .active {    background:red;    }

    here is the live ex : http://jsfiddle.net/3eBJ8/