Responsive Sub Dropdown Menu

mbond5 · May 25, 2019, 10:04pm

Hello Everyone,

It’s been a while since I’ve been on here had to create a new account.

Was wondering if someone could help me out having some issues with my dropdown menu turning it responsive.

Its the sub menu on this section.

I just want something simple so doesn’t need to be anything crazy, basically just an accordion doesnt need a toggle.

Here is the link…

http://www.laserspineinstitutes.com/LSIWP/back_problems/annular_tear/

So its the menu right below…

When does an annular tear occur?

Hopefully someone can help, I’ve tried a few things but couldnt get it to work.

Thanks!

Mike

jmrker · May 26, 2019, 2:03am

I’m unclear what the problem is.
What is happening that should not or what is not happening that should?
I see the menu you display and it changes when the window is shortened
and expands when the window lengthens. How is that wrong?

mbond5 · May 26, 2019, 2:22am

Hello @jmrker thank you for the response.

Yes I got the menu to shorten but it doesn’t work well on mobile devices.

When you click on “Overview” and the child elements appear they appear over top of the first level.

I would like when you click on “Overview” it opens up the child elements and pushes the other ones down. Like an accordion dropdown menu on mobile devices.

I can’t seem to get it to work properly. Plus on my iPhone when I click on Overview it takes me back to top of the page so there are a few things I’m most likely missing.

Thanks,

Mike

jmrker · May 27, 2019, 12:13am

Here is something to consider and modify.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Responsive Flexbox Menu </title>

<!-- Modified from: https://www.barkins.com/2015/10/15/flexbox-responsive-dropdown-menu-no-javascript/ -->
<style>
 .menu { font-family: sans-serif; }
 .menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
 }
 .menu ul li { width: 20%; }
 @media (max-width: 40em) { .menu ul li { width: 100%; } }
 .menu ul li > ul { display: none;  flex-direction: column; }
 .menu ul li > ul li { width: 100%; }
 .menu ul li:hover > ul { display: flex; }
 .menu a {
   text-transform: uppercase;
   display: block;
   background: blue;
   padding: 15px;
   color: white;
   text-decoration: none;
   text-align: center;
 }
 .menu a:hover { background: lightBlue; color: blue; }
 .menu .sub-menu li > a { background: blue; color: white; }
/* .menu .sub-menu > a:after { content: "+";  padding-left: 5px; } */
 .menu .sub-menu li > a:hover { background: lightBlue; color: blue; }
</style>

</head>
<body>
<nav class="menu">
  <ul>
    <li class="sub-menu"><a href="#">Overview</a>
      
      <ul>
          <li><a href="#">About Annular Tears</a></li>
          <li><a href="#">Annular Tear FAQ</a></li>
      </ul>
   
    </li>    
    <li><a href="#">Types</a></li>
    <li><a href="#">Causes</a></li>
    <li><a href="#">Symptoms &amp; Diagnosis</a></li>
    <li><a href="#">Treatment</a></li>
  </ul>
</nav><!--/menu-->

</body>
</html>

mbond5 · June 4, 2019, 5:50pm

Hello,

Thanks.

Ok I edited this and put it in and have a couple issues on Desktop…

When you roll over “Overview” it pushes all content down. Is it possible to not do this so the dropdown menu shows overtop of the image on Desktop only.
When you roll over “Overview” it expands the li to the width of the longest child li hence pushing all that parent li’s over. Not ideal
When rolling over “Overview” the dark blue expands, across 100% of the width below as well, I don’t want it to show below the parent.

Hope, that makes sense, on mobile it works perfect!

So once can resolve this I can build rest of the navigation as their will be child li’s under each parent nav item.

Thanks!

jmrker · June 4, 2019, 6:41pm

Quote from “mbond5”

Ok I edited this and put it in and have a couple issues on Desktop…

I’m not much of a mind-reader so I have difficulty helping on things I don’t understand.
What is “this”?
What are the starting conditions of the problem?
What is clicked or rolled over to recreate the problem?
Which browser are you using?

mbond5 · June 4, 2019, 6:56pm

I meant edited the code so colours and some other things but not much.

If you take a look at…

http://www.laserspineinstitutes.com/LSIWP/back_problems/annular_tear

The menu with “Overview, Types, Causes, Symptoms & Diagnosis & Treatments” doesn’t function as a regular dropdown menu would.

On Desktop just need that menu to act like a regular dropdown menu now then everything would be perfect.

The mobile works perfect now, so that is great.

Thanks

jmrker · June 4, 2019, 9:05pm

New attempt. See if it can be modified to your needs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> HTML5 Test Page </title>

<!-- Modified from: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text
     For: https://www.sitepoint.com/community/t/responsive-sub-dropdown-menu/329008/7
-->
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 ul { list-style-type: none; }
 li { display: inline-block; }  /* default is vertical display */
 .tm { font-size: 1.2em; display: inline-block; margin: 0.1em; padding: 0.1em;
              color: black; background-color: lightblue; }
 .tm:hover { color: white; background-color: blue; }

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  color: black;
  background-color: lightblue;
  min-width: 15em;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content { display: block; }

a { text-decoration: none; font-size: 1.2em; display: inline-block;  }
a:hover { color: white; background-color: blue; }

 @media (max-width: 40em) {
   .menu li div { width: 100%; }
   .menu li { width: 100%; }
 }

</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<ul class="menu">

 <li>
  <div class="dropdown">
   <div class="tm">Overview</div>
   <div class="dropdown-content">
    <a href="#">Annular Tear</a>
    <a href="#">Annular Tear FAQ</a>
  </div>
 </li>

 <li>
  <div class="dropdown">
   <div class="tm">Types</div>
   <div class="dropdown-content">
    <a href="#">Types of Annular Tears</a>
    <a href="#">Cervical (Neck)</a>
    <a href="#">Lumbar (Lower Back)</a>
    <a href="#">Thoracic (Middle Back)</a>
    <a href="#">Small Annular Tear(Neck)</a>
   </div>
  </div>
 </li>

 <li>
  <div class="dropdown">
   <div class="tm">Causes</div>
  </div>
 </li>

 <li>
  <div class="dropdown">
   <div class="tm">Symptoms &amp; Diagnosis</div>
   <div class="dropdown-content">
    <a href="#">Annular Tear Symptoms</a>
    <a href="#">Annular Tear Diagnosis</a>
  </div>
 </li>

 <li>
  <div class="dropdown">
   <div class="tm">Treatment</div>
  </div>
 </li>

</ul>
<hr>

</body>
</html>

mbond5 · June 4, 2019, 11:23pm

Hey @jmrker,

Thanks for this but is it possible to use the html with ul and li that is currently in there as that is using the default Wordpress Menu so can’t really introduce divs.

Thanks!

jmrker · June 5, 2019, 2:42am

I have no idea. I do not use a Wordpress Menu, whatever that is.
My guess is that you should be able to use additional UL/LI with other CSS statements or classes as JS is just JS and CSS is just CSS regardless of what you wrap around it.

Good Luck!

PaulOB · June 5, 2019, 8:58am

Dropdown menus are inherently difficult to do properly and should be avoided if at all possible. There are issues with touch devices (because they don’t hover properly) and issues with accessibility as keyboard navigation is not possible.

If you must have a dropdown then consider a click js driven dropdown which will work for both desktop and mobile and also have keyboard interactivity.

How do you define desktop and what is unique with a desktop that you can target?

The problem is that there is no '‘target-able’ distinction between mobile and desktop apart from media queries based on screen sizes which again is just a best guess because ipads are very large now (larger than some laptops) and behave like mobile devices with touch enabled.

Therefore the best approach is to use the method that works for all which is a click dropdown rather than a hover dropdown. You can detect touch with js and offer click dropdowns to touch and hover to non-touch but requires a does of js to do this.Or you can change effects based on screen width but obviously not as effective as detecting touch.

The other issue I see is that you are allowing the menu to wrap around at smaller screen widths and a hover menu that wraps is also an awkward construct and not pleasing to the eye.

Not to mention that hover dropdowns are hard to use for those who are motor impaired and as you haven’t built in keyboard accessibility it becomes a nightmare to use

Having said all that and if you still want to continue a quick fix is to absolutely place the dropdowns on larger screen sizes.

e.g. Do this:

@media screen and (min-width:641px){
 #menu-annular-tear ul.sub-menu{position:absolute;}
 .sub-conditions{position:relative}
 .subnavigation li:hover> a{background:#1194d6}
 .subnavigation .sub-menu li > a:hover{background:#003a58}
}

mbond5 · June 5, 2019, 11:48am

Awesome thanks @PaulOB this worked and will look into the detect touch with js too.

mbond5 · June 6, 2019, 4:14am

Hello @PaulOB

One other thing I noticed now after putting in that code my main top navigation in the header doesn’t work on mobile properly anymore it like cuts off several of the nav items.

Check it out…

http://www.laserspineinstitutes.com/LSIWP/

Do you know why this would be?

PaulOB · June 6, 2019, 8:46am

The code I gave you only applied to screens wider than 641px so would have no effect on smaller devices unless you didn’t close the media query.

I’m on a mobile at the moment so can’t inspect the code but I will have a look when I get home later this afternoon.

mbond5 · June 6, 2019, 10:56am

Thanks @PaulOB greatly appreciate it. Not sure what happened. Was working earlier yesterday then wasn’t

EDIT: I resolved it, I put a z-index on it as the other nav which you helped me with was showing above the dropdown menu. So just got to work on the z-index’s and put them in right orders and I’ll be good.

system · September 10, 2019, 1:32pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.