pure css sidebar dropdown (no bootstrap)-CodePudding

I am trying to write a sidebar with expandable dropdown options and some smooth animations using pure css/js/html/jquery (no bootstrap). I've written a sidebar like this before using bootstrap, see this example: https://bootstrap-menu.com/demos/sidebar-nav-accordion.html

But now I'm trying to achieve the same end result using only pure css as a challenge, and to eliminate my reliance on bootstrap.

I've been working with this example so far but haven't gotten an expand/collapse accordion working yet:

var isSidebarOpen = false;

function sideNavClicked(){
    console.log('sideNavClicked()')
    isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
console.log('openNav')
    isSidebarOpen=true;
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
console.log('closeNav')
    isSidebarOpen=false;
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  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;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="mySidebar" >
  <a href="javascript:void(0)"  onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Expand This ▼</a>
    <ul>
      <li><a href="#">Coffee</a></li>
      <li><a href="#">Coverage</a></li>
    </ul>
  
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <button  onclick="sideNavClicked()">☰</button>  
  <h2>Collapsed Sidebar</h2>
  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>


</body>
</html>

Was wondering what small scale example I could incorporate into this code? Hosted on jsfiddle as well: https://jsfiddle.net/martinradio/7wey2ujt/7/

CodePudding user response：

With your animation, try:

#animatedObj{
    filter: opacity: 0; /* or something else because there will be a gap */
    -webkit-transition: filter 200ms linear;
}
.show{
    filter: opacity: 1;
    -webkit-transition: filter 200ms linear;

and then in your JS/Jquery

$('#animatedObj').click(function(){
    $('#animatedObj').toggleClass('show')
    if($('#animatedObj').hasClass('show')){
        $('#animatedObj').append("<list thing>")
    }else{
        $('#animatedObj').remove("<list thing>")
    }
})

Keep in mind that you may want a different css effect to be there instead.

CodePudding user response：

For your challenge, try this only css no javascript:

        body {
            font-family: "Lato", sans-serif;
        }

        .MenuSide {
            width: 250px;
            height: 100%;
            top: 0;
            left: 0;
        }

        .MenuSide:focus-within #mySidebar {
            width: 250px;
        }
        .MenuSide:focus-within .openbtn{
            margin-left: 250px;
            pointer-events: none;
        }

        #mySidebar {
            float: left;
        }

        .sidebar {
            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;
        }

        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        .sidebar a:hover {
            color: #f1f1f1;
        }

        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
            transition: 0.5s;
        }

        .openbtn {
            font-size: 20px;
            cursor: pointer;
            background-color: #111;
            color: white;
            padding: 10px 15px;
            border: none;
            transition: 0.5s;
        }

        .openbtn:hover {
            background-color: #444;
        }

        #main {
            transition: margin-left .5s;
            padding: 16px;
        }


        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }

            .sidebar a {
                font-size: 18px;
            }
        }

    <div >
        <div id="mySidebar" >
            <!-- <a href="javascript:void(0)"  onclick="closeNav()">×</a> -->
            <a href="#">About</a>
            <a href="#">Expand This ▼</a>
            <ul>
                <li><a href="#">Coffee</a></li>
                <li><a href="#">Coverage</a></li>
            </ul>

            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
        <button >☰</button>
    </div>

CodePudding user response：

Perhaps this is what you are looking for I added a few lines into your javascript code and also added a few classes in html including ul tag and a tag using which the submenu is collapsed. I have have added comments in the code that I added to let you know what was modified...

Take a look at the snippet

Please accept the answer if it helps you

var isSidebarOpen = false;

function sideNavClicked() {
  console.log("sideNavClicked()");
  isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
  console.log("openNav");
  isSidebarOpen = true;
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  console.log("closeNav");
  isSidebarOpen = false;
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

////------------Added Line of Code----------------
const list = document.querySelector(".toggle--list");
// const submenu
document.querySelector(".submenu").classList.add("hidden");
list.addEventListener("click", e => {
  document.querySelector(".submenu").classList.toggle("hidden");
});
///////////////////

body {
    font-family: "Lato", sans-serif;
  }
  
  .sidebar {
    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;
  }
  
  .sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: #f1f1f1;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  
  #main {
    transition: margin-left .5s;
    padding: 16px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }

/*-----------added line of code----------------*/
.hidden{
    display:none;
    visibility: hidden;
}
/*---------------------------------------------*/

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="mySidebar" >
      <a href="javascript:void(0)"  onclick="closeNav()">×</a>
      <a href="#">About</a>
      <a href="#" >Expand This ▼</a>
      <!--Added classname here-->
      <ul >
        <!--Added classname here-->
        <li><a href="#">Coffee</a></li>
        <li><a href="#">Coverage</a></li>
      </ul>

      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>

    <div id="main">
      <button  onclick="sideNavClicked()">☰</button>
      <h2>Collapsed Sidebar</h2>
      <p>
        Click on the hamburger menu/bar icon to open the sidebar, and push this
        content to the right.
      </p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CodePudding user response：

You can try my solution here, hope it can solve your problem. I added some animations.

var isSidebarOpen = false;

function sideNavClicked() {
  isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
  isSidebarOpen = true;
  document.getElementById('mySidebar').classList.add('sidebar-show');
  document.getElementById('main').classList.add('main-show');
}

function closeNav() {
  isSidebarOpen = false;
  document.getElementById('mySidebar').classList.remove('sidebar-show');
  document.getElementById('main').classList.remove('main-show');
}

function toggleMenuItem(element){
    document.getElementById(element.dataset.ulid).classList.toggle("ul-show");
}

html,
body {
  font-family: "Lato", sans-serif;
  height: 100%;
  margin: 0;
}

.super-animation{
  -webkit-transition: -webkit-transform 300ms ease;
  -webkit-transition-duration: 300ms;
  -moz-transition: -moz-transform 300ms ease;
  transition: transform 300ms ease;
}

.main-content{
  margin: 0;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

.sidebar {
  height: 100%;
  max-height: calc(100% - 15px);
  width: 250px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  
  right: 0;
  -webkit-transform: translate3d(calc(-100%), 0, 0);
  -moz-transform: translate3d(calc(-100%), 0, 0);
  transform: translate3d(calc(-100%), 0, 0);
}

.sidebar.sidebar-show{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  padding: 16px;
}

#main.main-show{
  -webkit-transform: translate3d(250px, 0, 0);
  -moz-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}

.main-content .sidebar ul{
  margin: 0;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 200ms ease-out;
}

.main-content .sidebar ul.ul-show{
  transition: max-height 200ms ease-in;
  max-height: 400px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div >
  <div id="mySidebar" >
    <a href="javascript:void(0)"  onclick="closeNav()">×</a>
    <a href="#">About</a>
    <a data-ulid="expand_this" onclick="toggleMenuItem(this);" href="#">Expand This ▼</a>
      <ul id="expand_this">
        <li><a href="#">Coffee</a></li>
        <li><a href="#">Coverage</a></li>
      </ul>

    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

  <div id="main" >
    <button  onclick="sideNavClicked()">☰</button>  
    <h2>Collapsed Sidebar</h2>
    <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
  </div>
</div>

</body>
</html>