Help with Hover Menu

kristiiina91 · 2016-06-24 00:56:09

Hey everyone!

I’m going to warn you, I am very very very new and inexperienced.
I am having an issue with my menu. I am using a hover menu, where on desktop the menu appears when hovered over, but on mobile it appears when tapped. The menu disappears when you are no longer hovering over it. On mobile, however, the menu can’t be closed whether by tapping the menu header or elsewhere on the page.

The following is in my <head>

.dropbtn {
    font-family: 'poiret one', serif;
    background-color: #ffffff;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 100px;
}


.dropdown {
    position: relative;
    display: inline-block;
    text-align: left;
    position: fixed;
    left: 10px;
    top: 150px;
}


.dropdown-content {
    display: none;
    position: absolute;
    font-family: 'poiret one', serif;
    font-size: 16px;
    background-color: rgba(255,255,255,0);
    min-width: 160px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    border: none;
}


.dropdown-content a {
    color: black;
    font-family: 'poiret one', serif;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


.dropdown-content a:hover {background-color: #cccccc}


.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #cccccc;
}

And the following is in my <body>

<div class="dropdown">
  <button class="dropbtn">menu</button>
  <div class="dropdown-content">
    <a href="#">eat</a>
    <a href="#">work</a>
    <a href="#">see</a>
    <a href="#">explore</a>
    <a href="#">about</a>
  </div>

Anyone know how to fix this when I’m on mobile? Any help would be massively appreciated.

If it helps, I’m using the <meta name="viewport" content="width=device-width"> trick.

EDIT: added bc.. for better code readability

Destry · 2016-06-24 11:01:00

This doesn’t directly address your issue, I don’t think, but one thing you probably want to do, assuming you’re using HTML5, is improve the semantics of your markup by converting your menu to a nav list and adjust CSS accordingly. I intentionally leave the button out here for clarity.

<nav id="primary">
  <ul class="dropdown">
    <li><a href="#">eat</a></li>
    <li><a href="#">work</a></li>
    <li><a href="#">see</a></li>
    <li><a href="#">explore</a></li>
    <li><a href="#">about</a></li>
  </ul>
 </nav>

So your CSS selectors would change like this (or you can keep your own):

.dropdown to #primary
.dropdown-content to #dropdown

Also, there’s no JavaScript involved at all?

For what it’s worth, if you’re using Textpattern (presumably)… you should use the native Hive menu (markup and CSS) and just modify the presentation as needed. It’s already functional in all device sizes, plus your menu will be forward compatible to future Txp updates too, when dependencies are updated in the process.

phiw13 · 2016-06-25 00:05:06

@kristiiina91

You really need some javascript to make that work nicely on all devices, and taking care of accessibility requirements. Don’t rely on CSS :hover as it is a nightmare for keyboard users and for people using assistive technology (think screen-readers).

For such a simple menu, Responsive Nav is a great, light-weight script (and it is very easy to use to boot).

kristiiina91 · 2016-06-25 05:07:33

Awesome! Thanks for the input, I really appreciate it! I will update with what I end up doing.

Last edited by kristiiina91 (2016-06-25 05:08:29)

kristiiina91 · 2016-06-25 05:28:43

phiw13 wrote #299964:

@kristiiina91

You really need some javascript to make that work nicely on all devices, and taking care of accessibility requirements. Don’t rely on CSS :hover as it is a nightmare for keyboard users and for people using assistive technology (think screen-readers).

For such a simple menu, Responsive Nav is a great, light-weight script (and it is very easy to use to boot).

I tried out Responsive Nav. I follow the “Usage Instructions” on the website and can’t get it to work. The menu options remain on-screen and do not appear at all on the mobile site :[ I do like it though!

phiw13 · 2016-06-25 07:55:33

kristiiina91 wrote #299966:

I tried out Responsive Nav. I follow the “Usage Instructions” on the website and can’t get it to work. The menu options remain on-screen and do not appear at all on the mobile site :[ I do like it though!

Can you provide a link to the page, otherwise it will be very difficult to help you out.

kristiiina91 · 2016-06-26 02:18:56

ah sorry, hadn’t thought of that!

it’s at: http://www.sheality.com/

phiw13 · 2016-06-26 03:03:49

kristiiina91 wrote #299974:

http://www.sheality.com/

You have incorrect links to the script and the stylesheet. Or did you forget to upload them to your server?

Once you have corrected that, test again, and use the developer tools in your browser to help discover problems in case of failure.

GugUser · 2016-06-26 14:42:26

Additionally here are many things to say, that has not necessarily to do with your question. Some examples:

Change

<meta name="viewport" content="width=device-width">

to

<meta name="viewport" content="width=device-width, initial-scale=1" />

Several elements are not closed.

The <ul> for navigation should be inside an <nav> element, so you don’t select all <ul> with the navigation CSS.

<nav>
	<ul>
		<li><a href="see">see</a></li>
		<li></li>
		<li><a href="work">work</a></li>
		<li></li>
		<li><a href="eat">eat</a></li>
		<li></li>
		<li><a href="explore">explore</a></li>
	</ul>
</nav>

So, this works only for the navigation:

nav > ul {
	position: fixed;
	left: 450px;
	top: 95px;
	padding: 0px;
	background: rgba(255,255,255,.3);
	margin: 0 auto;
	color: #000;
	font-size: 25px;
	font-family: 'poiret one', serif;
}

nav > ul li {
      display: inline;
      padding: 10px 0 0 10px;
}

background: rgba(255,255,255,.3); makes no sense on a white background. Also margin: 0 auto; doesn’t work with position: fixed.

Also you have empty <li> and a href="work" should better be a href="/work".

For <div id="main"> exists the <main> element, also exists an <header> element (you have CSS definitions for <header> but no <header>).

<article role="article" itemscope itemtype="http://schema.org/Article"> doesn’t need role="article".

Also you have isolated </a> and </p> elements.

…

Last edited by GugUser (2016-06-26 14:57:37)

Destry · 2016-06-27 11:55:49

For what it’s worth, NN/g have tested hidden/hover navigation menus in desktop, and they don’t work well for users, as it was observed.

In short, if you have the room to show the menu options, and you should in desktop, then show them for improved usability. That’s more important than having a “cool” design.

michaelkpate · 2016-06-27 16:09:30

Destry wrote #299991:

For what it’s worth, NN/g have tested hidden/hover navigation menus in desktop, and they don’t work well for users, as it was observed.

I was on a site the other day starting at the hamburger icon while I was looking for the site search. I would have gone right there on mobile but on Desktop I couldn’t figure out what it was for.

Bloke · 2016-06-28 09:17:28

Destry wrote #299991:

NN/g have tested hidden/hover navigation menus in desktop and they don’t work well for users

Interesting, thanks for the link. I learned something new today and it’s only ten o’clock.

Textpattern CMS

Textpattern CMS support forum

#1 2016-06-24 00:56:09