Known Participant

Answered

Drop Down Sub Menu Not Working on Mobile

Forum|Forum|8 years ago
June 23, 2017
1 reply
12996 views

I have everything in place for my drop down sub-menu which works in testing on shrunken screen but will not work on my HTC One when I check it now we have gone live! I am guessing that the issue to hand is that once you have pressed the hamburger to expand the menu down it goes about half way down the screen with clickables and the last choice you get is the celebration drop down menu, click on this and the menu does drop down to the final choice being the 'Make Your Choice' as the very bottom item (which is the very bottom of my screen, now when you click on that (tap) instead of opening the further choices up it closes the choices down to top drop down menu i.e. celebration stationery option. I am guessing this is because the second drop down has no where to go as there is no screen left under the 'Make Your Choice'.

This is obviously not acceptable as it makes a large percentage of the site not available to mobile viewing. Does anybody have any suggestions for fixing this issue? There is still another page to go under Font Choices in the sub menu drop down.

In-case you want to check this out for yourself on your mobiles then please go to AD Design & Print. I would appreciate help with this as the site is now live with all pages passing WC3 validation.apart from Contact-us that has an 'error' in the embedding code supplied by Google for the map.

This topic has been closed for replies.

Correct answer osgood_

Try including the below script after the link to your Bootstrap js file at the foot of your page. That should stop the default toggle collapsing all open states.

$(document).ready(function(){

$('.dropdown-submenu a').on("click", function(e){

$(this).next('ul').toggle();

e.stopPropagation();

e.preventDefault();

});

</script>

O

osgood_

Brainiac

Measha06 wrote
I am guessing this is because the second drop down has no where to go as there is no screen left under the 'Make Your Choice'.

No, its not. It's because Bootstrap is toggling the 'open states' and closing all the open states.

I don't know how Bootstrap toggle works (and dont really want to) so you will have to wait for someone who does and can give you some advice, the submenu probably needs a bit of onclick javascript of its own to work correctly.

Measha06Author

Known Participant

Thanks for input

Measha06Author

Known Participant

Measha06 wrote
I like the idea of sliding but in but would take deep investigation how to organise that!

Example code below. If you can imagine it and you can code - you can do it. This example slides down from the top. With a little more work it could slide in from the side.

Personally I would remove that duff old one dimensional Bootstrap stuff and use something more suited, which is going to give your users a better and more organised experience.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<style>

body {

margin: 0;

}

/* zero out all padding/margin */

* {

box-sizing: border-box;

}

.outer-navigation-wrapper {

background-color: #B771E7;

}

/* main navigation wrapper */

.main-navigation-wrapper {

width: 80%;

margin: 0 auto;

font-family: helvetica, sans-serif;

}

@media (max-width: 960px) {

.main-navigation-wrapper {

width: 100%;

}

.main-navigation {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: end;

-ms-flex-pack: end;

justify-content: flex-end;

margin: 0;

padding: 0;

font-size: 18px;

line-height: 28px;

}

@media screen and (max-width: 960px) {

.main-navigation {

display: none;

}

.main-navigation li {

margin: 0;

padding: 0;

list-style: none;

position: relative;

}

@media screen and (max-width: 960px) {

.main-navigation li {

position: static;

}

.main-navigation li i {

font-size: 16px;

margin: 0 0 0 5px;

padding: 0;

}

@media screen and (max-width: 960px) {

.main-navigation li {

width: 100%;

}

.main-navigation a {

text-decoration: none;

color: #fff;

display: block;

padding: 15px;

font-size: 14px;

}

@media screen and (max-width: 960px) {

.main-navigation a {

padding: 15px 25px;

}

.main-navigation a:hover {

color: #000;

}

/* drop menu */

.main-navigation .drop-menu {

position: absolute;

top: 3.2em;

left: 0;

background-color: #fff;

border: 1px solid #f2f2f2;

margin: 0;

padding: 0;

width: 250px;

box-shadow: 7px 5px 7px #ccc;

}

@media screen and (max-width: 960px) {

.main-navigation .drop-menu {

top: 0;

left: 0;

border: none;

margin: 0;

padding: 0;

width: 100%;

box-shadow: none;

height: 100%;

}

.drop-menu li {

border-bottom: 1px solid #f2f2f2;

}

.drop-menu a {

padding: 15px 15px;

color: #000;

}

@media screen and (max-width: 960px) {

.drop-menu a {

padding: 15px 25px;

color: #000;

}

.drop-menu a:hover {

background-color: #f2f2f2;

}

/* drop menu sub */

.main-navigation .drop-menu-sub ul {

background-color: #fff;

}

@media screen and (max-width: 960px) {

.main-navigation .drop-menu-sub ul {

position: absolute;

top: 0;

left: 0;

border: none;

margin: 0;

padding: 0;

width: 100%;

box-shadow: none;

height: 100%;

}

.drop-menu-sub ul {

margin: 0;

padding: 0;

}

.drop-menu-sub ul li {

border: 1px solid #f2f2f2;

}

/* mobile menu icon */

.mobile-menu-icon {

display: none;

}

@media screen and (max-width: 960px) {

.mobile-menu-icon {

display: block;

text-align: right;

color: #fff;

padding: 15px 40px;

font-size: 20px;

}

.main-navigation li {

width: 100%;

}

.drop-menu .list-header {

font-size: 20px;

padding: 20px 15px 20px 25px;

color: #B771E7;

display: none;

}

@media screen and (max-width: 960px) {

.drop-menu .list-header {

display: block;

}

.drop-menu .close-sub-menu {

background-color: #B771E7;

color: #fff;

text-align: right;

border-bottom: none;

padding: 15px;

display: none;

}

@media screen and (max-width: 960px) {

.drop-menu .close-sub-menu {

display: block;

}

</style>

$(document).ready(function(){

//hide drop menu and drop menu sub

$('.drop-menu, .drop-menu-sub ul').hide();

//show drop menu

$('.main-navigation li').css('cursor', 'pointer').click(function() {

$(this).find('.drop-menu').slideDown().end().siblings().find('ul').hide();

});

// show mobile menu icon at 960px window width

$('.mobile-menu-icon').css('cursor','pointer').click(function(){

$('.main-navigation').slideToggle();

});

//show drop menu sub

$('.drop-menu-sub').css('cursor', 'pointer').click(function() {

$(this).find('ul').slideToggle().end().siblings().find('ul').hide();

});

// close sub menu

$('.close-sub-menu').css('cursor','pointer').click(function(){

$(this).parent('ul').slideUp();

return false;

});

//drop menu slide up if window width more than 960px

$('.drop-menu').mouseleave(function(){

if ($(window).width() > 960) {

$('.drop-menu').slideUp();

}

});

//realign main-navigation and hide drop menu at 960px window width

$(window).resize(function(){

if ($(window).width() > 960) {

$('.main-navigation').css('display', 'flex');

$('.drop-menu').hide();

}

else if ($(window).width() < 960) {

$('.main-navigation').css('display', 'none');

}

});

</script>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Corporate</a></li>

<li><a href="#">Embroidery</a></li>

<li><a href="#">Everything Web</a>

</li>

<li><a href="#">Self Publishing</a></li>

<li><a href="#">Celebration Stationary<i class="fa fa-caret-down" aria-hidden="true"></i></a>

<li class="list-header">Celebration Stationary</li>

<li><a href="#">Celebrations</a></li>

<li><a href="#">Wedding Stationary Items</a></li>

<li class="drop-menu-sub"><a href="#">Make Your Choices<i class="fa fa-caret-down" aria-hidden="true"></i></a>

<ul>

<li class="list-header">Make Your Choices</li>

<li><a href="#">Base Choices</a></li>

<li><a href="#">Card Choices</a></li>

<li><a href="#">Accessory Choices</a></li>

<li><a href="#">Weddding Invitation Wording</a></li>

<li><a href="#">Weddding Evening Invitation Wording</a></li>

<li><a href="#">Font Choices</a></li>

</ul>

</li>

</ul>

</ul>

</nav>

</div>

</body>

</html>

When my brood have gone to bed and I have peace I shall have a look later as I am very interested in this. Been drilling and plugging walls all day for my daughter who has moved from flat to house yesterday! Bit shattered at the moment and need to absorb this. Many Thanks

Liz

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded