Question

也许你们可以帮助我。我正在尝试为我正在做的MVC项目制作一个菜单。我想要你使用bootstrap获得的功能，当它最小化时会变成一个汉堡包菜单。

但每次我尝试它失败，我尝试添加必要的引导代码。但首先没有正常工作，其次删除了我的所有CSS。

也许我根本不应该使用bootstrap。我想要的是当我使窗口变小时折叠的菜单，当我将其设置为我设置的尺寸时，它会展开。

我在菜单上设置了属性。所以我现在想要的是菜单变小然后返回主要尺寸。

你们可以帮助我吗？

    <header>
            <div id="navigation">
                <div class="arrows">
                    <span class="ar-left"></span>
                    <span class="ar-right"></span>
                    <span class="ar-left2"></span>
                    <span class="ar-right2"></span>
                </div>
                <div class="dark-color">
                    <div class="light-color">
                        <a href="#" id="logo" style="font-family: 'Segoe Print'">Test</a>
                        <nav>
                            <ul style="font-family: 'Segoe Print'">
                                <li><a href="../Home/Index" class="active-menu">Hem</a></li>
                                <li><a href="../One/Start">One</a></li>
                                <li><a href="../Two/Start">Two</a></li>
                                <li><a href="~/Three/Login">Log in</a></li>
                                <li><a href="#">five</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
</header>

提前致谢！

Answer 1

使用flexbox在屏幕较大时连续显示菜单。一旦它到达断点，显示hamb图标。我在这个例子中使用一些JQuery实现了一个，一旦点击它就可以工作。单击时，活动类将添加到ul上设置的主菜单类中，将样式更改为flex-direction：列。

$(".hamb").click(function(){
  $(".main-menu").toggleClass("active");
  $(".spanf ").toggleClass("span1 ");
  $(".spans ").toggleClass("span2 ");
  $(".spant ").toggleClass("span3 ");
});

nav{display: flex; background-color: #000000;}
.hamb {
  background: #000000;
  width: 75px;
  height: 100px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display:none;
}

.hamb span i {
  width: 45px;
  height: 10px;
  background: white;
  position: absolute;
  left: 25%;
}

.span1 .span2 .span3 i {
  position: absolute;
}

.hamb .spanf:nth-child(1) i {
  top: 20%;
}

.hamb .spans:nth-child(2) i {
  top: 40%;
}

.hamb .spant:nth-child(3) i {
  top: 60%;
}

.span1:nth-child(1) i {
  top: 40% !important;
  transform: rotate(45deg);
}

.span2:nth-child(2) i {
  left: 130px;
}

.span3:nth-child(3) i {
  top: 40% !important;
  transform: rotate(-45deg);
}

.main-menu{
  padding-left: 0;
  list-style:none;
  display: flex;
  width: 25%; 
  justify-content: space-around;
  background-color: #000000;
  animation: fadeIn 0.5s ease-in-out;
  border: 1px solid white;
  margin-left: 20px;
}
@keyframes fadeIn{
  0%{opacity: 0;}
  100%{opacity:1;}
}

.main-menu li {text-align: center; padding: 5px 0;}

.main-menu li a{color:white; text-decoration: none;}


@media (max-width: 768px){
  .hamb{
    display:block;
  }
  .main-menu{display:none;}
  .active {
  display:flex;
  flex-direction: column;

}
.main-menu li{border-bottom: 1px solid white;}
.main-menu li:nth-last-child(1){border-bottom: none;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
  <div class="arrows">
      <span class="ar-left"></span>
      <span class="ar-right"></span>
      <span class="ar-left2"></span>
      <span class="ar-right2"></span>
  </div>
  <div class="dark-color">
      <div class="light-color">
          <a href="#" id="logo" style="font-family: 'Segoe Print'">Test</a>
          <nav>
<div class="hamb"><span class="spanf"><i></i></span><span class="spans"><i></i></span><span class="spant"><i></i></span></div>
            
              <ul style="font-family: 'Segoe Print'" class="main-menu">
                  <li><a href="../Home/Index" class="active-menu">Hem</a></li>
                  <li><a href="../One/Start">One</a></li>
                  <li><a href="../Two/Start">Two</a></li>
                  <li><a href="~/Three/Login">Log in</a></li>
                  <li><a href="#">five</a></li>
              </ul>
          </nav>
      </div>
  </div>
</div>

制作折叠和扩展的菜单......不工作

1 个答案: