Jump to content
Sign in to follow this  
BrainPill

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

Recommended Posts

 


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;}
          }

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×