Material design for the web. How to set the position for a mdc.menu?
I will move the mdc-menu from the left, top corner to the right corner. 70px from top and 25px from the right.
Please take a look at my sreenshot. How can I change the element style.
Please take a look at my js code. Where I have to make the changes? In the css or in the javascript? The changes below have I done with the browser chrome.
element.style {
right: 25px;
top: 70px;
}
Here is the full html code.
<!DOCTYPE html>
<html>
<head>
<title>App Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<meta name="norobots" content="noindex, nofollow, noarchive">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- import Material Icons from Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href="src/css/styles.css">
</head>
<body class="mdc-typography">
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__header">
<h6 class="mdc-typography--headline6 mdc-drawer__title">Title</h6>
<hr class="mdc-list-divider">
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>
<span class="mdc-list-item__text">Email</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
<hr class="mdc-list-divider">
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download this page">file_download</a>
<button id="menu-button" class="material-icons mdc-top-app-bar__action-item" aria-label="Personal settings" alt="Personal settings">person</button>
</section>
</div>
</header>
</div>
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item" role="menuitem">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">person</i>
<span class="mdc-list-item__text">Profil</span>
</li>
<li class="mdc-list-item" role="menuitem">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
<span class="mdc-list-item__text">Settings</span>
</li>
<hr class="mdc-list-divider">
<li class="mdc-list-item" role="menuitem">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">exit_to_app</i>
<span class="mdc-list-item__text">Sign out</span>
</li>
</ul>
</div>
<main>
<h1 class="mdc-typography--headline1">title h1</h1>
<h2 class="mdc-typography--headline2">title h2</h2>
<h3 class="mdc-typography--headline3">title h3</h3>
<h4 class="mdc-typography--headline4">title h4</h4>
<h5 class="mdc-typography--headline5">title h5</h5>
<h6 class="mdc-typography--headline6">title h6</h6>
<p class="mdc-typography--subtitle1">subtitle 1</p>
<p class="mdc-typography--subtitle2">subtitle 2</p>
<p class="mdc-typography--body1">body 1</p>
<p class="mdc-typography--body2">body 2</p>
<p class="mdc-typography--button">button</p>
<p class="mdc-typography--caption">caption</p>
<p class="mdc-typography--overline">overline</p>
</main>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script>
const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('#app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
menu.setAnchorCorner(mdc.menu.Corner.BOTTOM_LEFT);
menu.open = false;
menu.setFixedPosition(true);
const btn = document.querySelector('#menu-button');
btn.addEventListener('click', () => {
menu.open = !menu.open;
});
</script>
</body>
</html>
