html/css settings to keep dropdown menu open. How?

BrainPill · May 28, 2018

Hello,

I have the following issue with this dropdown menu.
The menu is a side panel. Clicking on the option shows the desired page but,
the problem is that the options in the submenus (level 2 and 3) jump away / dissappear
one way or another.
What I want to see as a result is: if is clicked on a submenu then the submenu is still visible.

Is there someone who can give a solution about how to solve this.

HTML PART:

          <?php 
           if (!isset($_GET['menuquery'])){
           $_GET['menuquery']='';
           }
           ?>
          <html>

          <head>
                  <meta charset="utf-8" />
                  <title>menu</title>
                  <link rel="prefetch" href="http://">

              <link rel="stylesheet" type="text/css" href="http://localhost/Begin/CSS/sidepanel/sidepanel-frm.css" media="screen" />





                  <title>Control Panel </title>

                  </head>

          <body style="color: white;">

          <div class="sidepanel_wrap">
          <div class="pan_left">
           <div style="height: 50px;">

           <?php echo $_SERVER['HTTP_HOST']; ?>

           </div>
           <div class="sidenav">

            <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=home">Home</a>



             <button class="dropdown-btn">Level-1a
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-container">
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2a">Level-2a</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2b">Level-2b</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2c">Level-2c</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2d">Level-2d</a>
            </div>


             <button class="dropdown-btn">Level-1b
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-container">
               <button class="dropdown-btn">Level-2b
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-containerl3">
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3a">level-3a</a>
              <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3b">Level-3b</a>

            </div>

            </div>



          </div>
          </div>



          <div style="color: black;">
          <?php 

          var_dump($_GET['menuquery']);
          if (!isset($_GET['menuquery'])){


                  echo 'welcome';

              }

              if (isset($_GET['menuquery'])){

                  if (($_GET['menuquery']) == 'home' ){ 

                      echo '<br>you clicked home !';
                  }


                  if (($_GET['menuquery']) == 'level2a' ){ 

                      echo '<br>you clicked level2a !';
                  } 
                  if (($_GET['menuquery']) == 'level2b' ){ 

                      echo '<br>you clicked level2b !';
                  } 

                  if (($_GET['menuquery']) == 'level2c' ){ 

                      echo '<br>you clicked level2c !';
                  } 

                  if (($_GET['menuquery']) == 'level2d' ){ 

                      echo '<br>you clicked level2d !';
                  } 


              }



          ?>
          </div> 
           </div>

                  <script>
          /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
          var dropdown = document.getElementsByClassName("dropdown-btn");
          var i;

          for (i = 0; i < dropdown.length; i++) {
            dropdown[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var dropdownContent = this.nextElementSibling;
              if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
              } else {
                dropdownContent.style.display = "block";
              }
            });
          }
          </script>

          </body>

          </html>

CSS PART:

          body{background-color:#F3E5AB;}

          .sidepanel_wrap {

              width: 1880px;
              height: 860px;
              /*border: solid blue 2px;*/
              display: flex;
              flex-direction: row;


          }

          .pan_left {
              display: inline-block;
              width: 235px;
              height: 860px;
              background-color: #67591F;
               color: #F3E5AB;

          }

          .main_panel_wrap {

              width: 1640px;
              height: 860px;
              background-color:#F3E5AB;

          }










          /* Fixed sidenav, full height */
          .sidenav {
              width: 235px;
              height: 700px;
              position: relative;
              z-index: 1;
              top: 10;
              left:  0;
             background-color: #67591F;
              overflow-x: hidden;
              padding-top: 20px;
          }

          /* Style the sidenav links and the dropdown button */
          .sidenav a, .dropdown-btn {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans,serif;

              font-size: 14px;

              color: #93FFE8;
              display: block;
              border: none;
              background: none;
              width: 100%;
              text-align: left;
              cursor: pointer;
              outline: none;
          }





          /* On mouse-over */
          .sidenav a:hover, .dropdown-btn:hover {
              color: #f1f1f1;

          }




          /* Add an active class to the active dropdown button */
          .active {
              background-color: #4863A0;
              color: white;
               width:100%;
          }

          /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
          .dropdown-container {

              display: none;

              background-color: #2B547E;
              padding-left: 0px;
              color: yellow;

          }

           .dropdown-containerl3 {
              display: none;
              background-color: #566D7E;
              padding-left: 0px;

          }




          /* Optional: Style the caret down icon */
          .fa-caret-down {
              float: right;
              padding-right: 20px;
              color: #93FFE8;

          }



          /* Some media queries for responsiveness */
          @media screen and (max-height: 450px) {
              .sidenav {padding-top: 15px;}
              .sidenav a {font-size: 18px;}
          }

Sign In

html/css settings to keep dropdown menu open. How?

Recommended Posts

BrainPill

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity