The responsive navigation bar is implemented through pure CSS, and the answer is to use hidden check boxes and media query to control the display behavior of the menu on the mobile side. 1. The desktop side is displayed as a horizontal navigation menu, which is implemented through flex layout; 2. When the mobile side is below 768px, hide the menu and display the hamburger icon, and trigger the hidden checkbox through label; 3. Use the checked status and ~ selector to control the display and hiding of .nav-menu; 4. After clicking the hamburger icon, the animation effect is achieved through CSS transformation; 5. The menu uses absolute positioning to ensure that it is displayed at the correct level. The entire solution does not require JavaScript, and the interactive logic that relies on CSS is complete and lightweight. It is suitable for static websites and finally ends with a complete sentence structure.
Creating a Responsive Navbar is a common requirement in modern web design. Below is a simple but practical example of a CSS responsive navigation bar that uses pure HTML and CSS implementation (no JavaScript required) that will automatically collapse into a hamburger menu on the mobile side.
? Basic functions
- Desktop: Horizontal navigation menu
- Mobile: Fold into hamburger icon, click to expand the vertical menu
- Responsiveness using CSS media queries
- Pure CSS implementation (using
:checkedand hidden checkboxes)
? HTML structure
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Navbar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar">
<!-- Hamburger button (hidden checkbox) -->
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle" class="hamburger">
<span></span>
<span></span>
<span></span>
</label>
<!-- Logo -->
<div class="nav-logo">
<a href="#">Logo</a>
</div>
<!-- Navigation Link-->
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h1>Welcome to responsive navigation bar</h1>
<p>Narrow the browser window to view the menu response effect. </p>
</main>
</body>
</html>? CSS style (style.css)
/* Basic reset and layout*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1rem;
position: relative;
}
.nav-logo a {
color: white;
font-size: 1.5rem;
text-decoration: none;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li a {
color: white;
text-decoration: none;
padding: 0.8rem 1rem;
display: block;
}
.nav-menu li a:hover {
background-color: #555;
}
/* Hamburger menu style*/
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
transition: 0.3s;
}
/* Mobile responsive (maximum width 768px) */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-menu {
display: none;
flex-direction: column;
width: 100%;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.nav-menu li a {
padding: 1rem;
border-bottom: 1px solid #444;
}
/* Menu is displayed when checkbox is checked*/
.nav-toggle:checked ~ .nav-menu {
display: flex;
}
/* Optional: Hamburger icon animation*/
.nav-toggle:checked ~ .hamburger span:nth-child(2) {
opacity: 0;
}
.nav-toggle:checked ~ .hamburger span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle:checked ~ .hamburger span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
}? Explain the key points
-
.nav-toggleis a hiddencheckboxthat controls menu expansion/collapse. -
label[for="nav-toggle"]is the click area for the hamburger icon. -
~Selector is used to select subsequent elements of the same level (such as.nav-menu). - Media Query Toggle layout when the screen is less than 768px.
- No JS : Enable interaction using CSS's
:checkedstate.
? Advantages
- Simple and lightweight, suitable for static websites
- Not relying on JavaScript, fast loading
- Supports basic animation and interactive feedback
? Extension suggestions
- Add
transitionto make the menu slide more naturally - Use
prefers-reduced-motionto adapt to user preferences - Use JavaScript to control more complex logic in larger projects
Basically all this is it, not complicated but it is easy to ignore details (such as the cooperation between position: absolute and z-index ). You can integrate this structure into your own projects to quickly implement responsive navigation.
The above is the detailed content of css responsive navbar example. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Building RESTful APIs in Java with Jakarta EE
Jul 30, 2025 am 03:05 AM
SetupaMaven/GradleprojectwithJAX-RSdependencieslikeJersey;2.CreateaRESTresourceusingannotationssuchas@Pathand@GET;3.ConfiguretheapplicationviaApplicationsubclassorweb.xml;4.AddJacksonforJSONbindingbyincludingjersey-media-json-jackson;5.DeploytoaJakar
A Developer's Guide to Maven for Java Project Management
Jul 30, 2025 am 02:41 AM
Maven is a standard tool for Java project management and construction. The answer lies in the fact that it uses pom.xml to standardize project structure, dependency management, construction lifecycle automation and plug-in extensions; 1. Use pom.xml to define groupId, artifactId, version and dependencies; 2. Master core commands such as mvnclean, compile, test, package, install and deploy; 3. Use dependencyManagement and exclusions to manage dependency versions and conflicts; 4. Organize large applications through multi-module project structure and are managed uniformly by the parent POM; 5.
css dark mode toggle example
Jul 30, 2025 am 05:28 AM
First, use JavaScript to obtain the user system preferences and locally stored theme settings, and initialize the page theme; 1. The HTML structure contains a button to trigger topic switching; 2. CSS uses: root to define bright theme variables, .dark-mode class defines dark theme variables, and applies these variables through var(); 3. JavaScript detects prefers-color-scheme and reads localStorage to determine the initial theme; 4. Switch the dark-mode class on the html element when clicking the button, and saves the current state to localStorage; 5. All color changes are accompanied by 0.3 seconds transition animation to enhance the user
css dropdown menu example
Jul 30, 2025 am 05:36 AM
Yes, a common CSS drop-down menu can be implemented through pure HTML and CSS without JavaScript. 1. Use nested ul and li to build a menu structure; 2. Use the:hover pseudo-class to control the display and hiding of pull-down content; 3. Set position:relative for parent li, and the submenu is positioned using position:absolute; 4. The submenu defaults to display:none, which becomes display:block when hovered; 5. Multi-level pull-down can be achieved through nesting, combined with transition, and add fade-in animations, and adapted to mobile terminals with media queries. The entire solution is simple and does not require JavaScript support, which is suitable for large
python property decorator example
Jul 30, 2025 am 02:17 AM
@property decorator is used to convert methods into properties to implement the reading, setting and deletion control of properties. 1. Basic usage: define read-only attributes through @property, such as area calculated based on radius and accessed directly; 2. Advanced usage: use @name.setter and @name.deleter to implement attribute assignment verification and deletion operations; 3. Practical application: perform data verification in setters, such as BankAccount to ensure that the balance is not negative; 4. Naming specification: internal variables are prefixed, property method names are consistent with attributes, and unified access control is used to improve code security and maintainability.
How to use Java MessageDigest for hashing (MD5, SHA-256)?
Jul 30, 2025 am 02:58 AM
To generate hash values using Java, it can be implemented through the MessageDigest class. 1. Get an instance of the specified algorithm, such as MD5 or SHA-256; 2. Call the .update() method to pass in the data to be encrypted; 3. Call the .digest() method to obtain a hash byte array; 4. Convert the byte array into a hexadecimal string for reading; for inputs such as large files, read in chunks and call .update() multiple times; it is recommended to use SHA-256 instead of MD5 or SHA-1 to ensure security.
python parse date string example
Jul 30, 2025 am 03:32 AM
Use datetime.strptime() to convert date strings into datetime object. 1. Basic usage: parse "2023-10-05" as datetime object through "%Y-%m-%d"; 2. Supports multiple formats such as "%m/%d/%Y" to parse American dates, "%d/%m/%Y" to parse British dates, "%b%d,%Y%I:%M%p" to parse time with AM/PM; 3. Use dateutil.parser.parse() to automatically infer unknown formats; 4. Use .d
How to convert an Array to a List in Java?
Jul 30, 2025 am 01:54 AM
Converting an array into a list in Java requires selecting methods based on the data type and requirements. ① Use Arrays.asList() to quickly convert an object array (such as String[]) into a fixed-size List, but elements cannot be added or deleted; ② If you need a mutable list, you can encapsulate the result of Arrays.asList() through the ArrayList constructor; ③ For basic type arrays (such as int[]), you need to use StreamAPI conversion, such as Arrays.stream().boxed().collect(Collectors.toList()); ④ Notes include avoiding null arrays, distinguishing basic types from object types, and explicitly returning columns
