{"id":26670923,"url":"https://github.com/josephadoga/hamburger-menu","last_synced_at":"2025-07-17T06:03:37.687Z","repository":{"id":225938510,"uuid":"767217437","full_name":"josephadoga/hamburger-menu","owner":"josephadoga","description":"How to create Hamburger Menu in HTML and CSS.","archived":false,"fork":false,"pushed_at":"2024-03-05T06:05:30.000Z","size":103,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T22:47:37.975Z","etag":null,"topics":["github","hamburger-menu","tutorial"],"latest_commit_sha":null,"homepage":"https://josephadoga.github.io/hamburger-menu/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/josephadoga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-04T22:44:07.000Z","updated_at":"2024-12-11T15:34:07.000Z","dependencies_parsed_at":"2024-03-05T04:26:42.530Z","dependency_job_id":"9ceea90b-a93f-40d3-bfe0-600c7839d662","html_url":"https://github.com/josephadoga/hamburger-menu","commit_stats":null,"previous_names":["josephadoga/hamburger-menu"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/josephadoga/hamburger-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephadoga%2Fhamburger-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephadoga%2Fhamburger-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephadoga%2Fhamburger-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephadoga%2Fhamburger-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josephadoga","download_url":"https://codeload.github.com/josephadoga/hamburger-menu/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephadoga%2Fhamburger-menu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265570991,"owners_count":23789994,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github","hamburger-menu","tutorial"],"created_at":"2025-03-25T22:46:51.288Z","updated_at":"2025-07-17T06:03:37.667Z","avatar_url":"https://github.com/josephadoga.png","language":"HTML","readme":"## Hamburger Menu\n\n\nThe Hamburger Menu is a user interface element in web development designed for mobile viewing. It provides a compact and accessible way for users to navigate and access the main headers of a website. Typically represented by three horizontal lines, clicking or tapping on the hamburger icon reveals a dropdown or slide-in menu, optimizing the user experience on smaller screens by conserving space and prioritizing essential navigation elements.\n\u003cbr\u003e\n\n### Languages Used:\n![html5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![css3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![javascript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E)\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n### What are we doing?\n\nIn this tutorial, we will be adding the Hamburger Menu to an already made statistics page of a website.\nThis includes an already made Header.\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n### 1. Create the Hamburger Menu Structure in HTML\n\nWe will begin by the Hamburger Menu Structure to our HTML file.\nThis includes the Hamburger Navigation and the Hamburger Button which was gotten from font awesome.\n\n```HTML\n\u003cnav class=\"hamburger-nav\"\u003e\n    \u003ca href=\"#\"\u003eProject\u003c/a\u003e\n    \u003ca href=\"#\"\u003eAbout Us\u003c/a\u003e\n    \u003ca href=\"#\"\u003eBlog\u003c/a\u003e\n    \u003ca href=\"#\"\u003eContact Us\u003c/a\u003e\n\u003c/nav\u003e\n\u003cbutton class=\"menu-toggle\"\u003e\n    \u003ci class=\"fa-solid fa-bars\"\u003e\u003c/i\u003e\n\u003c/button\u003e\n```\n\u003cbr\u003e\n\n\n### 2. Style the Hamburger Menu Button\n\nWe will then style the Hamburger Menu Button to fit the page.\nWe will do this with CSS.\n\n```CSS\n.menu-toggle {\n    color: #fff;\n    display: none;\n    padding: 10px;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n}\n```\n\nAs you can see, the display-none styling sets the default to be initially hidden on larger screens.\nThis is because Hamburger Menus are to be mainly used on Mobile View.\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n\n### 3. Style the Navigation Links\n\nNext, we are going to style the Navigations Links that are going shown when the Hamburger Menu is clicked\n\n```CSS\n.hamburger-nav {\n    display: none;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.hamburger-nav a {\n    display: block;\n    padding: 10px;\n    text-decoration: none;\n    color: #000;\n    transition: all 0.25s ease-in-out;\n}\n\n.hamburger-nav a:hover {\n    color: #fff;\n    background-color: #007fff;\n }\n```\nAs you can see also, the display-none styling of the Hamburger Navigations sets the \ndefault to be initially hidden on larger screens.\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n\n### 4. Using JavaScript to toggle the menu \n\nWe use JavaScript to toggle the navigation menu when the Hamburger Button is clicked\n\n```JavaScript\nconst menuToggle = document.querySelector('.menu-toggle');\nconst navigation = document.querySelector('.hamburger-nav');\n\nmenuToggle.addEventListener('click', () =\u003e {\n    navigation.classList.toggle('active');\n});\n```\n\u003cbr\u003e\n\n\n### 5. Using JavaScript to escape from Hamburger Menu\n\nWe use JavaScript to add event click to escape the Hamburger Menu when the Escape button \nis pressed on the keyboard.\n\n```JavaScript\ndocument.addEventListener('keydown', (event) =\u003e {\n    if (navigation.classList.contains('active') \u0026\u0026 event.key === 'Escape') {\n        navigation.classList.remove('active');\n    }\n});\n```\n\u003cbr\u003e\n\n\n### 6. Using CSS to toggle Responsiveness\n\nThis snippet below will make the Hamburger Navigation Links to appear only when the screen size is 768px and below.\nThis will also make the Main Header Navigation Link to disappear.\nThe Hamburger only works for a Phone Screen Size\n\n``` CSS\n@media (max-width: 768px) {\n    .main-nav {\n        display: none;\n    }\n\n    .hamburger-nav {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        background-color: #fff;\n        transition: all 0.3s ease-in-out;\n    }\n\n    .hamburger-nav.active {\n        top: 0;\n        margin-top: 56px;\n    }\n\n    .menu-toggle {\n        display: block;\n    }\n}\n```\n\u003cbr\u003e\n\n### References\nGemini AI by Google\u003cbr\u003e\nREINTECH Media\n\n### View Site\nClick [here](https://josephadoga.github.io/hamburger-menu/) to view site","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephadoga%2Fhamburger-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosephadoga%2Fhamburger-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephadoga%2Fhamburger-menu/lists"}