网站的材料设计。如何设置mdc.menu的位置？
网站的材料设计。如何设置mdc.menu的位置？
提问于 2019-06-16 18:41:12
网站的材料设计。如何设置mdc.menu的位置？
我将把mdc-menu从左上角移到右角。上边是70px，右边是25px。
请看一下我的截图。如何更改元素样式。
请看一下我的js代码。我必须在哪里进行更改？在css中还是在javascript中？下面的更改是我在浏览器chrome上做的。
element.style {
right: 25px;
top: 70px;
}下面是完整的html代码。
<!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>
回答 2
Stack Overflow用户
发布于 2020-01-26 00:49:55
您可以使用属性方法setAbsolutePosition()设置mdc-menu组件的位置，该方法有两个参数；第一:从顶部开始的位置为整数，第二为水平位置为n整数。
示例：
yourElement.setAbsoltuePosition(100,100)
这将从顶部开始设置yourElement 100px的位置，从左侧设置100px的位置。
您可以进一步阅读有关主题Here的更多信息
Stack Overflow用户
发布于 2020-10-21 02:56:13
尝试使用表面锚点将按钮与菜单一起包裹。您可能需要删除setAbsolutePosition方法，因为这可能会覆盖此功能。
这将自动将菜单锚定到包装的元素，例如您的按钮。
<div class="mdc-menu-surface--anchor">
<button id="menu-button" class="material-icons mdc-top-app-bar__action-item" aria-label="Personal settings" alt="Personal settings">person</button>
<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">Profile</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>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56618066
复制相关文章
相似问题
腾讯云开发者
