PromptBase
$3.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
1 day ago
Prompt Details
Model
Chat - GPT-4o (gpt-4o)
Token size
133 ($0.00665 / call)
Example input
[ task ]: Implementing a responsive navigation bar
[ programming language ]: HTML, CSS, and JavaScript
[ describe the specific functionality or goal of the code ]: Create a navigation bar that adjusts its layout for different screen sizes and includes a toggle menu for mobile devices
Example output
Sure! I'll provide a responsive navigation bar implementation using HTML, CSS, and JavaScript. This navigation bar will adapt to different screen sizes and include a toggle menu for mobile devices. The code will be optimized for performance and security while adhering to best practices.
### HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<a href="#" class="logo">MySite</a>
<button class="menu-toggle" aria-label="Toggle menu">
<span class="menu-icon"></span>
</button>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<script src="script.js"></script>
</body>
</html>
```
### CSS (styles.css)
```css
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
color: #fff;
padding: 0.5rem 1rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
text-decoration: none;
color: #fff;
}
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
}
.menu-icon {
width: 25px;
height: 2px;
background: #fff;
position: relative;
}
.menu-icon::before,
.menu-icon::after {
content: '';
width: 25px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
transition: all 0.3s ease;
}
.menu-icon::before {
top: -8px;
}
.menu-icon::after {
top: 8px;
}
.nav-links {
list-style: none;
display: flex;
gap: 1rem;
}
.nav-links li {
margin: 0;
}
.nav-links a {
text-decoration: none;
color: #fff;
padding: 0.5rem 1rem;
display: block;
transition: background 0.3s ease;
}
.nav-links a:hover {
background-color: #555;
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
display: none;
flex-direction: column;
width: 100%;
position: absolute;
top: 60px;
left: 0;
background-color: #333;
}
.nav-links.active {
display: flex;
}
.menu-icon::before {
transform: rotate(45deg);
top: 0;
}
.menu-icon::after {
transform: rotate(-45deg);
top: 0;
}
}
```
### JavaScript (script.js)
```javascript
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
// Toggle the active class on the navigation links
navLinks.classList.toggle('active');
});
});
```
### Explanation
1. **HTML**:
- Structure includes a `nav` element for the navigation bar, a logo, a button for menu toggling on mobile devices, and a list of navigation links.
- The `aria-label` attribute on the menu button improves accessibility.
2. **CSS**:
- A basic reset is applied to remove default margin and padding.
- The `.navbar` and `.container` classes ensure proper styling and alignment.
- The `.menu-toggle` button is hidden on larger screens and displayed on smaller screens with a simple icon indicating the menu.
- The `.nav-links` list is initially hidden on small screens and toggled via JavaScript.
- Responsive design is handled using media queries. When the screen width is 768px or less, the navigation links are hidden by default and shown when the menu button is clicked.
3. **JavaScript**:
- Handles the menu toggle functionality by adding or removing the `active` class from the `.nav-links` element.
- This ensures that the menu can be opened and closed on mobile devices.
### Edge Cases & Optimization
- **Performance**: The use of `classList.toggle` is efficient for adding/removing classes and does not require DOM manipulation beyond that.
- **Accessibility**: The `aria-label` attribute on the menu toggle button provides context for screen readers.
- **Security**: The provided code does not include any user inputs or external data, reducing security risks related to injection attacks.
This implementation is designed to be clear, maintainable, and performant while handling different screen sizes effectively.