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 change iframe pages without the parent page changing with external links using CSS

    CSS: How to make this kind layout?

    How to make a website to occupy the entire element?

    Rails 4: How to style navigation for current page using jQuery

    Linkedin Follow Button not showing properly in Firefox

    How do you vertically align the body tag of an HTML document?

    How do you get the height of a form div + error messages after hitting the submit button in javascript?

    How to get started creating CSS for given (dynamically generated) HTML?

    How can I prevent IE from displaying a website? [closed]

    How to attach a CSS stylesheet to FXML?

    how to position element equally from left and right sides?

    Amazing CSS Div scrolling effect, cant explain, link provided. This is a web design issue, how to get an effect like this?

    How to add a box shadow to a table tr element upon hover? [duplicate]

    How to set style class to another class depends on selector?

    How can my website store strings locally? [closed]

    how to highlight specific control with css [duplicate]

    jQuery .css, how to translate it into Javascript

    how to make cross browser css ellipsis?

    How to align social media icons in one row?

    How to change the text my button displays?

    How do I make these HTML blocks of info stay the same size?

    How does Twitter put labels inside textboxes?

    jquery carousel how to have a gradient on start and ending slides

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    show html element before sending ajax sync request

    how to save the datas which are get from a newsletter? [closed]

    How to separate header from content

    How to apply css to all the divs in hierarchy in HTML?

    Show/Hide (Read More) Text Depending on Number of Character Pure CSS

    How to align 2 content blocks horizontally in css without using s
    If you can change your markup, just one line of CSS is enough to achieve this through flexbox. Wrap both the items inside a parent container. Set display: flex to...
    Read more

    elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery
    Uncaught SyntaxError: Unexpected token . AKA how to check for an Id in jQuery [closed]
    How do I style HTML in a JEditorPane?
    How to place a div right below another div?
    Hide all, show a class with css
    How to set content area div height with dynamic header div
    How to align icon inserted with :before method?
    How to position a background image like wanderfly.com?
    How to center my main navigation bar on my site with css?
    how to tell org-mode to embed my css file on HTML export?
    How to highlight an image after selection using css or jquery? [closed]
    How to create color custom scrollbar in pure css? [closed]
    How to create a header which fills the background with a color throughout the width
    How do i place 4 headers from 1 div next to each other?
    CSS: How to ignore an element so parent's padding will accomodate to other elements?
    Jquery show/hide more data
    How can I fade in a div on hover with jquery on top of image with animated rollover
    HTTPS and how to reference files and images
    How to set the specificity of a css over-ride class for XPages
    How to display a list in horizontal groups of li elements?
    jQuery-Based Dropdown Shows Gap Outside of Firefox
    How to select inner div in an unordered list
    How to show Div after a Specific time of page load?
    How do I edit the VIM Omni Completion so that all CSS properties do not end in a colon?
    How to use a Video as text background in css
    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?