我在一个项目中使用Foundation,在顶部,我有一个按钮来打开菜单,徽标和其他图标,如图所示。
但是,现在我相信我的下拉菜单默认情况下保持打开状态会更好。
但是我尝试进行更改,但是每次刷新页面时,菜单都会显示:无。这是我菜单的代码:
<div class="top-bar-container" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky>
<div class="top-bar" data-responsive-toggle="responsive-menu" data-hide-for="">
<button class="menu-icon" type="button" data-toggle></button>
<a >
<img class="logo" src="./assets/img/navigation/logoWhite.png" alt="" />
</a>
<div class="right">
<a >
<i class="fa fa-shopping-cart fa-2x" style="color:white;"><span class="badge">2</span></i>
</a>
<a >
<i class="fa fa-user fa-2x" style="color:white;"></i>
</a>
</div>
</div>
</div>
</div>
<div class="top-bar topbar-center-logo" data-options="marginTop:0;" style="width:100%" id="responsive-menu">
<ul class="menu dropdown vertical medium-horizontal menu-hover-lines" data-dropdown-menu data-auto-height="true"
data-animate-height="true">
<li><a >Dicas</a></li>
<li><a >Produtos</a></li>
<li><a >Sobre nós</a></li>
<li><a >Conta</a></li>
</ul>
</div>
.top-bar-container .sticky.sticky-topbar.is-stuck.is-at-top {
margin-top: 0 !important;
}
.top-bar {
background-color: $primary-color;
display: flex;
align-items: center;
width: 100%;
//transition: all 0.5s ease;
.menu-icon{
margin-left: 10px;
}
.right{
display:flex;
justify-content:flex-end;
align-items:center;
margin-right:20px;
.badge{
background-color:$light-gray;
color:$primary-color;
}
}
img,
i {
margin: auto;
align-self: flex-start;
max-width: 210px;
padding: 5px;
}
}
.topbar-center-logo {
display: flex;
background: white;
position: fixed;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
z-index: 99;
.menu-hover-lines
{
text-align: center;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
transition: $menu-hover-lines-transition;
background-color: white;
> li
{
flex: 1 0 auto;
a
{
padding: 1rem;
color: black;
position: relative;
margin-left: 1rem;
}
}
a:before,
a::after {
height: $menu-hover-lines-border-width;
position: absolute;
content: '';
transition: $menu-hover-lines-transition;
background-color: #78c26d;
width: 0;
}
a::before {
top: 0;
left: 0;
}
a::after {
bottom: 0;
right: 0;
}
a:hover,
li.active > a {
color: $body-font-color;
transition: $menu-hover-lines-transition;
}
a:hover::before,
.active a::before,
a:hover::after,
.active a::after {
width: 100%;
}
}
}
提前谢谢