Django开发：创建分栏样式不同的响应式导航栏并添加搜索按钮

Got it, let's break down how to solve both of your navbar needs in Django—split into two stylistically distinct sections, plus adding a search button to your responsive dropdown menu. Here's a step-by-step implementation:

First, we'll split your existing navbar into two containers (left and right) so we can apply unique styles to each. We'll integrate this with your existing structure and add the search button at the same time.

Updated HTML (Django Template) #

<nav class="navbarSection">
  <div class="topnav" id="myTopnav">
    <!-- 左侧导航区域：样式更突出 -->
    <div class="nav-left">
      <a href="#home" class="active">Home</a>
      <a href="{% url 'chi_siamo' %}">Chi Siamo e Cosa Facciamo</a>
    </div>
    <!-- 右侧导航区域：包含搜索功能和其他链接 -->
    <div class="nav-right">
      <a href="{% url 'storia_gabriella' %}">Storia di Gabriella</a>
      <!-- 搜索组件 -->
      <div class="search-container">
        <input type="text" placeholder="Cerca..." id="searchInput">
        <button type="button" id="searchBtn">🔍</button>
      </div>
      <!-- 响应式下拉菜单按钮 -->
      <a href="javascript:void(0);" class="icon" onclick="toggleNav()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
  </div>
</nav>

Note: I used Django's {% url %} template tag here for better maintainability—replace the view names with your actual ones.

CSS (Responsive + Sectioned Styles) #

Add this to your static CSS file (make sure you load it in your Django template with {% static %}):

/* 基础导航栏容器 */
.navbarSection {
  background-color: #f0f2f5;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* 左侧导航项样式 */
.nav-left a {
  color: #1a73e8;
  font-weight: 600;
  padding: 12px 18px;
  text-decoration: none;
  font-size: 16px;
  transition: background 0.3s ease;
}

.nav-left a:hover {
  background-color: rgba(26, 115, 232, 0.1);
  border-radius: 4px;
}

.nav-left a.active {
  background-color: #1a73e8;
  color: white;
  border-radius: 4px;
}

/* 右侧导航项样式 */
.nav-right a {
  color: #5f6368;
  padding: 12px 18px;
  text-decoration: none;
  font-size: 16px;
  transition: background 0.3s ease;
}

.nav-right a:hover {
  background-color: rgba(95, 99, 104, 0.1);
  border-radius: 4px;
}

/* 搜索容器样式 */
.search-container {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}

.search-container input {
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid #dadce0;
  border-radius: 24px 0 0 24px;
  outline: none;
  width: 200px;
}

.search-container button {
  padding: 8px 14px;
  background-color: #1a73e8;
  border: none;
  border-radius: 0 24px 24px 0;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-container button:hover {
  background-color: #1557b0;
}

/* 默认隐藏响应式菜单按钮 */
.topnav .icon {
  display: none;
}

/* 响应式逻辑：屏幕宽度 < 768px 时转为下拉菜单 */
@media screen and (max-width: 768px) {
  .topnav {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .nav-left, .nav-right {
    width: 100%;
  }
  
  /* 隐藏非首项链接和搜索框 */
  .topnav .nav-left a:not(:first-child),
  .topnav .nav-right a,
  .search-container {
    display: none;
  }
  
  /* 显示下拉按钮 */
  .topnav a.icon {
    display: block;
    position: absolute;
    right: 1.5rem;
    top: 1.25rem;
  }
  
  /* 响应式展开后的样式 */
  .topnav.responsive {
    position: relative;
  }
  
  .topnav.responsive .nav-left a,
  .topnav.responsive .nav-right a,
  .topnav.responsive .search-container {
    display: block;
    text-align: left;
    margin: 8px 0;
  }
  
  .topnav.responsive .search-container {
    margin: 12px 0;
    width: 100%;
  }
  
  .topnav.responsive .search-container input {
    width: calc(100% - 50px);
  }
}

JavaScript (Toggle Menu + Search Functionality) #

Add this script either at the end of your template or in a static JS file:

// 切换响应式导航菜单
function toggleNav() {
  const navbar = document.getElementById("myTopnav");
  navbar.classList.toggle("responsive");
}

// 搜索按钮功能
document.getElementById("searchBtn").addEventListener("click", function() {
  const query = document.getElementById("searchInput").value.trim();
  if (query) {
    // 这里替换成你的Django搜索视图URL
    window.location.href = `/search/?q=${encodeURIComponent(query)}`;
  }
});

// 支持回车触发搜索
document.getElementById("searchInput").addEventListener("keypress", function(e) {
  if (e.key === "Enter") {
    document.getElementById("searchBtn").click();
  }
});

If you just need to add the search button to your existing setup without splitting the navbar, you can take the search-container div from the HTML above and place it inside your .topnav element. Then add the corresponding CSS (search container styles + media query adjustments) and JavaScript search logic from the code above—it will seamlessly integrate with your existing media query dropdown.

Quick Setup for Existing Navbar #

1. Insert the search container into your .topnav:

<div class="search-container">
  <input type="text" placeholder="Cerca..." id="searchInput">
  <button type="button" id="searchBtn">🔍</button>
</div>

2. Add the search CSS styles and update your media query to handle hiding/showing the search container on small screens.
3. Add the JavaScript search functionality.

内容的提问来源于stack exchange，提问作者Marco Giuseppe de Pinto