CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mrmason
mrmason

Reputation: 119

Page Slide from right

Ok so I'm trying to build a right hand side page slide effect with two states, on the initial opening of the sliding panel I'd like to display the menu and on selecting the menu item i want to expanded box to open up even bigger and display that info.

Finding it hard to describe exactly what I'm trying to do as i havent seen it before, but pretty much on opening the first div that will be 100% in height 200px in width animated in from the right, when selecting a link within that container i'd like it to expand another div to float to the left of it and expand the box out even more. Does this make sense? any links on where else does this or some javascript to get this to work would be much appreciated... Heres my coding so far:

HTML:

<div id="enquirypost">

<div style="width:200px;">
<a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
<br />
<br />
Menu<br />
<a href="#" style="color:#fff; text-decoration:none;">Close</a>
</div>

<div id="extra">test</div>


</div>

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

CSS:

body{margin:0;}
#enquirypost {
        height:100%;
        overflow:hidden;
        z-index:1000;
        width:0px;
        float:right;
        background:#ccc;
        font-size:20px;
        line-height:65px;
        position:absolute;
        top:0px;
        right:0px;
        color:#FFF;
        text-align:center;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;}
#enquirypost:target 
{
    bottom:0px;
    overflow:auto;
    min-width:200px; 
    height: 100%;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}

#extra {
        height:100%;
        overflow:hidden;
        z-index:1000;
        width:0px;
        float:right;
        background:#000;
        font-size:20px;
        line-height:65px;
        position:absolute;
        top:0px;
        right:0px;
        color:#FFF;
        text-align:center;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;}
#extra:target 
{
    bottom:0px;
    overflow:auto;
    min-width:400px; 
    height: 100%;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}

And heres the jsfiddle

Upvotes: 0

Views: 1531

Answers (3)

Entity Black
Entity Black

Reputation: 3491

I think that I have solution that you were looking for:

http://jsfiddle.net/wFutQ/17/

Tricky part is that you put div which is "submenu" before div which is "menu". Then you can use css selector .submenu:target + .menu { which can keep menu opened while submenu is targeted.

You can also do more deeper subsubmenu while keeping submenu and menu opened with .subsubmenu:target + .submenu and .subsubmenu:target + .submenu + .menu selectors

my html code (sorry but I added a few classes and some of them are not used now):

<div>

    <div id="extra" class="menuPart submenu">
            <div class="content">test</div>
    </div>

    <div id="enquirypost" class="menuPart menu">
        <div class="content">
            <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
            <br />
            <br />
            Menu<br />
            <a href="#" style="color:#fff; text-decoration:none;">Close</a>
        </div>
    </div>

</div>

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

my css code:

body {
    margin:0;
}

.menuPart {
    height: 100%;
    width: 0px;
    font-size:20px;
    line-height:65px;
    position:absolute;
    color: #FFF;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.menu:target {
    overflow: auto;
    min-width: 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.submenu:target + .menu {
    overflow: auto;
    min-width: 200px;
}

.submenu:target {
    overflow: auto;
    min-width: 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    padding-right: 200px;
}

#enquirypost {
    background: #CCC;
    right: 0px;
}

#extra {
    background: #000;
    right: 0px;
}

Upvotes: 0

David Allen
David Allen

Reputation: 1163

More the #Extra outside the #enquirypost.

http://jsfiddle.net/davidja/wFutQ/15/

    <div id="enquirypost">

    <div style="width:200px;">
    <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
    <br />
    <br />
    Menu<br />
    <a href="#" style="color:#fff; text-decoration:none;">Close</a>
    </div>




    </div>

    <a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

    <div id="extra">test</div>

Upvotes: 1

Dunno
Dunno

Reputation: 3684

See what happens when you put the #extra div outside the #enquirypost div. I'm not sure if this is what you're looking for but it definitely looked better when I tried this in your jsFiddle.

Also: when you use position: absolute, the float attribute is useless, I'd delete it to clean up the code a bit. And you might want to include "-o-transition" and just "transition" to make sure your page displays correctly on every browser.

Upvotes: 1

Related Questions