I am in the midst of designing a webpage with a main div that is 1000px by 1000px. Within this main div, there is a horizontal bar located at the top, divided into four sections - each occupying 1/4 of the space. In the center of each section, there is text enclosed in an h2 tag that should be both horizontally and vertically centered. Additionally, I want each section to trigger a drop-down menu when clicked.
While attempting to implement the drop-down menu using checkboxes (for visibility control on both mobile and desktop), I encountered a problem. The checkbox itself is quite small, making it difficult for users to click and toggle its visibility effectively. My goal is to have the drop-down menu appear whenever a user clicks anywhere within the 1/4 section area.
The layout of the row of 1/4 section drop down menus can be seen in the following image: https://i.sstatic.net/a3IdR.png
Please note that the functionality shown in the image is not yet operational.
Here is the HTML code snippet:
<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>
And here is the CSS code snippet:
#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 {
}
If you are able to create a dynamic arrow (changing from ▼ to ▲) based on the state of the drop-down menu, that would be greatly appreciated. Feel free to explore alternative methods beyond the checkbox approach, as long as they are compatible across different platforms.
Prior attempts at utilizing checkboxes for dropdown menus were based on the code provided below [obtained from another source], but simply replacing the text inside the box was not sufficient:
<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;}