Home Forums Weaver Xtreme Theme Xtreme Plus License Terms and Clients Re: Xtreme Plus License Terms and Clients

#33257
scrambler
Moderator
For the fun of it I tested what it would take to make the Sidebar slide in when clicking a hamburger icon.

The section between the <style> tags is the CSS that moves the sidebar away on desktop by default, and defines the CSS for a my_slidein class that will bring it back when the icon is clicked
Below that is the HTML for the hamburger icon
Below that between the ,script> tags is the script that defined what happens when you click the hamburger icon
The script just adds the my_slidein  class to the content container and the sidebar containers, so that it activates the CSS to move the sidebar in

To see it in action, create a test page in a test site you have
– Set the page sidebar to right sidebar (assuming you have some content in the Sidebar widget areas)
– Switch the content editor to TEXT mode
– Check the page option “Allow Raw HTML and script”.
– Paste the content between the two line below in the Content editor
– Publish the page and preview
Then click the Hamburger icon at the top of the content to move the sidebar in or out  🙂

I have a test build on the test site below (for a short while)
https://www.nicolatrwst.com/testnicola/test-v1/



<style>
@media (min-width:768px) {
#primay-widget-area, #secondary-widget-area {transition:left .2s; left:3000px;display:none;}
#content {transition:width .2s; width:100%;}
.my_slidein#content {width:75%;}
.my_slidein#primary-widget-area, .my_slidein#secondary-widget-area {left:0px;display:block;}
}
</style>

<span style=”font-size:32px;cursor:pointer;” class=”genericon genericon-menu” onclick=”sdbSlide()”></span>

<script type=”text/javascript”>
function sdbSlide(){
//When a button is clicked to activate this function, it will add or remove the my_slidein Class on the Content and sidebar containers
//That in turn will activate the CSS that either slides the sidebar in or out.
 if(jQuery(“#primary-widget-area.my_slidein”).length) {
  jQuery(“#primary-widget-area, #secondary-widget-area, #content”).removeClass(“my_slidein”);
 } else {
  jQuery(“#content”).addClass(“my_slidein”);  
  setTimeout(function(){//add  delay so the content has been reduced before moving the sidebar in
   jQuery(“#primary-widget-area, #secondary-widget-area”).addClass(“my_slidein”);
  },200); 
 };
};
</script>

Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text