Sidebar Menu with animation

 <section id="root">

      <div id="sidebar" class="sidebar-nav bg-dark text-white">

<ul>

<li><a href="#">List One</a></li>

<li><a href="#">List Two</a></li>

<li><a href="#">List Three</a></li>

<li><a href="#">List Four</a></li>

<li><a href="#">List Five</a></li>

</ul>

</div>

    <div id="page_content" class="page-content">

      <?php  require_once 'home-content.php'; ?>  

    </div>

</section>

<!-- css --> 

#root{

overflow-x: hidden; 

}

.sidebar-nav{

min-width: 300px; max-width: 300px; height: 100%; position: fixed; top: 0;

left: -300px;

transition-property: left;

transition-duration: 1s;

}

.sidebar-active{

left: 0px;

}

#page_content{

margin-left: 0px;

position: relative; transition-property: margin-left;

transition-duration: 1s;

}


<!-- javascript -->


/* call sidebar_setup function with onclick  */

function sidebar_setup(){

if (sidebar.classList.contains('sidebar-active')) {

sidebar.classList.remove('sidebar-active');

page_content.style.marginLeft='0px';

}else {

sidebar.classList.add('sidebar-active');

page_content.style.marginLeft='300px';

}

}

Comments

Post a Comment

Popular posts from this blog

Battery discharging formula

what is the general rules of discharging a battery for example 100ah, so per hourly how much amount of discharging suitable?   The general rule for discharging a battery, such as a 100Ah battery, involves understanding its C-rate. The C-rate is a measure of the rate at which a battery is discharged relative to its maximum capacity. Here's a breakdown of how it works: 1C Rate: Discharging at a 1C rate means the battery will discharge its entire capacity in one hour. For a 100Ah battery, this means discharging at 100A (amperes). 0.5C Rate: Discharging at a 0.5C rate means the battery will discharge its entire capacity in two hours. For a 100Ah battery, this means discharging at 50A. 2C Rate: Discharging at a 2C rate means the battery will discharge its entire capacity in half an hour. For a 100Ah battery, this means discharging at 200A.  Suitable Discharge Rates The suitable discharge rate depends on the battery type and its intended use. For most applications, it's advisable...
Read more

HTML CSS JS Animated Sidebar Menu

HTML < div id = "sidebar_menu" >         hello sidebar menu         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </ div > CSS     /*     * Sidebar_menu     */     @media screen and ( min-width : 768px ) {       #sidebar_menu       {         position : fixed ; width : 350px ; left : 0px ; top : 0px ; z-index : 1000 ;   ...
Read more