How to Add CSS Hamburger Menu Responsive to My Website?

LAZIO LEO 2024-02-15 04:58:40 HTML code ☰ CSS code body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .menu { display: none; } .menu-icon { cursor: pointer; display: block; position: fixed; top: 20px; right: 20px; font-size: 24px; z-index: 1000; } .menu-icon:hover { color: #333; } .menu-icon::after { content: "Menu"; } #menu-toggle { display: none; } #menu-toggle:checked + .menu { display: block; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 10px; } .menu a { text-decoration: none; color: #333; transition: color 0.3s ease; } .menu a:hover { color: #666; }

joshijosejose2197@gmail.com 2024-03-18 06:46:41

HTML:

1. Inside a container give a class, and add three div elements to represent the three horizontal lines of the hamburger icon. You can give them a class.

CSS Basic Styling:

1. Style the container element (hamburger) to position it and set its dimensions. You can use display: flex for horizontal alignment of the bars.

2. Style each bar element with width, height, and background color for the lines.

3. Use transition property for smooth animations when the menu opens/closes

 

Adding the Menu and Interaction (Optional):

1. Create the actual navigation menu content and structure it with a nav element.

2. Hide the navigation menu using display: none; or visibility: hidden;

3. Use JavaScript to toggle the visibility of the navigation menu when the hamburger icon is clicked. This will involve adding/removing classes that change the menu's display or visibility properties.