Question

您好我已经知道我可以添加固定到菜单类的位置，但这不起作用。我正在考虑将菜单与div大片分开，但我不确定它是否也能正常工作...... 任何人都可以帮我解决这个问题......

＆＃13;

            function changefu() {
              if (document.getElementById("large").classList == "large"){
                document.getElementById("large").classList.toggle("large2");
              }
              else{
                document.getElementById("large").className= "large" ;
              }
            }

＆＃13;

*{
  margin:0;
  padding:0;
}

body{
  display:block;
  overflow-x:hidden;
}

.large{
  display:inline-block;
  height:100%;
  width:106.5%;
  transform: translateX(-210px) translateY(0px) translateZ(0px);
  transition-duration: 1s;
  transition-property: all;
}

.large2{
  display:inline-block;
  height:100%;
  width:94.7%;
  transform: translateX(0px) translateY(0px) translateZ(0px);
}

.menu{
  float:left;
  width:200px;
  text-align:center;
  display:block;
  position:fixed;

}
ul{
  margin:0;
  list-style:none;
}
li{
  padding:10px;
  font-family:arial;
  font-weight:bold;
  font-size:18px
}

.bgimg{
  float:left;
  max-width:2025px;
  position:relative;
  left:210px;
  top:122px;
}
img{
  width:94%;
  float:left;
  display:block;
}

.res{
  
}

.topnav{
  heigth:100px;
  position:fixed;
  border-bottom: 2px solid gray;
  width:100%;
  background-color:white;
  z-index:1001 !important;
}

.topnav img{
  height:80px;
  width:50px;
  padding-left:25px;
  padding-top:20px;
  padding-bottom:20px;
  padding-right:25px;
  display:block;
}

.menubtn{
  font-size:30px; font-family:arial; display:block; padding-left:100px;
  padding-top:60px;
  width:120px;
  
}

＆＃13;

<body>
  <div class="topnav">
    <img src="http://logolagoon.com/wp-content/uploads/2013/11/Puppy-Logo.png" alt="logo">
    <div class="menubtn" onclick="changefu()"><a style="text-decoration:none; color:black;" href="#">☰ Menu</a></div>
  </div>
  <div id="large" class="large">
    <div id="sidenav" class="menu">   
      <ul>
        <li style="padding-top:300px;"><a style="text-decoration:none; color:black;" href="#">Home</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Cats</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Dogs</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Monkey</a></li>
      </ul>
    </div>
    <div class="bgimg">
      <img src="https://unsplash.it/1200/850/?random" alt="random">
      <img src="https://unsplash.it/1300/850/?random" alt="random">
      <img src="https://unsplash.it/1400/850/?random" alt="random">
      <img src="https://unsplash.it/1100/850/?random" alt="random">
      <img src="https://unsplash.it/1450/850/?random" alt="random">
    </div>
  </div>
</body>

＆＃13;

如何保持垂直导航固定而水平导航也固定？

0 个答案: