Question

我将拥有不同的桌面和移动菜单布局。我的桌面菜单使用下拉菜单，但我希望移动菜单只是一个没有下拉菜单的垂直列表。我尝试创建桌面版本和移动版本，希望可以在两者之间进行切换，但这就是我遇到的问题。如何在CSS中实现呢？ -如果那是正确的地方。

桌面菜单

Hide the link that should open and close the topnav on small screens */
 .topnav .icon {
    display: none;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

	.leftcolumn, .rightcolumn {
        display: block;
        width: 100%;
        padding: 0;

    }

}


/* Responsive layout - when the screen is less than 600px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
.topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }	
	
}

<div class="topnav_desktop" id="myTopnav">
  <a href="index.html">Home</a>
    <div class="dropdown">
		<button class="dropbtn">History
            <i class="fa fa-caret-down" ></i>
         </button>
		 <div class="dropdown-content">
            <a href="history.php">BSAOC</a>
            <a href="bsa.php">BSA Factory</a>
            <a href="the_star.php">The Star</a>
         </div>
	</div>
	<a href="the_star.php">The Star</a>
	<div class="dropdown">
	     <button class="dropbtn">Club Services
            <i class="fa fa-caret-down" ></i>
         </button>
		  <div class="dropdown-content">
            <a href="membership.php">Membership</a>
            <a href="machine_dating.php">Machine Dating</a>
			<a href="memberarea.php">Members Area</a>
			<a href="forum.php">Forum</a>
			<a href="links.php">Links</a>
		 </div>
	</div>
  <a href="contact.php">Contact Us</a>
  <a href="memberarea.php" style="float:right">Login</a>
  <a h<a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Mobile menu

<div class="topnav_mobile" id="Topnav">
  <a href="index.html">Home</a>
  <a href="history.php">BSAOC</a>
  <a href="bsa.php">BSA Factory</a>
  <a href="the_star.php">The Star</a>
  <a href="the_star.php">The Star</a>
  <a href="membership.php">Membership</a>
  <a href="machine_dating.php">Machine Dating</a>
  <a href="memberarea.php">Members Area</a>
  <a href="forum.php">Forum</a>
  <a href="links.php">Links</a>
  <a href="contact.php">Contact Us</a>
  <a href="memberarea.php" style="float:right">Login</a>
  <a h<a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Answer 1

在样式表中的 CSS 下添加

添加将解决您的问题。谢谢

.topnav_mobile {
  display: none;
}

@media only screen and (max-width: 768px) {
  .topnav_desktop {
    display: none;
  }
  .topnav_mobile {
    display: block;
  }
}

不同的桌面和移动导航栏

1 个答案: