I was wondering if its possible to recreate a shiny-dashboard like menu in flexdashboard?
I'm using flexdashboard with crosstalk. In the current setting I'm having too many inputs in the sidebar. So basically, I'd like hide them like submenu items in foldable menu items.
Any ideas how I can pull this off? I'm guessing its possible to use external css/bootstrap elements.
Many thanks
Related
I have an application that displays a list of items. Each item has a cluster of action buttons visible: Move, Copy, Delete.
I originally put this in a <nav>, but I don't think that's right: These aren't links; we're not navigating anywhere.
I looked at the menu and menubar roles, but those seem specifically tailored to the kind of menu that has horizontal and vertical navigation to dropdowns and submenus. The docs on the menu role seem to require keyboard nav and a bunch of considerations that aren't necessary for a few buttons.
Is it fine to just use menu and menuitem and call it complete? Or should I move on from that and use something like region instead?
Only use menu related roles if you're going to support left/right arrow key navigation.
If you have a "toolbar" of buttons and there are a lot of buttons, then it can be helpful if the toolbar is only one tab stop so that the user can easily navigate past the toolbar to the rest of the page. When doing so, navigating between the buttons within the toolbar requires the left/right arrow keys. Follow the toolbar design pattern if you go that approach. But you only have 3 buttons so a toolbar might be overkill.
It sounds like you have a group of buttons that don't necessarily need to be a toolbar. They're just grouped together. I agree that <nav> is not appropriate because the buttons are not for navigation. Is there a visible label grouping the buttons together? If so, then that group label would be helpful to convey to assistive technology users such as screen reader users. In that case, a region would be good as long as it has a label pointing to the group label.
So if you had something like this:
<span>Actions</span>
<button>Move</button>
<button>Copy</button>
<button>Delete</button>
I would
change the <span> to a heading and give it an ID
add a container (<div>) around the buttons and give it a region role and an aria-labelledby pointing to the heading
<h3 id="foo">Actions</h3>
<div role="region" aria-labelledby="foo">
<button>Move</button>
<button>Copy</button>
<button>Delete</button>
</div>
when i click on the arrow or the name the list drops down
this is how the expanded list looks like
how do I get this type of collapsible list using html and CSS
I tried it with details and summary tags but it puts the list further away from the other normal lists is there any other way to achieve it.
The question is already answered on stackoverflow and on the internet. Make sure to do some research before asking.
Here are some links: 1. Link 1
2. Link 2
You can take some ideas from these two and make your own custom dropdown.
I'm trying to use "CSS Gooey Menu" posted here:
codepen.io/lbebber/pen/pvwZJp.
I want to make multiple menus on the same page, but while I repeat the menu code and click on the new menu it still shows the first menu items as seen on the picture:
What can I do to get over this problem?
I am trying to edit my wordpress page to make every menu item at the top of the page two lines long with the top line being a single word (ie: Home, About, etc.) and another line in a different font underneath each item (ie: "Read about us" underneath "About").
Here is an example of what I mean:
http://images.sixrevisions.com/2009/04/13-26_css_block_menu.png
I am aware that this is achieved in some way by using the 'Description' box on the Wordpress menu screen, and I have checked the 'show descriptions' box, but I'm unable to get it to display correctly.
Any help is greatly appreciated!
You do this by creating a custom walker which extends the Walker_Nav_Menu class - here's a good tutorial on it;
http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output
I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.
What should happen is:
1) When hovering over a menu item, it should be highlighted by using a different image (this works fine).
2) When hovering over a sub-menu item, the parent menu item should be highlighted.
Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.
A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/
The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.
Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).
TL;DR; version: this fiddle shows the answer.
I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.
Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.
Now, how does it work?
The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.
The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.
Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.