css - 如何在导航栏品牌部分修复bulma导航栏下拉菜单
问题描述
我正在使用 bulma.io 框架来构建我的导航栏。我想在导航栏品牌部分放置一个下拉菜单,但是当我这样做时,它会在较小的屏幕上失败(扩展导航栏)。有没有办法在导航栏品牌部分允许下拉菜单?
<nav class="topmenu navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<!-- LOGO -->
<div class="navbar-item has-dropdown is-hoverable">
<a href="/index" class="navbar-link">
MyCompany
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/one">One</a>
<a class="navbar-item" href="/two">Two</a>
<a class="navbar-item" href="/three">Three</a>
</div>
</div>
<a role="button" class="navbar-burger burger" data-target="topmenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="topmenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/start">Start</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="/end">End</a>
</div>
</div>
解决方案
多亏了 Klaassiek,我才能让它工作。这是最终的工作 CSS。
@media screen and (max-width:1023px) {
.navbar-brand .navbar-dropdown.is-boxed {
border-radius: 6px;
border-top: none;
box-shadow: 0 8px 8px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
display: block;
opacity: 0;
pointer-events: none;
top: calc(100% + (-4px));
transform: translateY(-5px);
transition-duration: 86ms;
transition-property: opacity,transform;
}
.navbar-brand .navbar-dropdown {
background-color: #fff;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
left: 0;
min-width: 100%;
position: absolute;
top: 100%;
z-index: 20;
}
.navbar.is-spaced .navbar-brand .navbar-item.is-active .navbar-dropdown,
.navbar-brand .navbar-item.is-active .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-brand .navbar-item.is-hoverable:focus .navbar-dropdown,
.navbar-brand .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-brand .navbar-item.is-hoverable:focus-within .navbar-dropdown,
.navbar-brand .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-brand .navbar-item.is-hoverable:hover .navbar-dropdown,
.navbar-brand .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.navbar-brand .navbar-item.is-active .navbar-dropdown,
.navbar-brand .navbar-item.is-hoverable:focus .navbar-dropdown,
.navbar-brand .navbar-item.is-hoverable:focus-within .navbar-dropdown,
.navbar-brand .navbar-item.is-hoverable:hover .navbar-dropdown {
display: block;
}
}
推荐阅读
- java - 将图像的颜色更改为灰色
- php - WooCommerce Rest API“PUT”请求的致命错误(更新产品)
- drake - Drake 中的自动微分
- python - “ValueError:发现样本数量不一致的输入变量:[40, 10]”拆分数据的问题
- javascript - 将 Pixijs 粒子放置在对象内部的对象周围
- python - query.execute() python 上的不匹配异常
- javascript - 我的 Typescript React + Firebase 应用程序在刷新时注销
- reactjs - React Bootstrap Typeahead 的 CDN 版本问题
- java - 如何在 awt 中翻转 Graphics2D 对象(卡)
- javascript - res.locals.user 在 ejs 文件中不可用?