Highlighted

navigation items close before you can click on them

Participant ,
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

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>

TOPICS
Create menus in Dreamweaver

Views

932

Likes

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

navigation items close before you can click on them

Participant ,
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

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>

TOPICS
Create menus in Dreamweaver

Views

933

Likes

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
Sep 22, 2018 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Sep 22, 2018 1
Mentor ,
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)

Likes

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
Reply
Loading...
Sep 23, 2018 0
Participant ,
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

Likes

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
Reply
Loading...
Sep 30, 2018 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Sep 30, 2018 0
Participant ,
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

Likes

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
Reply
Loading...
Oct 04, 2018 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Oct 04, 2018 1
Adobe Community Professional ,
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.


Ben

Likes

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
Reply
Loading...
Sep 22, 2018 1
LEGEND ,
Oct 04, 2018

Copy link to clipboard

Copied

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>

Likes

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
Reply
Loading...
Oct 04, 2018 1