Develop Reference

How to add menu item to Material UI Card

I have the following example:
https://codesandbox.io/s/material-ui-card-styling-example-lcup6?fontsize=14
I just wanted to add some menu e.g. Edit, Delete to the 3 dots menu link, but could not succeeded. Tried to add menu items, etc to the IconButton and MoreVertIcon sections but nothing is changed.
So, how can I do this?

The example that you have linked does not have any onClick action tied to the menu link. It sounds like you will need a Menu element appear when the menu button is clicked. Take a look at the Menu component in the MUI docs.
As an example, I forked your example and added a menu.

WordPress Elementor Pro make nav menu widget items dropdown only

I'm recreating a Joomla site in WordPress with Elementor Pro. The site I'm recreating has a main menu bar with many of the menu items having sub-menu dropdowns. The nav menu widget has given me the ability to recreate this except for one important thing. The menu items for the Joomla site that have sub-menu dropdowns, don't themselves take you to a different page. They are only used to allow for the sub-menus to appear.
Here is an image to go along with the example below: nav-menu
So for example, if a menu item (e.g. "Donate") doesn't have a sub-menu dropdown, then clicking it will take you to its page (e.g. in this case the Donate page). But if a menu item (e.g. "Contact") does have a sub-menu dropdown, then clicking it will not take you to a different page, but the items in it's sub-menu dropdown (e.g. in this case "Visit" and "Employment") will take you to different pages.
As far as I can tell, the nav menu widget has no directly way for making a menu item be exclusively for allowing a dropdown sub-menu to appear. So I was wondering if there was a work around to allow for this.
The first thing I tried was adding this code to the custom css section for the nav menu widget:
selector .has-submenu {
pointer-events: none;
}
But this also disable the sub-menu dropdown.
The second thing I tried was creating an HTML widget with the following code:
<script>
var anchorsWithSubMenus = document.querySelectorAll(".has-submenu");
for (var i = 0; i < anchorsWithSubMenus.length; i++) {
anchorsWithSubMenus[i].href = "#"
}
</script>
But this doesn't seem to do anything. I think it's because the code executes before the nav menu HTML appears, but I'm not sure.

I realized under Appearance > Menus on my sites dashboard, I can add menu items that are Custom Links. So I added custom links that go to "#" and gave them the text that I needed.

Bootstrap menu is open when page is loaded

I've implemented into my website the Bootstrap dropdown menu and the issue is that when I load the page, then as the default statue is popped up dropdown menu. I am struggling with how to have this dropdown menu hidden when the page is loaded as default.
Here's the HTML structure:
Sign in
<div class="login_window dropdown-menu">
...
</div>
So, when I load the page, the window is displayed. When I click somewhere, then is hidden. When I click on it, then will be displayed again. That's ok.
But I am trying to have the window have hidden when I load the page. How to achieve that?
Thanks

add display:none in default css for the class you want to hide...then in jquery do
$("body").click(function(){
$('.divclass').css('display','block'); /*or $('.divclass').toggle() */
})

My guess is that you have the structure of your HTML wrong. Did you look at the example on bootstrap? http://getbootstrap.com/components/#dropdowns
You need to have a clickable element (button, div, span - whatever) that's never hidden. When you click that element it animates the visibility of a sibling or child element to show the menu items. Try using the code from the sample and simply replace the <li> values with your menu items. That should help you understand the required form.
There is no need to toggle visibility on your own.

Pop Up Menu onclick BottomBar Button Windows 8 Metro App

I want to have a popup menu once I click bottom bar button in windows 8 app, and pop up menu needs to be a multi-select, so that user can select multiple options and based on that I will need to refresh main screen. I need to implement this using Html and JavaScript.
Thanks.

The easiest option is probably to show a Flyout control from an AppBar button. The Flyout will let you compose the form you need (within guidelines), but something like a ListView with multiple select enabled might be what you're looking for.
See the HTML Flyout Sample to get started (scenario 6 shows a Flyout from the AppBar).

the better option will be using SettingsFlyout
<div data-win-control="WinJS.UI.SettingsFlyout"
aria-label="App Settings Flyout"
data-win-options="{settingsCommandId:'defaults',width:'wide'}">
make your custom html layout and then call it on button click event
WinJS.UI.SettingsFlyout.showSettings(ID,Path );
you will find the references here:
WinJS.UI.SettingsFlyout object
sample application : App settings sample

Toggle menu issue

I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.
On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.
I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.
Thank you in advance!

Here is my fiddle
all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.
** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu
** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.

This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.
You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.
Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.

If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.
ul.active {
display: block
}
ul.second_level {
display: none
}
This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).
Update:
It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).
If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.