Semantic UI响应式菜单开发：桌面与移动端菜单切换实现需求

Hey there! Let's get your responsive desktop and mobile menu set up properly. Here's a complete breakdown of the code and how to control visibility across screen sizes:

HTML Structure #

First, we'll define both menu structures—one for desktop, another for the mobile vertical sidebar.

Desktop Menu #

This is your standard horizontal menu for larger screens:

<div class="ui borderless stackable container main menu">
  <!-- Add your desktop navigation items here -->
  <a class="item" href="#">Home</a>
  <a class="item" href="#">About</a>
  <a class="item" href="#">Services</a>
  <a class="item" href="#">Contact</a>
</div>

Mobile Vertical Sidebar Menu #

This fixed sidebar will be used for mobile devices:

<div class="ui container fixed secondary menu">
  <!-- Add your mobile navigation items here -->
  <a class="item" href="#">Home</a>
  <a class="item" href="#">About</a>
  <a class="item" href="#">Services</a>
  <a class="item" href="#">Contact</a>
</div>

CSS for Styling & Responsive Visibility #

We'll use CSS to style the menus and media queries to toggle their display based on screen size. I've completed the truncated CSS you provided and added mobile-specific styles:

/* Desktop menu styling */
.main.menu { 
  margin-top: 4em; 
  border-radius: 0; 
  border: none; 
  box-shadow: none; 
  transition: box-shadow 0.5s ease, padding 0.5s ease ; 
}

/* Hide mobile menu by default */
.secondary.menu { 
  display: none !important; 
  /* Mobile sidebar styles: fixed to left, full height, vertical layout */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 250px;
  flex-direction: column;
  background-color: #fff;
  z-index: 1000; /* Ensure it sits above other content */
}

/* Media query: Switch menus on mobile screens (adjust breakpoint as needed) */
@media only screen and (max-width: 768px) {
  /* Hide desktop menu on mobile */
  .main.menu {
    display: none !important;
  }
  
  /* Show mobile vertical sidebar */
  .secondary.menu {
    display: flex !important; /* Flex ensures vertical alignment of items */
  }
}

Quick Note #

If you want to add a hamburger toggle button to show/hide the mobile sidebar (instead of displaying it by default on mobile), you can use a simple JavaScript snippet to toggle the display property of .secondary.menu when the button is clicked.

内容的提问来源于stack exchange，提问作者Farandole