Bulma-在桌面上强制垂直导航栏

Question

使用bulma，我想创建一个关注体育(棒球、篮球、网球、摔跤(的网站，但当我到达最后(按字母顺序是摔跤(时，导航栏上的项目太多(从左到右水平(，无法在桌面上正确显示。所以我想我可以使用菜单(垂直导航(，但它不会在移动设备上给我汉堡图标或类似的东西。我使用了这里的菜单示例。我想在手机上使用导航栏，通过媒体查询使用桌面菜单，类似

/** mobile **/
@media (max-width: 768px) {
.menu {
display: none;
}
}
/** desktop **/
@media (min-width: 1024px) and (max-width: 1215px) {
.navbar {
display: none;
}
}

但这仍然给我留下了两个独立的组成部分&链接、图标等列表。有没有办法强制bulma导航栏始终保持垂直？这样我就可以只使用一个组件而不是两个。。。

Answer 1

我和你遇到了同样的问题。我想要一个侧边栏，可以用作我的主菜单，在响应模式下显示时带有汉堡。

所以我重写了Bulma中的组件(这是侧菜单(：

• 我使用Bulma的SASS版本
• 我在Bulma构建中添加了一个extensions文件夹
• 我在其中添加了improved_sidebar.sass文件

这是我的代码，可能对你有帮助：

// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Aside improvements
// ––––––––––––––––––––––––––––––––––––––––––––––––––
$aside-width: 250px
$aside-right-padding: 30px
$aside-delta: $aside-width - $aside-right-padding
aside
display: block
box-sizing: border-box
position: fixed
top: 0
left: 0
max-width: $aside-width
height: 100%
padding:
top: 10px
bottom: 10px
left: 10px
right: $aside-right-padding
overflow-y: auto
// Initially hidden in mobile mode. Needs to be flagged as "is-active" to be shown
// It will appear OVER the page content
+touch
left: -$aside-delta
&.is-active
left: 0
z-index: 900

// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Clickable burger in mobile mode
// ––––––––––––––––––––––––––––––––––––––––––––––––––
$burger-dimensions: 25px
#aside-burger
display: none
+touch
position: absolute
display: block
top: calc(50% - calc(#{$burger-dimensions} / 2))
right: calc(calc(#{$aside-right-padding} - #{$burger-dimensions}) / 2)
width: $burger-dimensions
height: $burger-dimensions
color: white
i
position: relative
z-index: 1000
font-size: 40px !important
cursor: pointer
&:hover
color: $info
&:active
color: $danger

// Rotate the icon when the sidebar is toggled
aside.is-active
i
transform: rotate(180deg)

// ––––––––––––––––––––––––––––––––––––––––––––––––––
// Utilities
// ––––––––––––––––––––––––––––––––––––––––––––––––––
// The sidebar is natively visible only in desktop
// Therefore we move tagged items to the right, of the same amount
.adjust-with-sidebar
+touch
margin-left: $aside-right-padding
+desktop
margin-left: $aside-width

这是我的HTML模板(我使用jinja2和vuejs作为模板(：

{% load static %}
<aside class="menu" :class="{'is-active': activeSidebar}">
<div id="aside-burger" @click="activeSidebar = !activeSidebar">
<span class="icon" >
<i class="fas fa-caret-right"></i>
</span>
</div>
<figure class="image has-text-centered">
<a href="{% url 'home' %}">
<img id="menu-logo" src="/media/core/logo.png" alt="Logo">
</a>
</figure>
<p class="menu-label">Exemples</p>
<ul class="menu-list">
<li><a id="example" href="{% url 'example' %}">API Exemple</a></li>
</ul>
<p class="menu-label">Mon Compte</p>
<ul class="menu-list">
<li><a id="account-info" href="{% url 'user_account' %}">Mes informations</a></li>
<li><a id="logout" @click.prevent="submitLogoutForm">Déconnexion</a></li>
</ul>
</aside>

Answer 2

我认为你可以强制导航栏垂直，而不是使用菜单栏，因为Bulma中的菜单栏是垂直的，实际上不会用汉堡来扩展或压缩(导航栏使用汉堡(。所以，看看W3Schools的这篇文章，他们在文章中谈到了用CSS垂直地强制导航栏。此外，当你用导航条汉堡打开Bulma的导航条时，它们可以覆盖整个屏幕。这是Bulma的一个特性，所以我不确定你是否想要这样——你可能需要在这里和那里调整一些CSS。