How to make CSS drop down menu appear/change on click

Question

I have a web page, 1000px by 1000px for the main div. Inside the main div, at the top, there is a horizontal bar with four sections, each taking up 1/4 of the space. Each section has some text [wrapped in h2 tag], horizontally/vertically centered in the middle of the 1/4 section and each section must generate a drop-down menu.

For the drop down menu [which must work both on mobile and desktop], I borrowed the idea of using a checkbox [check for make dropdown visible, uncheck for invisible], but it isn't working correctly. The checkbox is small and if it is invisible it is almost impossible to know where to click to check/uncheck. I want the drop down menu to appear if the user clicks/taps ANYWHERE in the 1/4 section area.

The horizontal row of 1/4 section drop down menus looks like this:

^ Note that they don't actually work.

HTML Code:

<div id="Media_Choices">
    <div id="Video" class="media_choice"> <h2>Video▼</h2> </div>
    <div id="Pictures" class="media_choice"> <h2>Pictures▼</h2> </div>
    <div id="Audio" class="media_choice"> <h2>Audio▼</h2> </div>
    <div id="Stories" class="media_choice"> <h2>Stories▼</h2> </div>
</div>

CSS:

#Media_Choices {
    width: 100%;
    max-height:40px;
    min-height:40px;
}
.media_choice {
    display: inline;
    float: left;
    width: 24.5%;
    max-height: 38px;
    min-height: 38px;
    text-align: center;
    vertical-align: middle;
    line-height: 38px;       /* the same as your div height */
}
#Video {
}
#Pictures {
}
#Audio {
}
#Stories {
}

Extra credit if you can get the ▼ downward facing arrow to turn into a ▲ whenever the drop down menu is down and then revert back into a ▼ downward facing arrow whenever the menu is up. You don't need to use the check-box based technique [I know there is a hover option], but anything that works cross platform is good.

For reference, check boxes were origionally implemented using the following code [taken from another question], but copy-pasting in this solution and changing the text inside the box isn't good enough:

<input class="dropdowninput" type="checkbox" id="dropdownbox1"/>
<div class="dropdownbox">
    <label for="dropdownbox1">Open dropdown</label>
    <ul class="dropdown">
        <li>...</li><li>etc</li>
    </ul>
</div>
with CSS:

.dropdowninput, .dropdown {display:none;}
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}

You say that you're using checkboxes, but your code does not reflect that. Please show an attempt at using checkboxes so we can see where you're going wrong. — allicarn
– allicarn, Commented Dec 15, 2015 at 16:53
This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. — Paulie_D
– Paulie_D, Commented Dec 15, 2015 at 16:57
The way I did checkboxes was copy pasted off another question: — Michael Lafayette
– Michael Lafayette, Commented Dec 15, 2015 at 17:58
@MichaelLafayette the whole point of this site is to learn, not to "just get things done". That is why we were all asking for clarifications and to see what you had attempted, so that we could help you learn. No need to bite the hand that is (attempting) to feed you. — allicarn
– allicarn, Commented Dec 15, 2015 at 18:55

razz · Accepted Answer · 2015-12-15 17:55:34Z

2

If i understand you correctly you want to create a responsive dropdown menu and you want the arrows to change when the menu appear/disappear, if this is the case a one way to do it would be to attach event listeners to the menu items that would show/hide the submenus on click, using css and javascript you can do the following:

.media_choice > h2:after {
    display: inline-block;
    content: '▼';
}
.media_choice.dropped > h2:after {
    content: '▲';
}
.media_choice > ul {
    display: none;
}
.media_choice.dropped > ul {
    display: block;
}

And with javascript add the event listeners:

$(document).ready (function()
{
    $('.media_choice').on ('click', function()
    {
        $(this).toggleClass ('dropped');
    });
});

JSFiddle

answered Dec 15, 2015 at 17:55

razz

10.1k7 gold badges55 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Lafayette Over a year ago

This does EXACTLY what I wanted it to do. All I need to do is verify that this example works on Android browsers [chrome and also built in browser] and your solution is perfect. Thank you.

Andrew Bone Over a year ago

@MichaelLafayette you can do different animations to make it look nicer too jsfiddle.net/link2twenty/jb6bwajh

allicarn · Accepted Answer · 2015-12-15 19:31:48Z

Here it is using checkboxes and no JS.

nav {
  width: 80%;
  margin: 20px auto;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: none;
  /* to contain the floats */
}
nav li {
  padding: 0;
  margin: 0;
  width: 25%;
  float: left;
  position: relative;
  white-space: nowrap;
}
nav input {
  display: none;
}
nav label {
  display: block;
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
}
nav label:hover {
  background: #ccc;
}
nav a {
  display: block;
  padding: 10px;
}
nav a:hover {
  background: #ccc;
}
nav label:after {
  content: '▼';
  font-size: 10px;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  border: 1px solid red;
  box-sizing: border-box;
  background: #fff;
  width: 100%;
}
nav ul ul li {
  width: 100%;
  float: none;
}
nav input:checked ~ ul {
  display: block;
}
nav input:checked ~ label:after {
  content: '▲';
}

<!-- http://codepen.io/allicarn/pen/gPPmZZ -->
<nav>
  <ul>
    <li>
      <input type="checkbox" id="navitem1" name="navinputs" />
      <label for="navitem1">Menu Item #1</label>
      <ul>
        <li><a href="#">Sub Menu Item #1a</a></li>
        <li><a href="#">Sub Menu Item #1b</a></li>
        <li><a href="#">Sub Menu Item #1c</a></li>
        <li><a href="#">Sub Menu Item #1d</a></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="navitem2" name="navinputs" />
      <label for="navitem2">Menu Item #2</label>
      <ul>
        <li><a href="#">Sub Menu Item #2a</a></li>
        <li><a href="#">Sub Menu Item #2b</a></li>
        <li><a href="#">Sub Menu Item #2c</a></li>
        <li><a href="#">Sub Menu Item #2d</a></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="navitem3" name="navinputs" />
      <label for="navitem3">Menu Item #3</label>
      <ul>
        <li><a href="#">Sub Menu Item #3a</a></li>
        <li><a href="#">Sub Menu Item #3b</a></li>
        <li><a href="#">Sub Menu Item #3c</a></li>
        <li><a href="#">Sub Menu Item #3d</a></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="navitem4" name="navinputs" />
      <label for="navitem4">Menu Item #4</label>
      <ul>
        <li><a href="#">Sub Menu Item #4a</a></li>
        <li><a href="#">Sub Menu Item #4b</a></li>
        <li><a href="#">Sub Menu Item #4c</a></li>
        <li><a href="#">Sub Menu Item #4d</a></li>
      </ul>
    </li>
  </ul>
</nav>

Collectives™ on Stack Overflow

How to make CSS drop down menu appear/change on click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related