Pure html and Css onclick Dropdown menu

Question

I am trying to create an onclick dropdown menu that will appear on on a mobile device and dissappear when the screen is wider (appear on another section), however, the @media query allowed me to do that but the links in the menus are not clickable.

I have tried to play around with z-index with no success and also other ideas from the internet but I haven't succeded. Please let me know what is wrong.

The dropdowns I am referring to are "select a category" and "item-list" on the code below.

I used the snippet from this source to code my dropdown: https://lage.us/CSS-Onclick-Dropdown-Menu.html

I tried my best to trim the code below.

 .grid-container {
   background: #E2E5AA;
   display: border-box;
   padding: 0px;
   margin: 0px;
   background-size: cover;
 }

  .header {
   grid-area: header;
 }

  #navigation {   grid-area: navigation;}
  #services {grid-area: services;}
 .drop-down {grid-area: dropdown;}
  #introduction {grid-area: description;}
#client-terminal {grid-area: client; }


 @media screen and (min-width: 250px) {
   .grid-container {
     width: 100%;
     height: 100%;
     display: grid;
     grid-template-areas: 'header header header client'
       'navigation navigation navigation dropdown'
       'description description description description'
       'services services services services';
   }

   .my-dropdown {
     color: #E2E5AA;
     position: relative;
     padding: 4px;
     background: #790D76;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     float: right;
     z-index: 1;
   }

   .my-dropdown:before {
     content: "Price-List";
     color: #E2E5AA;
     position: relative;
     padding: 4px;
     background: #790D76;
     border: none;
     cursor: ;
     font-size: 15px;
     font-weight: normal;
     float: right;
     z-index: 1;
   }

   .my-dropdown:focus {
     pointer-events: none;
   }

   .my-dropdown:focus .dropdown-content {
     opacity: 1;
     visibility: visible;
   }

   .my-dropdown:hover {
     background-color: #8F228C
   }

   .drop-down {
     position: relative;
     display: inline-block;
     background-color: #790D76;
   }

   .dropdown-content {
     visibility: hidden;
     position: absolute;
     background-color: #E2E5AA;
     min-width: ;
 2;
     overflow: hidden;
     pointer-events: auto;
   }

   .dropdown-content a {
     color: black;
     padding: 4px;
     text-decoration: none;
     display: block;
     font-size: 15px;
     z-index:3;
   }

   /* style option on hover*/

   .dropdown-content a:hover {
     background-color: #8F228C;
   }

  #navigation {
     background-color: #790D76;
   }
  
   #client-terminal {
     background-color: #290C28;
   }

  
   .dropdown-2-button:before {
     content: "Select A Category";
     color: #E2E5AA;
     padding: 4px;
     background: #E2E5AA;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     float: left;
     margin: 0px 0px 15px 0px;
     background-color: #790D76;
   }

   .dropdown-2-button:focus {
     pointer-events: none;
   }

   .dropdown-2-button:focus .dropdown-2 {
     opacity: 1;
     visibility: visible;
   }

   #services {
     position: relative;
     display: inline-block;
     background-color: transparent;
     margin: 0px;
   }

   .dropdown-2 {
     list-style-type: none;
     padding: 0;
     margin: 0;
     position: absolute;
     background-color: #E2E5AA;
     min-width: relative;
     z-index: 1;
     overflow: hidden;
     pointer-events: auto;
     visibility: hidden;
     border-radius: 3px;
   }

   .dropdown-2 a {
     color: black;
     padding: 4px;
     text-decoration: none;
     display: block;
     font-size: 15px;
   }

   .dropdown-2 a:hover {
     background-color: #790D76;
   }
  
   #introduction {
     display: block;
   }

   #introduction sub-heading {
     display: block;
     font-size: 20px;
     padding: 10px;
     text-align: center;
     font-weight: bold;
   }

   #introduction p {
     text-align: center;
     font-size: 15px;
   }

   #introduction a {
     text-decoration: none;
     color: purple;
     display: inline-block;
   }

   #introduction a:hover {
     background-color: #8F228C;
     color: #E2E5AA
   }
   
   .c-drpbtn p,
   .a_b-drpbtn p,
   .cr-drpbtn p,
   .m_m-drpbtn p,
   .sheq-drpbtn p {
     display: none;
   }

 }


 @media screen and (min-width: 640px) {
   .grid-container {
     width: 100%;
     height: 100%;
     padding: 0px;
     margin: 0px;
     display: grid;
     grid-template-areas: 'header header header header'
       'navigation navigation navigation client'
       'dropdown dropdown description description'
       'dropdown dropdown services services'
       'footer footer footer footer';
   }


   #introduction {
     padding: 20px;
     font-size: 130%;
     font-weight: bold
   }

   #introduction p {
     font-size: 110%
   }


 .c-drpbtn p,
   .a_b-drpbtn p,
   .cr-drpbtn p,
   .m_m-drpbtn p,
   .sheq-drpbtn p {
     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     opacity: 0.6;
     border: none;
     cursor: pointer;
     font-weight: normal;
     z-index: 1;
     display: none;
     margin: 4px;
   }
   
   .c-drpbtn:focus,
   .a_b-drpbtn:focus,
   .cr-drpbtn:focus,
   .m_m-drpbtn:focus,
   .sheq-drpbtn:focus {
 pointer-events: none;
   }
   
    .c-drpbtn:focus p,
   .a_b-drpbtn:focus p,
   .cr-drpbtn:focus p,
   .m_m-drpbtn:focus p,
   .sheq-drpbtn:focus p {
     opacity: 1;
     display: block;
   }
   
    .c-drpbtn:hover,
   .a_b-drpbtn:hover,
   .cr-drpbtn:hover,
   .m_m-drpbtn:hover,
   .sheq-drpbtn:hover {
     background-color: #8F228C;
   }
   
   .c-drpbtn:before,
   .a_b-drpbtn:before,
   .cr-drpbtn:before,
   .m_m-drpbtn:before,
   .sheq-drpbtn:before {
     color: black;
     display: block;
     padding: 20px;
     background: transparent;
     opacity: 1;
     border: none;
     cursor: pointer;
     font-weight: bold;
     text-align: center;
     margin: auto;
     z-index: 1;
   }

   .a_b-drpbtn:before {
     content: "\2193  Item 1";
   }

   .c-drpbtn:before {
     content: "\2193  Item 2";
   }

