Off screen sliding dropdown not working on small device

HTML & CSS
1

Hi
Last year PaulOB kindly assisted me here:

Now I tried implementing it into a website, with some changes which I think created the issue, by checking the original test I loaded here: ttri dot biz/fz_test/06 (PaulOB’s https://codepen.io/paulobrien/pen/vpNNPq) I noticed a small issue which I think is somehow related.

When on small device (smartphone) the sliding overlay seems to cover the menu, and the dropdown is not available, and the item behaves as link to the same page.

The original test does show the dropdown list, but the overlay is visible (ttri dot biz/fz_test/06) instead of coming to screen on hover.

The site I am trying to implement it on is:
editricebahai dot com/clean-155/

It all works as it should on desktop when resizing the browser!

The below code is integrated with bootstrap 3.3.7

This is the css

.slidenav, .slidenav ul {
margin:0;
padding:0;
list-style:none;
}
.slidenav{position:relative;}
.slidenav > li{
padding:0 0 4px;
position:relative;
}
.slidenav > li:hover{z-index:99}
.slidenav > li > a{
display:block;
position:relative;
background:rgba(221, 221, 221, 0.7);
text-decoration:none;
color:#727272;
border-left:18px solid #db0078;
padding:9px 0 9px 18px;
overflow:hidden;
font-weight:bold;
}
/* the login button - note background, and text color */
.slidenav > li > .fz-login-button {
background:#337ab7;
color:#fff;
border-left:18px solid #000095;
}
/* login text color when logged in */
#fz-logged-in {
color:#f00;
}
.slidenav > li > a {text-shadow:-300px 0 0 #999;transition:text-shadow .8s ease;}
.slidenav > li:hover > a{text-shadow:1px 1px 0 #000;}
.slidenav > li > a:before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:2;
transition:transform 1s ease;
transform:translateX(-100%);
}
.slidenav > li:hover > a:before {transform:translateX(0);}
/* fixed left color */
/*
.slidenav > li:nth-child(1) > a {border-color: #db0078;}
.slidenav > li:nth-child(2) > a {border-color: #722ba8;}
.slidenav > li:nth-child(3) > a {border-color: #532099;}
.slidenav > li:nth-child(4) > a {border-color: #3f3cad;}
.slidenav > li:nth-child(5) > a {border-color: #005b9a;}
*/
/* use above styles for different colors */
.slidenav > li > a {border-color: #999;}
/* login button border */
.slidenav > li > .fz-login-button {border-color: #000095;}

/* default sliding colours*/
/*
.slidenav > li:nth-child(1) > a:before{background:rgba(190, 190, 190, 0.7);}
.slidenav > li:nth-child(2) > a:before{background:rgba(114, 43, 168, 0.7);}
.slidenav > li:nth-child(3) > a:before{background:rgba(83, 32, 153, 0.7)}
.slidenav > li:nth-child(4) > a:before{background:rgba(63, 60, 173, 0.7);}
.slidenav > li:nth-child(5) > a:before{background:rgba(0, 91, 154, 0.7);}
*/
/* use above styles for different colors */
.slidenav > li > a:before{background:rgba(190, 190, 190, 0.7);}

/* if you want color to change on hover then change these 5 rules */
/*
.slidenav > li:nth-child(1):hover > a:before{background:rgba(219, 0, 114, 0.7);}
.slidenav > li:nth-child(2):hover > a:before{background:rgba(114, 43, 168, 0.7);}
.slidenav > li:nth-child(3):hover > a:before{background:rgba(83, 32, 153, 0.7)}
.slidenav > li:nth-child(4):hover > a:before{background:rgba(63, 60, 173, 0.7);}
.slidenav > li:nth-child(5):hover > a:before{background:rgba(0, 91, 154, 0.7);}
*/
.dropdown > a:after{
content:"";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #000;
display:inline-block;
vertical-align:middle;
margin:-2px 0 0 5px;
}
ul.sub {
position:absolute;
width:50%;
left:50%;
margin-left:-999em;/* fallback*/
margin-left:-100vw;
top:-90%;
opacity:0;
background-color: #ccc;
z-index:-1;
box-shadow:5px 5px 5px rgba(0,0,0,0.4);
/* comment the next line out if you want the submenu to disappear quickly */
transition:opacity 1s ease .1s, top .1s ease .5s, margin 0s  1s;
}
.dropdown:hover .sub {
top:0;
margin-left:0;
opacity:1;
transition:opacity 1s ease .5s, top .5s ease .5s;
z-index:99;
}
.sub a{
display:block;
color:#454545;
padding:9px;
text-decoration:none;
}
.sub a:hover{background:#d9d9d9;color:#454545;}

@media screen and (max-width:800px){
.slidenav{width:auto;margin:9px 0;}
}
@media screen and (min-width:768px) and (max-width:999px){
ul.sub {
width:72%;
left:28%;
}
}
@media screen and (max-width:480px){
ul.sub {
width:81%;
left:19%;
}
}

And this the html (sample)

<div class="row fz-top-nav">
<nav class="navbar navbar-default">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar toggle-1"></span>
	<span class="icon-bar toggle-2"></span>
	<span class="icon-bar toggle-3"></span>
	<span class="icon-bar toggle-4"></span>
	<span class="icon-bar toggle-5"></span>
	</button>
	</div><!-- .navbar-header -->

	<div class="navbar-collapse collapse">
		<div class="sidebar-links">

			<div class="row">
				<div class="col-xs-12">

						<ul class="slidenav">
						<li><a class="fz-login-button" href="http://ttri.biz/fz_test">top-1</a></li>
						
						<li class="dropdown"><a id="fz-logged-in" href="#">top-2</a>
						<ul class="sub">
						<li><a href="01/">sub-2-1</a></li>
						<li><a href="02/">sub-2-2</a></li>
						</ul>
						</li>
					</ul>
				</div>
			</div>

			<ul class="slidenav">
				<li class="dropdown"><a href="#">top-3</a>
					<ul class="sub">

					<li><a href="04/">sub-3-1</a></li>
					<li><a href="05/">sub-3-2</a></li>

					</ul>
				</li>
				<li><a href="#">top-4</a></li>
				<li class="dropdown"><a href="#">top-5</a>
					<ul class="sub">
					<li class="dropdown">
						<ul class="dropdown-menu-fz" role="menu">
						<li><a href="06/">sub-5-1</a></li>
						<li><a href="07/">sub-5-2</a></li>
						<li><a href="08/">sub-5-3</a></li>
						</ul>
					</li>
					</ul>
				</li>
			</ul>	
		</div><!-- .sidebar-links -->
	</div><!-- .navbar-collapse .collapse -->
</nav>
</div><!-- .row .fz-top-nav -->

Thank you

Apologies if I should’ve posted on the old thread instead of opening new one.

2

I don’t see a problem with the original solution which I have put here for testing.

You can navigate to the sub menu and select google and off it goes (at least its ok on my iphone). Does that work for you?

Usually for mobile/touch though you would not rely on hover as such because that can be awkward especially if you have removed the touch delay from the device. Most devices assume the first touch is a hover but a longer touch would activate the link.

A more foolproof solution would be to detect for touch and if enabled offer a click solution (using js). If touch is not detected then offer the hover menu instead. This can be done by adding a class to the html element and then using that class for the hover menu rules. If js is detected then that class is removed and another different class added instead which is used for the js click menu.

Obviously that will take quite a bit of work but that is the way I would approach it.

However, test the original menu on my link above and see if that is working for you and if so then we need to narrow down where your current site is breaking it.

3

Thank you.
Indeed I stated that my changes might be the culprit, though I noticed this on my phone (LG android):
the menu seems to appear with the sliding layer, although when touched it seems to have the sliding effect.
mobile screenshot:
drop-down-slide-menu-mobile
desktop screenshot:
dropdown-slide-menu-desk

The red dropdown of your original does show, and work, I guess the width settings I added for small media are the issue?

4

I think the issue is that as you have moved the sub menu over it gets activated when you click over where the submenu appears dues to the z-index kicking in straight away. I believe the problem may still be evident if you click to the right of each link in the old demo.

I’ll need to look into it in more detail but it will tomorrow afternoon before I can look again. It may be possibl;e top move the sub menu somewhere else first but I would have to test.

As I mentioned above using a js class to trigger the menu for mobile may be a safer option as you avoid the touch hover problem.

5

No problem, I can wait.
Just to be clear the two previous screenshots are from your test page at pmob.

6

I;ve played around with the menu a little bit and if I remove the width and re-instate it on hover it seems to allow the whole length of the original item to be clicked to trigger the dropdown menu without activating the destination.

I’ve used your html and css (mostly) and uploaded it here.

http://www.pmob.co.uk/temp2/menu-slide-in-fromLeft4.html

The problems I see are that as you have made the menu wider then it becomes awkward to click another item because there is very little room at the side.

The main problem though is that you cannot close a submenu unless you click another item unlike hover menus which just go away or a click menu where you click the same item to close.

On touch devices once you touch an item it stays in the touched state unlike hover which is transient. That’s why I recommend building a js version for touch and a hover version for non-touch devices as mentioned.

However hopefully the above demo will suffice for now but you will need to test thoroughly and tweak accordingly for best results.:slight_smile:

1 Like
7

Thank you.

Following your note I reduced the width a bit, and indeed it is better.
I’ll see what I can do with js, in the meantime at least it is working.

Not that it is an big issue, but is it on mine, and perhaps android device, that it seems to load with the overlay, as from my understanding you don’t have that issue with the iphone.

8

No i don’t see that on the iphone but I don;t have android to test at the moment.

If you want to go down the js route here’s a start:

http://www.pmob.co.uk/temp2/menu-slide-in-fromLeft5.html

It’s a bit messy as I;m in a rush but gives you the general idea.

The menu for touch is activated with js to show and hide the menu and you would use the js classes to make the changes for mobile etc. The hover classes only go to non touch devices so don’t get in the way. You would of course need to add some styling (or classes with js) to show the current items in a different colour but I will leave that for you to experiment with :slight_smile:

1 Like
9

Thank you.
New toy to play with :anguished::slightly_smiling_face:

1 Like
10

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