个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在试验 Material Design Web 1.0，我的问题是如何正确使用 mdc-menu-surface--anchor这样菜单就会出现在 TopAppBar 下面？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script type="module">
const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
menu.open = false;
document.getElementById('button1').addEventListener('click', () => menu.open = !menu.open);
</script>
</head>
<body>
<header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-menu-surface--anchor">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Test</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
</section>
</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"><span class="mdc-list-item__text">Homepage</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
</ul>
</div>
</header>
</body>
</html>
TopAppBar 看起来像这样:
但是当我打开汉堡菜单时，它看起来像:
我希望它会在汉堡包菜单/TopAppBar 下方打开。
奖励问题:如何让它在右侧的 TopAppBar 下方打开？
最佳答案
我不确定这是否是最好的解决方案，但目前我通过以下方式解决了这个问题:
<html lang="en">
<head>
[see above]
<style>
.my-top-app-bar
{
position: static !important;
}
</style>
</head>
<body>
<header class="mdc-top-app-bar my-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">TMS Archiv</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
</section>
</div>
</header>
<div class="mdc-menu-surface--anchor">
<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"><span class="mdc-list-item__text">Homepage</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
</ul>
</div>
</div>
</body>
</html>
重要的是以下几点:
关于html - Material Design Web 1.0 和 mdc-menu-surface--anchor 怎么样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55970381/
25
4
0
我正在用power designer创建一个物理模型，我想将默认值添加到我的Mysql表中。 有可能吗，有人加了默认值 ？ 谢谢 最佳答案 有可能，我发现“列属性”并不容易 方法如下: 选择表格(单击
关闭。这个问题是 opinion-based 。它目前不接受答案。 想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文来回答。 2年前关闭。 Improve t
我正在编写一个采用 Material Design 布局的应用程序，但找不到任何关于如何将对话框动画显示到屏幕上的指南。 这表明盒子应该只是“砰”的一声存在，但这似乎违背了设计的精神，包括动画和触觉。
我做了一个巨大的掠夺，不小心丢失了我的*.cs(设计文件)..我刚刚得到了*.designer文件。 我能否反过来，仅使用 .designer 文件以某种方式创 build 计文件 (*.cs)，还是
如果 Google 的关键字规划器向我显示关键字“Web Design [city-name]”获得约 880 次搜索，而“Website Design [city-name]”获得约 620 次搜索
首先，代码: $(document).ready(function() { $('#member_pattern').hide(); $('.add-member').click(function()
大型软件公司之一问了这个问题。我想出了一个简单的解决方案，我想知道其他人对该解决方案有何看法。 You are supposed to design an API and a backend for
在最新的 Material Design 文档 (https://www.google.com/design/spec/what-is-material/elevation-shadows.html#
背景 我正在对从我们的 RDBMS 数据库到 MongoDB 的转换进行原型(prototype)设计。在进行非规范化时，似乎我有两种选择，一种会导致许多(数百万)个小文档，另一种会导致更少(数十万)
Qt Designer (5.11.2) 在选择 QWebEngineView-Widget 时崩溃。 我正在创建一个对话框，以将其作为 .ui 文件包含在 QGIS 3 中。在表单中，我想使用 QW
我直接从 getmdl.io(组件页面)和所有设备(多台 PC、浏览器、手机等)复制代码，汉堡菜单不在标题中居中。我似乎无法隔离 css 中的菜单图标来重新对齐它。 getmdl.io 上的所有组件代
如何为 SPA 动态初始化 materialize design lite (google) 的组件？当我在 View 中动态初始化组件时，JS 没有初始化。正如我已经尝试过使用 componentH
我正在使用 Angular 4 构建一个 Web 应用程序。对于设计，我使用的是 Material Design lite。但是，我想使用 MDL 实现一个交互式轮播，它给我流畅的外观和感觉，并且与我
它看起来像 Polymer Starter Kit包含比 Material Design Lite 更多的组件，并且现在可用。由于两者都是符合 Material Design 理念的 Google 项
我在设置 mdl-textfield 样式时遇到了一些困难。 具体来说，设置 float 标签的大小和颜色，以及按下输入字段后动画的高度和颜色。 实际上，这是我从组件列表中获取的起点。 https:/
所以，好友列表的现代概念: 假设我们有一个名为 Person 的表。现在，那个 Person 需要有很多伙伴(其中每个伙伴也在 person 类中)。构建关系的最明显方法是通过连接表。即 buddyI
如何在导航中创建子菜单项？ Link Link Link Link 我不能用 用它。什么是正确的类？ 最佳答案 MDL 似乎还没有原生支持子菜单。 然而
我想知道我应该遵循哪些步骤来解决设计自动售货机等问题并提出许多设计文档(如用例、序列图、类图)。是否有任何我可以阅读的来源/链接，其中讨论了如何逐步进行。 谢谢。 最佳答案 我不确定是否有任何普遍接受
早在 10 月份，Kristopher Johnson 就询问了 Accounting Software Design Patterns 他收到了几个答案，但基本上都是一样的，都指向Martin Fo
我一直在为我们的产品开发一些组件，其中之一是基于流布局面板。 我想做的是为它提供一个自定义设计器，但不会丢失其默认设计器 (System.Windows.Forms.Design.FlowLayout
我是一名优秀的程序员,十分优秀！