stackoom
  简体   繁体   中英

Pure html and Css onclick Dropdown menu

 原文  2022-04-26 22:58:47  9   1    html/ css

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 inte.net 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>

1 answers

solution1
 1 ACCPTED  

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Dropdown Menu with pure CSS and HTML How to make a pure CSS bootstrap onclick and hover dropdown menu? Pure CSS dropdown menu CSS Dropdown menu onclick Dropdown menu issue - pure css HTML onclick dropdown menu Pure CSS dropdown menu issue Pure CSS/HTML Dropdown With Anchors Close CSS dropdown menu onclick How to make a pure css based dropdown menu?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM