基础:默认情况下打开下拉菜单

时间:2019-07-30 10:20:56

标签: html css drop-down-menu zurb-foundation dropdown

我在一个项目中使用Foundation,在顶部,我有一个按钮来打开菜单,徽标和其他图标,如图所示。

enter image description here

但是,现在我相信我的下拉菜单默认情况下保持打开状态会更好。

enter image description here

但是我尝试进行更改,但是每次刷新页面时,菜单都会显示:无。这是我菜单的代码:

 <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%;
}

}
}

提前谢谢

0 个答案:

没有答案