.m_m-drpbtn:before {
     content: "\2193 Item 3";
   }

   .sheq-drpbtn:before {
     content: "\2193  Item 4";
   }


   .cr-drpbtn:before {
     content: "\2193  Item 5";
     }

   .dropdown-2-button {
     visibility: hidden;
   }

   .drop-down {
     display: block;
     background: #E2E5AA;
     width: 100%;
     border: #790D76 solid;
     border-width: 0px 10px 0px 4px;
   }

   .dropdown-content {
     visibility: visible;
     display: block;
     overflow: 0px;
     width: 100%;
     position: relative;
     background: #E2E5AA;
     pointer-events: auto;
     font-size: 130%;
   }

   .my-dropdown:hover {
     background-color: #E2E5AA;
   }

 

   .my-dropdown {

     color: black;
     position: relative;
     padding: 4px;
     background: #E2E5AA;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     text-align: left;
     float: left;
     z-index: 1;
   }

   .my-dropdown:before {
     content: "item-List";
     color: black;
     position: relative;
     padding: 4px;
     background: transparent;
     border: none;
     cursor: pointer;
     font-size: 15px;
     font-weight: normal;
     text-align: left;
     z-index: 1;
   }

   

   .dropdown-content a:hover {
     background-color: #8F228C;
   }
   
   #client-terminal {
     background-color: #790D76;
   }
 }

<!DOCTYPEhtml>
  <html>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <head>
    </head>

    <body>

      <div class="grid-container">

        <div class="header" style="diplay: inline-block">
        </div>
        <div id="navigation">
        </div>


        <div id="services">
          <div tabindex="0" class="dropdown-2-button">
            <div class="dropdown-2" id="dropdown3">
              <a href="item1.php">item 1</a>
              <a href="item2.php">item 2</a>
              <a href="item3.php">item 3</a>
              <a href="item4.php">item 4</a>
              <a href="item5.php">item 5</a>
            </div>
          </div>
        </div>


        <div class="drop-down">
          <div tabindex="0" class="my-dropdown">
            <div class="dropdown-content">
              <a href="p1.php">p1</a>
              <a href="p2.php">p2</a>
              <a href="p3.php">p3</a>
              <a href="p4.php">p4</a>
              <a href="p5.php">p5</a>
            </div>
          </div>
        </div>


        <div id="client-terminal">
        </div>
        <div id="introduction">

          <div class="a_b-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>
          <div class="cr-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc <br><a href="https://abc.php">test link</a></p>
          </div>
          <div class="sheq-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>
          <div class="c-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>
          <div class="m_m-drpbtn" tabindex="0">
            <p>abc<br>abc<br>abc<br>abc</p>
          </div>

        </div>

      </div>
    </body>

  </html>

General Grievance · Accepted Answer · 2022-05-19 17:51:42Z

The issue is focus. Keep on hover in mobile and on focus on desktop.

EDITED CSS-

.grid-container {
    background: #e2e5aa;
    display: border-box;
    padding: 0px;
    margin: 0px;
    background-size: cover;
  }

  .header {
    grid-area: header;
  }

  #navigation {
    grid-area: navigation;
  }
  #services {
    grid-area: services;
  }
  .drop-down {
    grid-area: dropdown;
  }
  #introduction {
    grid-area: description;
  }
  #client-terminal {
    grid-area: client;
  }

  /*addd for mobile*/
  .my-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
  }

  /*added for mobile*/
  .dropdown-2-button:hover .dropdown-2 {
    opacity: 1;
    visibility: visible;
  }

  @media screen and (min-width: 250px) {
    .grid-container {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-areas:
        "header header header client"
        "navigation navigation navigation dropdown"
        "description description description description"
        "services services services services";
    }

    .my-dropdown {
      color: #e2e5aa;
      position: relative;
      padding: 4px;
      background: #790d76;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      float: right;
      z-index: 1;
    }

    .my-dropdown:before {
      content: "Price-List";
      color: #e2e5aa;
      position: relative;
      padding: 4px;
      background: #790d76;
      border: none;
      /* cursor: ; */ /*error*/
      font-size: 15px;
      font-weight: normal;
      float: right;
      z-index: 1;
    }

    .my-dropdown:focus {
      pointer-events: none;
    }

    /* .my-dropdown:focus .dropdown-content {
             opacity: 1;
             visibility: visible;
           } */

    .my-dropdown:hover {
      background-color: #8f228c;
    }

    .drop-down {
      position: relative;
      display: inline-block;
      background-color: #790d76;
    }

    .dropdown-content {
      visibility: hidden;
      position: absolute;
      background-color: #e2e5aa;
      /* min-width: ;
         2; */
      /*error*/
      overflow: hidden;
      pointer-events: auto;
    }

    .dropdown-content a {
      color: black;
      padding: 4px;
      text-decoration: none;
      display: block;
      font-size: 15px;
      z-index: 3;
    }

    /* style option on hover*/

    .dropdown-content a:hover {
      background-color: #8f228c;
    }

    #navigation {
      background-color: #790d76;
    }

    #client-terminal {
      background-color: #290c28;
    }

    .dropdown-2-button:before {
      content: "Select A Category";
      color: #e2e5aa;
      padding: 4px;
      background: #e2e5aa;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      float: left;
      margin: 0px 0px 15px 0px;
      background-color: #790d76;
    }

    .dropdown-2-button:focus {
      pointer-events: none;
    }

    /* .dropdown-2-button:focus .dropdown-2 {
             opacity: 1;
             visibility: visible;
           } */

    #services {
      position: relative;
      display: inline-block;
      background-color: transparent;
      margin: 0px;
    }

    .dropdown-2 {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: absolute;
      background-color: #e2e5aa;
      min-width: relative;
      z-index: 1;
      overflow: hidden;
      pointer-events: auto;
      visibility: hidden;
      border-radius: 3px;
      top: 30px; /*bring the dropdown menu down*/
    }

    .dropdown-2 a {
      color: black;
      padding: 4px;
      text-decoration: none;
      display: block;
      font-size: 15px;
    }

    .dropdown-2 a:hover {
      background-color: #790d76;
    }

    #introduction {
      display: block;
    }

    #introduction sub-heading {
      display: block;
      font-size: 20px;
      padding: 10px;
      text-align: center;
      font-weight: bold;
    }

    #introduction p {
      text-align: center;
      font-size: 15px;
    }

    #introduction a {
      text-decoration: none;
      color: purple;
      display: inline-block;
    }

    #introduction a:hover {
      background-color: #8f228c;
      color: #e2e5aa;
    }

    .c-drpbtn p,
    .a_b-drpbtn p,
    .cr-drpbtn p,
    .m_m-drpbtn p,
    .sheq-drpbtn p {
      display: none;
    }
  }

  @media screen and (min-width: 640px) {
    .grid-container {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
      display: grid;
      grid-template-areas:
        "header header header header"
        "navigation navigation navigation client"
        "dropdown dropdown description description"
        "dropdown dropdown services services"
        "footer footer footer footer";
    }

    #introduction {
      padding: 20px;
      font-size: 130%;
      font-weight: bold;
    }

    #introduction p {
      font-size: 110%;
    }

    .c-drpbtn p,
    .a_b-drpbtn p,
    .cr-drpbtn p,
    .m_m-drpbtn p,
    .sheq-drpbtn p {
      color: black;
      position: relative;
      padding: 4px;
      background: transparent;
      opacity: 0.6;
      border: none;
      cursor: pointer;
      font-weight: normal;
      z-index: 1;
      display: none;
      margin: 4px;
    }

    .c-drpbtn:focus,
    .a_b-drpbtn:focus,
    .cr-drpbtn:focus,
    .m_m-drpbtn:focus,
    .sheq-drpbtn:focus {
      pointer-events: none;
    }

    .c-drpbtn:focus p,
    .a_b-drpbtn:focus p,
    .cr-drpbtn:focus p,
    .m_m-drpbtn:focus p,
    .sheq-drpbtn:focus p {
      opacity: 1;
      display: block;
    }

    .c-drpbtn:hover,
    .a_b-drpbtn:hover,
    .cr-drpbtn:hover,
    .m_m-drpbtn:hover,
    .sheq-drpbtn:hover {
      background-color: #8f228c;
    }

    .c-drpbtn:before,
    .a_b-drpbtn:before,
    .cr-drpbtn:before,
    .m_m-drpbtn:before,
    .sheq-drpbtn:before {
      color: black;
      display: block;
      padding: 20px;
      background: transparent;
      opacity: 1;
      border: none;
      cursor: pointer;
      font-weight: bold;
      text-align: center;
      margin: auto;
      z-index: 1;
    }

    .a_b-drpbtn:before {
      content: "\2193  Item 1";
    }

    .c-drpbtn:before {
      content: "\2193  Item 2";
    }

    .m_m-drpbtn:before {
      content: "\2193 Item 3";
    }

    .sheq-drpbtn:before {
      content: "\2193  Item 4";
    }

    .cr-drpbtn:before {
      content: "\2193  Item 5";
    }

    .dropdown-2-button {
      visibility: hidden;
    }

    .drop-down {
      display: block;
      background: #e2e5aa;
      width: 100%;
      border: #790d76 solid;
      border-width: 0px 10px 0px 4px;
    }

    .dropdown-content {
      visibility: visible;
      display: block;
      overflow: 0px;
      width: 100%;
      position: relative;
      background: #e2e5aa;
      pointer-events: auto;
      font-size: 130%;
    }

    .my-dropdown:hover {
      background-color: #e2e5aa;
    }

    .my-dropdown {
      color: black;
      position: relative;
      padding: 4px;
      background: #e2e5aa;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      text-align: left;
      float: left;
      z-index: 1;
    }

    .my-dropdown:before {
      content: "item-List";
      color: black;
      position: relative;
      padding: 4px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: normal;
      text-align: left;
      z-index: 1;
    }

    .dropdown-content a:hover {
      background-color: #8f228c;
    }

    #client-terminal {
      background-color: #790d76;
    }
  }

  @media (min-width: 768px) {
    /*add your breakpoint instead of 768*/
    .my-dropdown:focus .dropdown-content {
      opacity: 1;
      visibility: visible;
    }

    .dropdown-2-button:focus .dropdown-2 {
      opacity: 1;
      visibility: visible;
    }
  }

