Databases
StackOverflow2013
Postsdbo
POMaking a link slide and open a new div to it's right
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking a link slide and open a new div to it's right
    text
    copied!<p>I need some help/guidance on how to accomplish this, what I am trying to do is make a div slide out to the right from the left side once an individual link is clicked. But so far, I'm struggling with it, so my question would be how to do this?</p> <p>This is what I have so far.</p> <p>CSS:</p> <pre><code>.main-header { width: 1020px; height: 50px; background: #555; border: 2px solid #444; border-top: none; -moz-border-radius: 0 0 25px 25px; -webkit-border-radius: 0 0 25px 25px; border-radius: 0 0 25px 25px; -moz-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000; -webkit-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000; box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000; position: fixed; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; top: 0; } .main-header h1 { width: 1020px; float: left; text-align: center; } .toggle-menu { width: 44px; height: 44px; padding: 6px 0 0 12px; margin: 0; border-right: 2px solid #444; position: absolute; top: 0; color: #FFF; font-size: 26px; text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9); cursor: pointer; } .page-wrap { float: left; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .main-nav-check { display: none; } .main-nav { width: 0; position: fixed; top: 100px; overflow: hidden; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .main-nav .default_logo { width: 150px; height: 120px; padding: 0; margin: 0 0 0 15px; background: url(../images/Profiles/default_logo1.png) no-repeat 0 0; border: 2px solid #444; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000; -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000; box-shadow: inset 0 -0.3em 0.9em 0.3em #000; float: left; } .main-nav a { padding: 5px 15px; margin: 0 0 0 169px; border-bottom: 1px solid #444; display: block; position: relative; top: 12px; color: #15ADFF; font: 18px Arial, Helvetica, sans-serif; font-weight: bold; font-variant: small-caps; text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9); } .main-nav a:hover, .main-nav a:focus { background: rgba(204, 204, 204, 0.2); border-right: 7px solid #15ADFF; color: #111; } #main-nav-check:checked + #main-nav { width: 350px; } .close-menu { display: none; } #main-nav-check:checked ~ .page-wrap .open-menu { display: none; } #main-nav-check:checked ~ .page-wrap .close-menu { display: block; } </code></pre> <p>HTML:</p> <pre><code>&lt;input type="checkbox" class="main-nav-check" id="main-nav-check" /&gt; &lt;nav class="main-nav" id="main-nav"&gt; &lt;div class="default_logo"&gt;&lt;/div&gt; &lt;a href="#"&gt;Profile Settings&lt;/a&gt; &lt;a href="#"&gt;Recent Updates&lt;/a&gt; &lt;a href="#logoff"&gt;Sign Out&lt;/a&gt; &lt;/nav&gt; &lt;div class="page-wrap"&gt; &lt;header class="main-header"&gt; &lt;label for="main-nav-check"&gt; &lt;div class="toggle-menu" title="Options"&gt;☰&lt;/div&gt; &lt;/label&gt; &lt;/header&gt; &lt;/div&gt; </code></pre> <p>I'm trying to make it where if I click on a link on the left side, let's say 'Profile Settings', a new div opens and slides out to the right. I would need this for each individual link displaying content in the right div once a link has been clicked from the left side, but I am struggling with it. If anyone could provide a jsfiddle, I'd greatly appreciate it and/or respond back with additional code to make this work, again I'd be very thankful.</p> <p>Here's a jsfiddle of what I have so far: <a href="http://jsfiddle.net/xP9wy" rel="nofollow">http://jsfiddle.net/xP9wy</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload