Currently menu items expanded by clicking on arrow at right side. But I want to expand the list by clicking the item name. For example, in below image, I need to expand/collapse list by clicking on Settings instead of clicking on marked arrow head.
By default, it's only possible to expand the side navigation menu children submenu by clicking on the corresponding down arrow.
Maxime Tremblay described a solution and a demo.
Related
I have been working on wordpress website and the theme am using used bootstrap 4 wp_bootstrap_navwalker.php for menu and my problem is the sub-menu doesn't display as expected, one is above the other so i follow Avoid dropdown menu close on click inside answer and and there is no change. is their any way i should edit this
Thank you
sub-menu is inside the parent menu with black color and when hover green color appear
I have a pop-out navigation menu that appears on smaller screens when an 'open menu' button is clicked, tapped or keyed with enter or spacebar. (Javascript, CSS and HTML; no jQuery).
The navigation uses divs, rather than an unordered list, with a <nav> container but the problem outlined below happens whether the menu is in divs or an unordered list.
If a keyboard user is tabbing, opens the pop-out, continues tabbing, the user is cycled round the trapped area until either a navigation link is opened with the enter/spacebar keys or the pop-out is closed by using the enter/spacebar on the 'close button' or the Escape key is pressed (with thanks to Graham Ritchie for this code).
It works fine in general. See this Codepen that works.
BUT, if the last item in the menu is both a direct link and a parent with a sub-menu, then the trapping does not work and anyone tabbing in the pop-out menu finds themselves in the browser's address bar area outside the website itself or, in the case of this Codepen where it is not working correctly, the tabbing moves down to the 'Console, Assets, Comments...' area at the bottom of the browser.
Can anyone explain why this is happening and what I need to do to resolve it? Thank you.
I am building a page where I have to panes (left/right). Left pane will show the list of items and right pane will show the detail of selected item from left pane. However, when same page being displayed in Mobile it should show only List of item first. When selected any item in the list, than list pane should be hidden and detail pane should be showing. Detail pane will have a back button, which show the Left(list pane) and hide the detail pane.
Question: How can I achieve this scenario in twitter bootstrap?
Okay so you can hide the panel right panel initially by using .hidden-md hidden-lg, but after that you would need to enable things and hide them again with JS .toggle() or just literally .removeClass("...") and .addClass("...")
I have a Bootstrap navbar on my site with a collapsed menu that toggles on/off. I would like it so that when a user clicks one of the links in the menu (which is a dropdown, by the way), that active link should jump to the top of the menu. This way they can see a more expanded list of the dropdown items.
Here's a regular Bootstrap navbar. I want that when I click on "Dropdown", bring that active link to the top under "project name".
If I understand what you want to do correctly, from a user interface point of view I would strongly recommend against doing this. This is highly unexpected behaviour for the user who is likely to get confused as to why the thing they just tapped has moved. It could also cause mistakes from people opening the menu, then (since their finger is probably still close to the screen) accidentally clicking one of the menu items and being moved to a new page.
If you are worried about users not being able to see all the items maybe you should consider a different menu interface for your mobile devices such as an off-canvas menu (click the little 'toggle nav' button rather than the hamburner menu to see the off canvas menu). This would give you more space to play with for your menu items.
Basically, I am trying to get the menu to disappear when clicking a link. Here is an example site that demonstrates my problem:
http://themeforest.net/item/square-responsive-admin-app-with-angularjs/full_screen_preview/7511722
click the hamburger symbol
hover over 'UI Kit'
Click multiple links in the sub menu
As you can see when you click any of the links, the sub menu does not disappear. How can I make it disappear. I am using angular as my front end framework.