EDITED HTML-

<div class="grid-container">
      <div class="header" style="diplay: inline-block"></div>
      <div id="navigation"></div>

      <div id="services">
        <div tabindex="0" class="dropdown-2-button">
          <div class="dropdown-2" id="dropdown3">
            <a href="item1.php">item 1</a>
            <a href="item2.php">item 2</a>
            <a href="item3.php">item 3</a>
            <a href="item4.php">item 4</a>
            <a href="item5.php">item 5</a>
          </div>
        </div>
      </div>

      <div class="drop-down">
        <div tabindex="0" class="my-dropdown">
          <div class="dropdown-content">
            <a href="p1.php">p1</a>
            <a href="p2.php">p2</a>
            <a href="p3.php">p3</a>
            <a href="p4.php">p4</a>
            <a href="p5.php">p5</a>
          </div>
        </div>
      </div>

      <div id="client-terminal"></div>
      <div id="introduction">
        <div class="a_b-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
        <div class="cr-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc <br /><a href="https://abc.php">test link</a></p>
        </div>
        <div class="sheq-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
        <div class="c-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
        <div class="m_m-drpbtn" tabindex="0">
          <p>abc<br />abc<br />abc<br />abc</p>
        </div>
      </div>
    </div>

HTML ERRORS LISTED BELOW-

this should be - display: inline-block
<div class="header" style="diplay: inline-block"></div>

CSS ERRORS LISTED BELOW-

.my-dropdown:before {
          content: "Price-List";
          color: #e2e5aa;
          position: relative;
          padding: 4px;
          background: #790d76;
          border: none;
          /* cursor: ; */ /*error*/
          font-size: 15px;
          font-weight: normal;
          float: right;
          z-index: 1;
        }
    
        .dropdown-content {
          visibility: hidden;
          position: absolute;
          background-color: #e2e5aa;
          /* min-width: ;
             2; */
          /*error*/
          overflow: hidden;
          pointer-events: auto;
        }

it did not workout, when you use hover you dont get to select the link you want to access on your phone but instead it automaticall selects the first link on the menu.
It's working. Now I have pasted the complete revised CSS. It should be like this. Just copy paste the CSS and check again. Also I found some errors which I have listed above. Check that too. I have mentioned in the css why I have added that css.

Collectives™ on Stack Overflow

Pure html and Css onclick Dropdown menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related