我正在尝试用两行制作导航栏:第一行用于二级菜单,第二行用于主菜单。我对 Bulma 还很陌生,寻找解决方案并不像 Bootstrap 那样容易。
到目前为止,这是我的 fiddle (HTML 结构)。
https://jsfiddle.net/wck1hj9r/4/
<div class="navbar nav-secondary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
Part of Larger Holding
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item">
Menu 1
</a>
<a class="navbar-item">
Menu 2
</a>
<div class="navbar-item field">
<p class="control has-icons-right">
<input class="input" type="search" placeholder="Search...">
<span class="icon is-small is-right">
</span>
</p>
</div>
</div>
</div>
</div> <!-- nav -->
<nav class="navbar nav-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item">
About
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Team
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Management
</a>
<a class="navbar-item">
Experts
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Apply!
</a>
</div>
</div>
<a class="navbar-item">
Articles
</a>
</div>
</div>
</nav>
可以看出,到目前为止我的解决方案是制作两个 Bulma 导航栏。
然后我想让移动布局看起来像这样。搜索输入被隐藏,搜索图标出现在第二行。第二行的链接被隐藏,取而代之的是汉堡菜单。同时,第一行的链接仍然可见。
我的问题可能有两个方面:
- 我不确定这个 HTML 结构,因为它似乎是多余的?我如何最好地构建它?
- 根据结构,我应该如何使移动布局如我所解释的那样出现?
有什么指导方针吗?
最佳答案
这里发生了很多事情!所以,如果我理解,你想要导航栏汉堡打开两个导航栏元素,对吗?
1) 首先,我看到你的 navbar-end
只出现在你的导航栏元素之前。您希望在您的元素之后。
bool 玛的例子:
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
2) NavBar - 这是 Bulma 文档中的一段:
<a role="button" class="navbar-burger" data-target="nav-menu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
一定要留下三个 <span>
标签——它们成为汉堡的三行。
3) 然后,这是非常酷的部分 - 要真正让导航栏的行为在点击时切换,您需要在“NavBar”之后添加一些在文档部分中指定的 JS菜单”主题(名为“JavaScript Toggle”的蓝色部分:https://bulma.io/documentation/components/navbar/。有几种方法可以为该功能创建 JS,但文档的工作方式与我编写它的方式一样好。请务必在 <script>
标签之间添加 JS你的主要 HTML 文件!
希望对您有所帮助!阅读我在此答案中链接的 Bulma 文档部分。他们确实很好地解释了使用修饰符来帮助处理常规 HTML 代码的术语!
关于css - Bulma:尝试用两行制作导航栏,在移动设备中,第一行的搜索输入移动到第二行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55438098/