css responsive navbar example
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
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 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.
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
VSCode settings.json location
Aug 01, 2025 am 06:12 AM
The settings.json file is located in the user-level or workspace-level path and is used to customize VSCode settings. 1. User-level path: Windows is C:\Users\\AppData\Roaming\Code\User\settings.json, macOS is /Users//Library/ApplicationSupport/Code/User/settings.json, Linux is /home//.config/Code/User/settings.json; 2. Workspace-level path: .vscode/settings in the project root directory
python get mac address example
Jul 30, 2025 am 02:59 AM
Use the uuid module to obtain the MAC address of the first network card of the machine across the platform, without the need for a third-party library, and convert it into a standard format through uuid.getnode(); 2. Use subprocess to call system commands such as ipconfig or ifconfig, and combine it with regular extraction of all network card MAC addresses, which is suitable for scenarios where multiple network card information needs to be obtained; 3. Use the third-party library getmac, call get_mac_address() after installation to obtain the MAC, which supports query by interface or IP, but requires additional dependencies; in summary, if no external library is needed, the uuid method is recommended. If you need to flexibly obtain multi-network card information, you can use the subprocess solution to allow you to install the dependency getma.
