• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

navigation items close before you can click on them

Participant ,
Sep 22, 2018 Sep 22, 2018

Copy link to clipboard

Copied

My site is http://v38.ancestry.higgsy.co.uk/index.php

I added a bootstrap navbar but then I found you had to click to open it and I wanted for it to expand on hover, so I added this over-ride code I found on the internet

.dropdown:hover>.dropdown-menu {

display: block;

}

and it seems to work, the only problem now is when you hover and it expands, if you move to pick an item and it closes before you can click it.  On the second or sometimes  third re-attempt it stays expanded ok and sub-items can be clicked.  Can you say why these random closures are happening? Many thanks

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Oct 04, 2018 Oct 04, 2018

higgsyd wrote

My site is http://v38.ancestry.higgsy.co.uk/index.php

I added a bootstrap navbar but then I found you had to click to open it and I wanted for it to expand on hover, so I added this over-ride code I found on the internet

.dropdown:hover>.dropdown-menu {

display: block;

}

and it seems to work, the only problem now is when you hover and it expands, if you move to pick an item and it closes before you can click it.  On the second or sometimes  third re-attempt it stays expanded ok and sub-i

...

Votes

Translate

Translate
Community Expert ,
Sep 22, 2018 Sep 22, 2018

Copy link to clipboard

Copied

I don't use on Hover triggers anymore.  It's a bad user experience for people on touch screen devices or who may not have a mouse to hover with.  Keep in mind that touch screens are showing up everywhere these days, not just mobile phones and tablets.  So onClick or Tap is a safer trigger for your navigation menu. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Sep 23, 2018 Sep 23, 2018

Copy link to clipboard

Copied

Bootstrap is a jack of all trades, master at …. [fill in the blank]

Hand-coded menus, or menus made with quality tools, accommodate both mouse and touch users, seamlessly and automatically.

Examples:

Adaptive Menu Magic  (priority-based)

Maxi Menu Magic  (Flexbox + Mega support)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 30, 2018 Sep 30, 2018

Copy link to clipboard

Copied

Thanks for your reply.  But as coded, the tap is working fine on my iPad and hover is ALMOST fine on Desktop.  My only outstanding issue at the moment is when, on the Desktop,  once the hover has opened the sub-menu, it disappears until after two or three more  'hovers', then it correctly stays open, allowing the user to click a sub entry.  Can you say why the submenu closes prematurely? Many thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 30, 2018 Sep 30, 2018

Copy link to clipboard

Copied

It looks like your submenu is spaced too far below the top level link's hotspot area.  When a user's mouse is a hairline off the hotspot region, your submenu closes.   Incidentally, the mobile hamburger icon does not work at all for me.  This is not a good menu.  I would not use it.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 04, 2018 Oct 04, 2018

Copy link to clipboard

Copied

yes, your suggestion the sub-menu is spaced too far below the link's hotspot area certainly fits with the user-experience.  Any idea what I would need to alter?  Remove some padding on an element maybe?  BTW you suggest it's not a good menu to use but it's a bootstrap menu I got from DW's Insert Bootstrap Component menu, I thought you were a BS supporter, not sure why it's not usable.  I know the hamburger menu doesn't work, I'm hoping I just need to add a media-query

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 04, 2018 Oct 04, 2018

Copy link to clipboard

Copied

To clarify, the basic Bootstrap drop-menu works on click just fine and as intended.   But the hack you're implementing for mouseover breaks the menu.  That's why I don't recommend using the hack. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 22, 2018 Sep 22, 2018

Copy link to clipboard

Copied

To answer your question, have a look at CSS :hover Selector

Having said that, I think that you should heed Nancy OShea​'s reply like I have.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 04, 2018 Oct 04, 2018

Copy link to clipboard

Copied

LATEST

higgsyd wrote

My site is http://v38.ancestry.higgsy.co.uk/index.php

I added a bootstrap navbar but then I found you had to click to open it and I wanted for it to expand on hover, so I added this over-ride code I found on the internet

.dropdown:hover>.dropdown-menu {

display: block;

}

and it seems to work, the only problem now is when you hover and it expands, if you move to pick an item and it closes before you can click it.  On the second or sometimes  third re-attempt it stays expanded ok and sub-items can be clicked.  Can you say why these random closures are happening? Many thanks

Not that I think using hover effects is a good idea as they won't work on mobile but you can use the bit of jquery below to hover over your top-level menu items to expose the sub-menu and close it again on mouseleave:

<script>

$(document).ready(function(){

$('.dropdown').mouseover(function(){

$('.dropdown-menu').css('display','none');

$(this).find('.dropdown-menu').css('display','block');

});

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

$(this).css('display','none');

});

});

</script>

Obviously you don't need the below if you use the script above:

.dropdown:hover>.dropdown-menu {

display: block;

}

You can also add a click event script to cater for mobile:

<script>

$(document).ready(function(){

$('.dropdown').click(function(){

$('.dropdown-menu').css('display','none');

$(this).find('.dropdown-menu').css('display','block');

});

});

</script>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines