How to create menu of overlayed divs?


Tags: jquery,html,css,html5,css3

Problem :

How should I create menu like this?

menu preview

It contains of multiple square divs with different colors. After hovering on one of them the div jumps about 20px to the right (the white square). Active page's square is whole visible at it's original place (not allways on the top), others are almost hidden and only the part of them are visible.

I tried to do it with position: absolute; for every square but I don't know how to move all the divs below the active one after clicking on it. Any other/better ideas?

EDIT: My HTML code:

<nav>
        <div class="nav_container">
            <li class="box1"><a n:href="Homepage:">Active</a></li>
            <li class="box2"><a n:href="Page:one">page1</a></li>
            <li class="box3"><a n:href="Page:two">Page2</a></li>
        </div>
    </nav>

My css code:

nav {
    float: left;
    width: 200px;
}

.nav_container {
    margin: 0px;
    width: 150px;
    height: 300px;
}

nav li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    text-align: center;
}

nav li:hover {
    margin-left: 20px;
    padding: 0;
}

.box1 {
    height: 150px;
    width: 150px;
    background-color:rgba(153, 153, 204, 0.75);
    position: absolute;
}

.box1 a {
    color: #fff;
}

.box2 {
    height: 150px;
    width: 150px;
    top: 350px;
    background-color:rgba(0, 0, 0, 0.75);
    position: absolute;
}

.box2 a {
    color: #fff;
}

.box3 {
    height: 150px;
    width: 150px;
    top: 400px;
    background-color:rgba(255, 255, 255, 0.75);
    position: absolute;
}

.box3 a {
    color: #000;
}


Solution :

I made a basic demo of one way you could do it to get an idea and possibly develop further

it used this css

#nav{
    display:block;
}
#nav .right p{
    position:relative;
    top:115px;
    text-align:right;
    margin-right:5px;
}
#nav .nav1{
    background:blue;
    height:150px;
    width:150px;
    position:absolute;
    top:0px;
    z-index:3;
}
#nav .nav2{
    background:red;
    height:150px;
    width:150px;
    position:absolute;
    top:30px;
    z-index:2
}
#nav .nav3{
    background:yellow;
    height:150px;
    width:150px;
    position:absolute;
    top:60px;
    z-index:1;
}
.right{
    transition:0.5s ease;
}
.right:hover{
    margin-left:80px;
    transition:0.5s ease;
}

here is a JSFIDDLE of it


    CSS Howto..

    How to apply CSS to a Mac Chrome Select Box?

    How do I force nested list items to be the same width as parent list item?

    How to convert shorthand CSS to longhand?

    How to change the width of an HTML upload field with CSS?

    How to give all divs same amount of space on each side

    How to figure out what is going on with this nice CSS horizontal menu? [closed]

    How to make Instagram.js feed responsive in Bootstrap?

    How do we change the color and size of dingbat unicode characters in mobile Safari? (html entities)

    How to display an Image after the main page

    how to obtain proper alignment of tables on top of each other with horizontal scrollbar at bottom

    How are CSS frameworks used?

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    Wordpress Menus are not showing up correctly?

    How to do onclick in CSS to do transition on image?

    CSS : how to center a input inside a div

    how to apply the css style only to child

    list-style-type no showing

    Fonts wont change and id height wont show

    How to move Woocommerce Description tab below review tab

    contenteditable does not show pseudoselector :before in safari

    How to Style CSS Checkboxes with Font Awesome

    how to arrange 2 images side by side in mobile view?

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

    How to centre a javascript element using inline css? [closed]

    How to centralise navigation bar

    jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)

    How can i apply css stylesheet to single specific element?

    How can I use CSS to make a div float over my text whilst remaining in the right spot?

    How to get CSS to select ID that begins with a string (not in Javascript)?

    How to remove a css class and add another when I get a certain mobile resolution