问题标签 [sidenav]

如果我有以下内容，则链接文本将漂亮地换行到下一行：

但是，如果我添加词缀，文本将保持在同一行并重叠到主要内容列上：

有没有办法用css解决这个问题？另外，我可以在不编辑当前 CSS 的情况下做到这一点吗？

这是一个演示溢出的小提琴： https ://jsfiddle.net/75nLbwyb/

我在网站上工作。我将此页面中的代码https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav用于我的 sidenav 容器。它适用于我，但只能离线或关闭我的 AdGuard。

有什么方法可以在运行 AdGuard 的网页上的服务器上显示它。

所以我使用引导程序来构建一个带有侧导航栏的仪表板。当导航栏打开时，容器内容被推到右侧并移出屏幕。我希望调整整个容器的大小以适应屏幕。所以无论导航栏是打开还是折叠，容器都应该是完全可见的。是否有一个引导 css 类我可以添加到正文或容器来解决该问题？

我正在关注 Youtube 上 Traversy Media 的题为“从头开始的响应式 HTML 和 CSS 侧边菜单”的教程（我会因为没有足够的声誉而发布链接），但我的侧导航存在一些问题。请注意在我单击左上角的 openSlideMenu() 图标之前与单击它时的显示方式。我一直遵循老师的代码，但界面上似乎至少有4个问题。

1. 有一个打开的标签符号位于 3 栏图标附近，无论菜单打开还是关闭，它都会保留。

2. 单击打开时，侧导航远离页面左侧，在菜单和页面左侧之间创建了一个很大的空白间隙，不应存在间隙。

3. 侧导航越过标题文本“响应式侧菜单”，从而阻止了文本的“e 菜单”部分，而标题文本应在侧导航移动时响应并移动，如教程中所述。

4. 侧边导航中的 closeMenuButton() 的位置直接位于元素上方，而它应该位于右侧角落。

我的 HTML/Javascript 代码：

此外，老师有他在 Youtube 上的视频描述中生成的代码，您可以通过搜索“从头开始的响应式 HTML 和 CSS 侧边菜单”找到第一个结果。

我有测试项目 AngularJS 和 .net https://github.com/HelenSPR/TestAngularjsFabricjs

我将 sidenav 创建为https://material.angularjs.org/1.1.4/demo/sidenav但我的 sidenav 显示为行而不是列，此 sidenav 不会隐藏。

我究竟做错了什么？

我不完全确定如何表达这个问题，但我会试一试。

我有一个带有侧面导航菜单的网站。当菜单打开时，正文内容被推到屏幕外，使文本不可读。我想知道我需要设置什么 css 属性才能使文本溢出到下一行。

这方面的一个例子可以在W3Schools中看到。打开菜单时，文本不会消失在屏幕后面。

CSS

HTML

JS

我在关闭材质导航栏（）时遇到了一个奇怪的动画问题。当我打开导航栏时，动画效果很好，但是当我关闭它时，关闭它的动画似乎没有播放。相反，它只是在“动画时间”结束时散开。但是，关闭动画在打开导航栏时起作用，并且在完成之前将其关闭。在动画/过渡完成之前快速切换打开和关闭使其按预期工作。它看起来像这样：

动画无法关闭

它应该像这样工作：

https://stackblitz.com/angular/perxaynqger?file=app%2Fsidenav-responsive-example.ts

代码见下文

app.module.ts

app.component.ts

app.comonent.html

我一直在寻找解决方案，所以任何帮助都会很棒。

我正在使用 Angular Material 2，我想通过按下 a 中的按钮或仅在对话框关闭时使用.open()a 的方法。mat-sidenavmat-dialog

根据文档，我认为我可以mat-sidenav用（或其他东西）标记元素，#sidenav然后放入(click)="sidenav.open()"按钮元素。但是，它不起作用（我读到它可能与不同的 z 平面有关？）。

它看起来像这样：

sidenav.html

对话框.html

对话框打开和关闭都很好，sidenav 也是如此（通过不同的按钮）。

我确定有一种方法可以从@component 打开sidenav，但在尝试了几种方法后我还没有弄清楚如何。

谢谢

编辑：我应该说我对 Angular 2+ 还很陌生，所以如果你能包含一个带有答案的代码片段，我会很感激的。

所以我使用了一个带有文本框的 sidenav，类似于 w3schools 中的示例代码：

我想在 sidenav 打开时自动对焦文本框。使用autofocus = "autofocus"似乎不起作用（就像我在上面的示例中尝试的那样）。我还希望它与我在代码中定义的 keyup 函数结合使用（按“esc”关闭，“s”打开）。提前致谢。

我有一个包含 layout.component 的 Angular 2 应用程序。在 layout.component.html 我有一个侧边菜单，在路由器插座部分的侧边菜单中，我运行我的其他组件。代码是这样的：

在侧导航中，我有一些项目来运行组件的状态。但是当我点击其中一个时，侧导航会重新加载，有时它无法获取项目。我怎样才能只重新加载路由器插座而不是侧导航？

这是路由代码：