Drop down menu or not for category lists

Hi there,

I have two parent categories which both have around 20 child categories. At the moment, they are all visible on the page on both desktop and mobile.

I’m wondering what the best UX practice would be to display these? Should I have a drop down for each parent or should I leave them all visible at once on the page?

Any suggestions would be great!

Depends on how much real estate they take up. If it’s a lot, then dropdowns would probably be appropriate. So on mobile, almost definitely while on desktop, perhaps.

As for 20 child categories each…uhmmmm…wow. Is there any way to re-organize those to something a little less unwieldy?

Hi there toolman,

here is an example, that might possibly be mildly interesting…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>clinks collection</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html{
    min-height: 100%;
    box-shadow: inset 0 0 2em 0.5em rgba( 0, 0, 0, 0.5 );
 }
body {
    background-color: #405973;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
    color:#fff;
 }

h1 {
    padding: 1em;
    font-size: 1.25em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
 }

#cb1,
#cb2 {
    position: absolute;
    left: -999em;
 }

#label1, 
#label2 {
    display: block;
    margin: 0.5em 0;
    font-size: 1.5em;
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
 }

#label1::before,
#label2::before  {
    content: 'show ';
 }

#cb1:checked ~ #label1::before,
#cb2:checked ~ #label2::before {
    content: 'hide ';
 }
#cb1 ~ #links1,
#cb1 ~ #links2,
#cb1:checked ~ #label2,
#cb2:checked ~ #label1 {
    display: none;
 }

#cb1:checked ~ #links1,
#cb2:checked ~ #links2 {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
 }

#links1 li,
#links2 li {
    width: 33.333%;
    padding:0.5em 1em;
    box-sizing: border-box;
 }

#links1 a,
#links2 a {
    display: block;
    color: #fff;
 }

@media ( max-width: 22em ) {
#links1 li,
#links2 li {
    width: 100%;
  }
 }
</style>

</head>
<body> 

 <h1>collection</h1>

 <div>

  <input id="cb1" type="checkbox">
  <input id="cb2" type="checkbox">
  <label id="label1" for="cb1">links one</label>
  <label id="label2" for="cb2">links two</label>

  <ul id="links1">
   <li><a href="#">link 1</a></li>
   <li><a href="#">link 2</a></li>
   <li><a href="#">link 3</a></li>
   <li><a href="#">link 4</a></li>
   <li><a href="#">link 5</a></li>
   <li><a href="#">link 6</a></li>
   <li><a href="#">link 7</a></li>
   <li><a href="#">link 8</a></li>
   <li><a href="#">link 9</a></li>
   <li><a href="#">link 10</a></li>
   <li><a href="#">link 11</a></li>
   <li><a href="#">link 12</a></li>
   <li><a href="#">link 13</a></li>
   <li><a href="#">link 14</a></li>
   <li><a href="#">link 15</a></li>
   <li><a href="#">link 16</a></li>
   <li><a href="#">link 17</a></li>
   <li><a href="#">link 18</a></li>
   <li><a href="#">link 19</a></li>
   <li><a href="#">link 20</a></li>
   <li><a href="#">link 21</a></li>
   <li><a href="#">link 22</a></li>
   <li><a href="#">link 23</a></li>
   <li><a href="#">link 24</a></li>
   <li><a href="#">link 25</a></li>
   <li><a href="#">link 26</a></li>
   <li><a href="#">link 27</a></li>
   <li><a href="#">link 28</a></li>
   <li><a href="#">link 29</a></li>
   <li><a href="#">link 30</a></li>
  </ul>

  <ul id="links2">
   <li><a href="#">link 1</a></li>
   <li><a href="#">link 2</a></li>
   <li><a href="#">link 3</a></li>
   <li><a href="#">link 4</a></li>
   <li><a href="#">link 5</a></li>
   <li><a href="#">link 6</a></li>
   <li><a href="#">link 7</a></li>
   <li><a href="#">link 8</a></li>
   <li><a href="#">link 9</a></li>
   <li><a href="#">link 10</a></li>
   <li><a href="#">link 11</a></li>
   <li><a href="#">link 12</a></li>
   <li><a href="#">link 13</a></li>
   <li><a href="#">link 14</a></li>
   <li><a href="#">link 15</a></li>
   <li><a href="#">link 16</a></li>
   <li><a href="#">link 17</a></li>
   <li><a href="#">link 18</a></li>
   <li><a href="#">link 19</a></li>
   <li><a href="#">link 20</a></li>
  </ul>

 </div>

</body>
</html>

coothead

1 Like

Thank you very much, I will most likely use a drop down.

Thank you coothead, I will try the code :slight_smile:

Hi,

I have used your coothead’s example for my dropdowns :slight_smile:

I’m wondering if having the links hidden when the page loads will effect my SEO?

I know absolutely nothing about SEO, but read this…

…here…

https://moz.com/community/q/drop-down-menus-seo

coothead

2 Likes

Try this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
 font-family: Arial, Helvetica, sans-serif;
 margin: 0;
}.navbar {
 overflow: hidden;
 background-color: #333;
}.navbar a {
 float: left;
 font-size: 16px;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}.subnav {
 float: left;}.subnav .subnavbtn {
 font-size: 16px;
 border: none;
 outline: none;
 color: white;
 padding: 14px 16px;
 background-color: inherit;
 font-family: inherit;
 margin: 0;
}.navbar a:hover, .subnav:hover .subnavbtn {
 background-color: red;
}.subnav-content {
 display: none;
 position: absolute;
 background-color: red;
 width: 200px;
 z-index: 1;
}.subnav-content a {
 float: left;
 color: white;
 width:100%
 text-decoration: none;
}.subnav-content a:hover {
 background-color: #eee;
 color: black;
}.subnav:hover .subnav-content {
 display: block;
}
</style>
</head>
<body><div class="navbar">
 <a href="#home">Home</a>
 <div class="subnav">
   <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
   <div class="subnav-content">
     <a href="#company">Company</a>
     <a href="#team">Team</a>
     <a href="#careers">Careers</a>
   </div>
 </div>
 <div class="subnav">
   <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
   <div class="subnav-content">
     <a href="#bring">Bring</a>
     <a href="#deliver">Deliver</a>
     <a href="#package">Package</a>
     <a href="#express">Express</a>
   </div>
 </div>
 <div class="subnav">
   <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
   <div class="subnav-content">
     <a href="#link1">Link 1</a>
     <a href="#link2">Link 2</a>
     <a href="#link3">Link 3</a>
     <a href="#link4">Link 4</a>
   </div>
 </div>
 <a href="#contact">Contact</a>
</div><div style="padding:0 16px">
 <h3>Subnav/dropdown menu inside a Navigation Bar</h3>
 <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div></body>
</html>