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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...