Cordova项目：如何用纯HTML和CSS创建含输入元素的导航抽屉？

Got it, let's build that custom navigation drawer for your Cordova project! Since <select>/<option> can't hold interactive inputs like text boxes or buttons, we'll create a fully custom drawer using just HTML and CSS that integrates seamlessly with your floating panel. No JavaScript required for basic toggle functionality—we'll use the CSS checkbox hack to control visibility.

HTML Structure #

We'll wrap everything in your existing floating panel, adding a toggle trigger, hidden checkbox, and the drawer container with your input elements:

<!-- Floating Panel Container -->
<div class="floating-panel">
  <!-- Drawer Toggle Trigger -->
  <label for="drawer-toggle" class="drawer-trigger">☰ Open Navigation Drawer</label>
  
  <!-- Hidden Checkbox for Toggle Logic -->
  <input type="checkbox" id="drawer-toggle" class="drawer-toggle">
  
  <!-- Navigation Drawer with Inputs -->
  <div class="navigation-drawer">
    <div class="drawer-content">
      <h3>Drawer Controls</h3>
      
      <!-- Text Input Example -->
      <div class="drawer-item">
        <label for="search">Search:</label>
        <input type="text" id="search" placeholder="Enter keywords...">
      </div>
      
      <!-- Button Example -->
      <div class="drawer-item">
        <button class="drawer-btn">Submit Query</button>
      </div>
      
      <!-- Dropdown (Optional, since you can use this alongside inputs) -->
      <div class="drawer-item">
        <label for="filter">Filter:</label>
        <select id="filter">
          <option value="all">All Items</option>
          <option value="active">Active Items</option>
          <option value="archived">Archived Items</option>
        </select>
      </div>
      
      <!-- Add more input elements as needed -->
    </div>
  </div>
  
  <!-- Your Existing Floating Panel Content -->
  <div class="panel-main-content">
    <p>Main floating panel content goes here...</p>
  </div>
</div>

CSS Styling #

This code styles the floating panel, toggle trigger, and drawer with smooth animations, plus responsive input styling:

/* Floating Panel Base Style */
.floating-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* Drawer Trigger Button */
.drawer-trigger {
  display: block;
  padding: 14px 18px;
  background: #2563eb;
  color: white;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

.drawer-trigger:hover {
  background: #1d4ed8;
}

/* Hide the Toggle Checkbox */
.drawer-toggle {
  display: none;
}

/* Drawer Default State: Hidden */
.navigation-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  background: #f8fafc;
}

/* Drawer Expanded State (When Checkbox is Checked) */
.drawer-toggle:checked ~ .navigation-drawer {
  max-height: 450px; /* Adjust based on your content size */
}

/* Drawer Content Styling */
.drawer-content {
  padding: 18px;
}

.drawer-item {
  margin-bottom: 16px;
}

.drawer-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #334155;
}

.drawer-item input[type="text"],
.drawer-item select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}

.drawer-btn {
  width: 100%;
  padding: 10px;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

.drawer-btn:hover {
  background: #059669;
}

/* Main Panel Content */
.panel-main-content {
  padding: 18px;
}

How It Works #

• The hidden <input type="checkbox"> acts as our state controller. When the user clicks the trigger label, it toggles the checkbox's checked state.
• CSS uses the :checked pseudo-class to expand the drawer by changing its max-height (smoothly animated via transition).
• All input elements (text boxes, buttons, dropdowns) work normally since they're directly placed in the drawer container.

Customization Tips #

• Adjust the floating panel position: Change bottom/right to top/left to move it elsewhere on the screen.
• Modify the drawer animation: Replace max-height with transform: translateX(-100%) and transform: translateX(0) for a slide-in from the left.
• Tweak colors: Update the background values for the trigger, drawer, and buttons to match your app's theme.

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