Monitor Reply

Support

Move "main" content right for side menu

Permalink Browser Info Environment April 01, 2016 at 9:19 AM

Trying to make a side navigation menu, and am basing the code off what I found here:http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav...

I placed the above code for the side menu in the global "Sitewide Site Name" block and the menu behaves fine. However, when I can't get the "main" content (slides, header, footer, etc) to slide to the right.

So far I have following working (it only moves words not images, or header):
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ Site Menu</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.marginLeft = "250px";
}
</script>

I tried to adding lines such as:
document.lss-slide.background.marginLeft = "250px" or
.lss-slide.content.marginLeft = "250px" or
c5wrapper.marginLeft = "250px"
Without any success

Any input would be helpful. I apologize if this is a basic quesiton, I'm still learning CSS/Javascript etc.

Thanks,
Chris

Type:	Pre-Sale
Status:	In Progress

jordif replied on Apr 1, 2016 at 12:57 pm Permalink Reply

Hi Chris,

Generally, for this type of menu, you would change the CSS3 transform property:

transform: translate(250px, 0)

For instance, you could add a CSS class ("move-left") to the content when the sidebar is visible:

#c5wrapper {
    transition: 0.5s;
}
#c5wrapper.move-left {
    transform: translate(250px, 0);
    margin-right: 250px; /* optional: this should prevent the horizontal scrollbar from appearing */
}

This is how the concrete5 dashboard works (to make sidebar menus slide in, the transform property is changed).

Here is an experiment I made for the 5.6 version of the theme with this type of menu:

http://longstoryshortparallax.15robots.com/offcanvas...

You can use the browser inspect tool to see wha'ts happening.

Let me know if you have any further questions (and feel free to post a link to your website if you want me to have a look)

Regards,

Jordi

concrete671 replied on Apr 1, 2016 at 10:05 pm Permalink Reply

Hi Jordi,

Wow - thanks for such a fast response.

Quick follow-up question: Where would I put the classes you describe? I could not tell by looking at the inspect tool (still new at this). Should they go in the Custom CSS section?
When I place your c5wrapper classes in the “style” section of my sidebar menu I do not see the transition. When I put the classes in the javascript section, the menu link (in site name block) becomes unresponsive to mouse clicks.

If you have time, an incomplete version of my website is available at:
http://christopherrhodes.org/

Otherwise, I’ll keep experimenting with it.

Thanks for such a great theme!
Chris

jordif replied on Apr 2, 2016 at 5:59 am Permalink Reply

Hi Chris,

I see you have added an HTML block to the Site Name area, so you could add the classes using that block.

You need to add the CSS definitions in the <style> section and also some javascript code to add and remove the classes in the <script> section.

The final code of the HTML block should look like this:

<style>
body {
    font-family: "Lato", sans-serif;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;

Viewing 15 lines of 145 lines. View entire code block.

 
<style>
body {
    font-family: "Lato", sans-serif;
}
 
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
 
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}
 
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
 
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}
 
#body {
    transition: margin-left .5s;
    padding: 16px;
}
 
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
 
button.accordion {
    background-color: #111;
    color: #818181;
    cursor: pointer;
    padding: 8px 8px 8px 32px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 25px;
    transition: 0.4s;
}
 
button.accordion.active, button.accordion:hover {
    background-color: #262626;
    color: #f1f1f1;
}
 
button.accordion:after {
    content: '\02795';
    font-size: 15px;
    color: #818181;
    float: right;
    margin-left: 5px;
}
 
button.accordion.active:after {
    content: "\2796";
}
 
div.panel {
    padding: 0 18px;
    background-color: #111;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}
 
div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
 
div.panel a {
    font-size: 20px;
}
#c5wrapper {
    transition: 0.5s;
}
#c5wrapper.move-left {
    transform: translate(250px, 0);
    /*margin-right: 250px;*/
}
</style>
 
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="/" onclick="closeNav()">Home</a> 
 
 <button class="accordion" >Research</button>
  <div class="panel">
    <a href="/index.php/research/publications" onclick="closeNav()">Publications</a>
    <a href="#" onclick="closeNav()">CV</a>
    <a href="https://github.com/ctrhodes" onclick="closeNav()">Github</a>
  </div>
 
 <button class="accordion" onclick="toggleAcc()">Pictures</button>
  <div class="panel">
    <a href="/index.php/gallery/fiance" onclick="closeNav()">Fiance</a>     
    <a href="/index.php/gallery/cota" onclick="closeNav()">COTA</a> 
    <a href="/index.php/gallery/travel" onclick="closeNav()">Travel</a>     
    <a href="/index.php/gallery/tx-ecology" onclick="closeNav()">TX Ecology</a> 
    <a href="/index.php/gallery/outdoors" onclick="closeNav()">Dogs</a> 
    <a href="/index.php/gallery/misc" onclick="closeNav()">Misc</a> 
  </div>
 
  <a href="/index.php/blog" onclick="closeNav()">Blog</a>   
  <a href="/#slide8" onclick="closeNav()">Use R</a>
  <a href="/#slide10" onclick="closeNav()">Contact</a>
 
 
</div>
 
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ Site Menu</span>
 
<script>
$(function() {
    $('#mySidenav').insertBefore( $("#c5wrapper") );
});
 
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    $("#c5wrapper").addClass("move-left");
}
 
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    $("#c5wrapper").removeClass("move-left");
}
 
function openAcc() {
var acc = document.getElementsByClassName("accordion");
var i;
 
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
  }
}
 
var acc = document.getElementsByClassName("accordion");
var i;
 
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
  }
 
 
</script>

Hope this helps,

Jordi

concrete671 replied on Apr 2, 2016 at 11:03 am Permalink Reply

Now I understand!

It works great - thanks

Long Story Short

Support

Move "main" content right for side menu

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post