35 CSS Mobile Menus
See the Pen Burger Menu by Talha Zahid (@talhazahid) on CodePen.
Dev: Talha Zahid
Burger Menu CSS only
Dev: Simone Pizzamiglio
My mobile menu
See the Pen Burger Menu by Talha Zahid (@talhazahid) on CodePen.
Dev: Talha Zahid
Mobile menu with pure css
Dev: Ramnek Singh
Fancy Mobile Menu
Dev: Gianmarco
Filter Menu
Dev: Arjun Amgain
Touch device jelly menu concept
Dev: LegoMushroom
Colourful Flower Popup Menu
Dev: Jasper LaChance
Mob. Menu Only CSS
Dev: Jokin.L
Pure CSS Navigation Simple & Easy
Dev: Ravi Dhiman
App Navigation
Dev: Ian Turner
Mobile Nav – only checkbox & CSS
Dev: Max Misnikov
Menu with scroll & hover effects
Dev: Ivan Bogachev
Mobile Menu Style
Dev: Raiden Kaneda
Animated Accessible Navigation
Dev: Max Böck
Mike’s Magical Mobile Mega Menu
Dev: tiffany choong
Animated Mobile Menu Step by Step Slowmotion
Dev: Geoffrey Crofte
Tilt to make room for menu
Dev: Mikael Ainalem
Pure CSS mobile nav animation
Dev: Made On Mars
Hamburger + clip-path
Dev: Mikael Ainalem
Mobile menu slider prototype
Dev: Narendra N Shetty
Mobile Menu
Dev: Ricardo Oliva Alonso
Mobile Menu
Mobile Menu Animation – CSS
Dev: Aleksandar Čugurović
Mobile Menu Concept
Dev: Kyle Lavery
Mobile menu
Dev: Kirsten Humphreys
Mobile Menu Design #3
See the Pen Mobile Menu Design #3 by Vijaya Kumar Vulchi (@vulchivijay) on CodePen.
Dev: Vijaya Kumar Vulchi
Mobile Menu – CSS
Dev: Daniel Hearn
Mobile Menu
See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.
Dev: Ricardo Oliva Alonso
Fancy tab bar active animation
Dev: Aaron Iker
Apple style mobile menu
Dev: Mathieu Lavoie
Mobile Menu Animation
Dev: Stas Melnikov
Mobile menu, CSS only
See the Pen Mobile menu, CSS only by Poppe1219 – Frontend and Backend Developer (@poppe1219) on CodePen.
Dev: Poppe1219 – Frontend and Backend Developer
Latest Post
55 Cool CSS Calendars
19 Barcodes in CSS
25 CSS Masonry Layout Examples
23 CSS Card Layouts
27 CSS Subscribe Forms
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok
18 CSS Mobile Menus
Collection of hand-picked free HTML and CSS mobile menu code examples from codepen and other resources. Update of July 2019 collection. 2 new items.
Related Articles
Author
Links
Made with
About a code
Hamburger
Using clip-path to create a hamburger menu open effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Tilt to Make Room for Menu
An effect similar to the mobile Safari tab experience. Tilt background and fade to make room for a menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Animated Mobile Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Mobile Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Animation
Works better on mobile devices. The hamburger button is comfortably available for a lefty and righty.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Concept
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Magical Mobile Mega Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Animated Accessible Navigation
Accessible, progressive-enhanced navigation menu with a circular animated background.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Style
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Menu with Scroll Effects
App Menu menu with scroll & hover effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Nav
CSS only mobile nav trigger and menus.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Pure CSS Navigation
Pure CSS navigation simple & easy.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
3 Mobile Nav Animations
3 Pure CSS mobile navigation animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Slider Prototype
Mobile menu slider prototype in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
App Navigation
Concept for mobile app navigation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Как сделать мобильное меню
В этой статье мы разберём как сделать мобильное меню на HTML, CSS и JavaScript, вы увидите что это очень просто.
Логика программы:
Для начала разберём логику программы, а суть заключается в том, что при нажатие на кнопу, будем менять класс и тем самым показывать меню, по умолчанию оно скрыто.
HTML:
Сначала создадим HTML файл, ну в нём всё очень просто.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, itaque mollitia rerum ducimus est beatae aut, optio aliquam dolor quaerat repellat sit dolore dignissimos. Hic ratione quasi ipsam vel velit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium molestias fuga, labore eum non quam, quidem aspernatur aliquid repudiandae quae suscipit tenetur nam id omnis soluta dolorem ad eligendi totam?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In nesciunt sunt distinctio, laudantium ad non deserunt ut, quos tenetur maiores porro. Quae ipsum obcaecati natus incidunt quam reprehenderit repellendus totam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis asperiores in dolorem nemo eveniet dolor quo veniam rem! At magni pariatur blanditiis quod dolorem, tempore fugiat fuga sequi eius.
Здесь мы создаём меню с помощью тега nav и в main добавили рыбный текст, что бы явно было видно что меню можно открыть везде, не зависимо от скролинга.
Также внутри nav , вы можете заметить div с классом btn-menu, это как раз и будет наша кнопка.
CSS:
Разберём этот файл, в самом его начале мы убираем все отступы у документа, что бы меню выглядело красивее, потом настраиваем отображение текста в main , но оборот добавляем внутренние отступы.
Потом переходим к настройки тега nav , там просто делаем позиционирование fixed, это нужно что бы мы всегда видели меню, дальше самое важное, это настройка ul , дле него меняем цвет и самое главное тоже делаем fixed и высоту 100vh , это нужно что бы элемент отображался во всю высоту экрана, также делаем позицию -600px или просто минус его ширина, для того чтобы элемент не виден на экране а был скрыт слева, ну и transition: 500ms , для плавного показа.
Дальше просто добавляем стили чтобы более красивого отображение, но последние два это классы для замены, первый, для показа меню, в нём позиция слева равна нулю, а во втором просто меняем цвет для кнопки.
JavaScript:
Последние что осталось посмотреть, это код на языке JavaScript, но он не большой и очень простой.