Collection of free HTML and CSS navigation menu code examples
About a code
MENU
Menu in pure CSS.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
FULLSCREEN OVERLAY NAVIGATION BAR
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
FULLSCREEN OVERLAY NAVIGATION BAR
Transitioning clip-path
and pseudo-element transform
s to create smooth link hovers.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
NAVIGATION DOTTED HOVER EFFECT
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
FULLSCREEN OVERLAY NAVIGATION BAR
Fullscreen overlay navigation bar with html & css neon effect.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:font-awesome.css
About a code
CONTEXT MENU
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
PURE CSS MENU
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:bootstrap.css
About a code
NEUMORPHISM CONTEXT MENU
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
SIMPLE NAVIGATION SYSTEM
Simple system for navigating a hierarchy in a confined space. Uses standard HTML and CSS, no JavaScript.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
CSS MENU
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:font-awesome.css
About a code
FULLSCREEN MENU ENTER
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
CONTEXT MENU WITH FEATHER ICONS
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:feather-icons.js
About a code
CSS HAMBURGER MENU
Pure CSS menu interaction. Made using the HTML tags details
and summary
.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
TEXT FILL ON HOVER
Filling the text with a different color on hover - a creative text effect.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
LIST ITEM HOWER EFFECT
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
CSS-ONLY MARQUEE EFFECT
A simple CSS-only marquee effect for a menu.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
CSS FULL-PAGE NAVIGATION
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
RANDOMLY GENERATED CSS BLOBBY NAV
A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter
, and SVG filter.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
FULL-PAGE NAVIGATION
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
PURE CSS FULL PAGE NAV
Compatible browsers:Chrome, Edge, Firefox (partial), Opera, Safari
Responsive:yes
Dependencies:-
About a code
FOLD OUT MOBILE MENU
CSS only fold out mobile menu.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
MENU HOVER FILL TEXT
Menu hover fill text (color
+ background-clip
).
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
MENU WITH AWESOME HOVER
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:bootstrap.css, bootstrap-social.css, font-awesome.css
About a code
CSS NAVIGATION BAR
Implemented a minimal navigation bar that changes color on hovering. Written using only HTML and SCSS.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
MENU HOVER UNDERLINE
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
APPLE TV MENU INTERFACE
Compatible browsers:Chrome, Edge, Opera, Safari
Responsive:no
Dependencies:-
About a code
CSS STRANGE NAV
Made a strange navigation. CSS only. Let's Click!
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
NAVBAR WITH PURE CSS
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:font-awesome.css
About a code
NAVBAR INTERACTION
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
OFF CANVAS MENU PURE CSS
Off canvas menu pure CSS by using only CSS.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About a code
MENU BAR CSS
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About a code
VERTICAL DARK MENU WITH CSS
Simple vertical dark menu with CSS and icons.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:font-awesome.css
About the code
MOVING UNDERLINE NAV MENU
Compatible browsers:Chrome, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About the code
FUN HOVER NAVIGATION
Fun navigation effect using CSS keyframes. A quick jump back to the old school.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About the code
NAVIGATION MENU
Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About the code
3D NAVBAR
3D navbar in HTML and CSS.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About the code
JUST ANOTHER MENU
Pure CSS floating menu animation.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:no
Dependencies:-
About the code
PURE CSS MENU
Pure CSS menu drawer with off-click.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About the code
CSS MENU FEAT. EMOJI
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About the code
THE MENU
Table contents style menu.
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
About the code
MENU EFFECT
Reverse text color menu effects.
Compatible browsers:Chrome, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
![CSS-Only Nested Dropdown Navigation (ARIA) Demo image: CSS-Only Nested Dropdown Navigation (ARIA)](https://freefrontend.com/assets/img/css-menu/CSS-Only-Nested-Dropdown-Navigation.png)
About the code
CSS-ONLY NESTED DROPDOWN NAVIGATION
CSS only nested dropdown navigation with ARIA.
![Full Page Off-Canvas Navigation Demo Image: Full Page Off-Canvas Navigation](https://freefrontend.com/assets/img/css-menu/full-page-off-canvas-navigation.png)
Full Page Off-Canvas Navigation
An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.
Made by Caleb Varoga
June 17, 2016
![Simple Radial Menu Demo Image: Simple Radial Menu](https://freefrontend.com/assets/img/css-menu/simple-radial-menu.png)
Simple Radial Menu
HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2016
![Simple accordion menu with HTML, CSS and JavaScript Demo Image: Simple accordion menu with HTML, CSS and JavaScript](https://freefrontend.com/assets/img/css-menu/HTML-CSS-and-JavaScript-accordion-menu.png)
Accordion Menu
Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2016
![Mobile Filter Menu Demo Image: Mobile Filter Menu](https://freefrontend.com/assets/img/css-menu/mobile-filter-menu.png)
Mobile Filter Menu
Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2016
![Fullscreen Menu Flexbox Style Demo image: Fullscreen Menu Flexbox Style](https://freefrontend.com/assets/img/css-menu/fullscreen-menu-flexbox-method.gif)
About the code
FULLSCREEN MENU FLEXBOX STYLE
Chrome and Firefox good... IE bad, no transition support for flex property.
![Dropdown Menu Animation Demo image: Dropdown Menu Animation](https://freefrontend.com/assets/img/css-menu/dropdown-menu-animation.png)
About the code
DROPDOWN MENU ANIMATION
Nice dropdown menu with animation.
![Mobile Navigation Animation Demo image: Mobile Navigation Animation](https://freefrontend.com/assets/img/css-menu/mobile-navigation-animation.gif)
About the code
MOBILE NAVIGATION ANIMATION
Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking...
![SVG UI Navigation Concept Demo image: SVG UI Navigation Concept](https://freefrontend.com/assets/img/css-menu/svg-ui-navigation-concept.gif)
About the code
SVG UI NAVIGATION CONCEPT
Just SVG & CSS3 animations, without any animation libraries.
![Dropdown Menu Demo image: Dropdown Menu](https://freefrontend.com/assets/img/css-menu/dropdown-menu-2.png)
About the code
DROPDOWN MENU
Dropdown menu with little jQuery.
![Dropdown Demo image: Dropdown](https://freefrontend.com/assets/img/css-menu/dropdown.png)
About the code
DROPDOWN
Pretty dropdown menu.
![Sidebar Navigation Demo image: Sidebar Navigation](https://freefrontend.com/assets/img/css-menu/sidebar-navigation-with-tooltips.gif)
About the code
SIDEBAR NAVIGATION
Sidebar navigation with tooltips.
About a code
MATERIAL DESIGN ROUND MASK MENU
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Responsive:yes
Dependencies:-
![Fullscreen Navigation Demo image: Fullscreen Navigation](https://freefrontend.com/assets/img/css-menu/fullscreen-navigation-2.gif)
About the code
FULLSCREEN NAVIGATION
Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS.
![Fullscreen Navigation Demo image: Fullscreen Navigation](https://freefrontend.com/assets/img/css-menu/fullscreen-navigation-2.gif)
About the code
FULLSCREEN NAVIGATION
Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS.
![Fullscreen Flexbox Overlay Navigation Demo Image: Fullscreen Flexbox Overlay Navigation](https://freefrontend.com/assets/img/css-menu/fullscreen-flexbox-overlay-navigation.png)
Fullscreen Flexbox Overlay Navigation
Fullscreen flexbox overlay navigation in HTML, CSS and jQuery.
Made by Mirko Zorić
January 8, 2016
![Details Info & Navigation Demo image: Details Info & Navigation](https://freefrontend.com/assets/img/css-menu/details-info-navigation.gif)
About the code
DETAILS INFO & NAVIGATION
Navigation with jQuery, CSS and HTML.
![CSS3 + jQuery Fullscreen Menu Demo Image: CSS3 + jQuery Fullscreen Menu](https://freefrontend.com/assets/img/css-menu/css3-jquery-fullscreen-menu.png)
CSS3 + jQuery Fullscreen Menu
Simple, basic and elegant CSS3 and jQuery driven fullscreen menu.
Made by Anton Petrov
December 5, 2015
![Full Screen Navigation Overlay Demo image: Full Screen Navigation Overlay](https://freefrontend.com/assets/img/css-menu/Full-Screen-Navigation-Overlay.jpg)
About the code
FULL SCREEN NAVIGATION OVERLAY
An example of a full screen navigation overlay utilizing flexbox.
![Circular Material Menu Demo image: Circular Material Menu](https://freefrontend.com/assets/img/css-menu/circular-material-menu.gif)
About the code
CIRCULAR MATERIAL MENU
Unusual circular menu.
![Semicircular Gooey Menu Demo Image: Semicircular Gooey Menu](https://freefrontend.com/assets/img/css-menu/semicircular-gooey-menu.png)
Semicircular Gooey Menu
Gooey menu with CSS and SVG filters. Version 1.
Made by Lucas Bebber
October 22, 2015
![Fullscreen Navigation Demo Image: Fullscreen Navigation](https://freefrontend.com/assets/img/css-menu/fullscreen-navigation.png)
4 Fullscreen Navigation
4 Fullscreen navigation with HTML, CSS and jQuery.
Made by ari
September 13, 2015
![Fullscreen Navigation Demo Image: Fullscreen Navigation](https://freefrontend.com/assets/img/css-menu/fullscreen-navigation-3.png)
Fullscreen Navigation
CSS hamburger animation taken fromhttp://codepen.io/designcouch/details/Atyop/
Made by Marcus Bizal
September 3, 2015
![Hamburger Icon With Morphing Menu Demo Image: Hamburger Icon With Morphing Menu](https://freefrontend.com/assets/img/css-menu/hamburger-icon-with-morphing-menu.png)
![Frosty Nav Toggle Effect Demo image: Frosty Nav Toggle Effect](https://freefrontend.com/assets/img/css-menu/frosty-nav-toggle-effect.jpg)
About the code
FROSTY NAV TOGGLE EFFECT
HTML, CSS and jQuery frosty navigation toggle effect.
![Hamburger Icon With Morphing Menu Demo Image: Hamburger Icon With Morphing Menu](https://freefrontend.com/assets/img/css-menu/hamburger-icon-with-morphing-menu.png)
Demo Image: Hamburger Icon With Morphing Menu
![Hamburger Icon With Morphing Menu Demo Image: Hamburger Icon With Morphing Menu](https://freefrontend.com/assets/img/css-menu/hamburger-icon-with-morphing-menu.png)
Hamburger Icon With Morphing Menu
Creative menu made with HTML, SASS/CSS3 and JQuery.
Made by Sergio
July 15, 2015
![Dropdown Navigation Demo Image: Dropdown Navigation](https://freefrontend.com/assets/img/css-menu/dropdown-navigation.png)
Dropdown Navigation
Dropdown navigation with HTML, CSS and JavaScript
Made by Ryan Morr
July 7, 2015
![Full Screen Navigation Using SVG Demo Image: Full Screen Navigation Using SVG](https://freefrontend.com/assets/img/css-menu/full-screen-navigation-using-svg.png)
Demo Image: Full Screen Navigation Using SVG
Dropdown navigation with HTML, CSS and JavaScript
Made by Ryan Morr
July 7, 2015
![Full Screen Navigation Using SVG Demo Image: Full Screen Navigation Using SVG](https://freefrontend.com/assets/img/css-menu/full-screen-navigation-using-svg.png)
Full Screen Navigation Using SVG
Full screen navigation using SVG, HTML, CSS and jQuery.
Made by Anas Ashraf
July 2, 2015
![Gooey Mobile Navigation Demo image: Gooey Mobile Navigation](https://freefrontend.com/assets/img/css-menu/gooey-mobile-navigation.gif)
Full screen navigation using SVG, HTML, CSS and jQuery.
Made by Anas Ashraf
July 2, 2015
![Gooey Mobile Navigation Demo image: Gooey Mobile Navigation](https://freefrontend.com/assets/img/css-menu/gooey-mobile-navigation.gif)
Author
Links
Made with
About the code
GOOEY MOBILE NAVIGATION
The cool gooey effect applied to a mobilestyle menu. jQuery and CSS transitions for the animations.
![Fullscreen Navigation Demo image: Fullscreen Navigation](https://freefrontend.com/assets/img/css-menu/fullscreen-navigation.gif)
The cool gooey effect applied to a mobilestyle menu. jQuery and CSS transitions for the animations.
![Fullscreen Navigation Demo image: Fullscreen Navigation](https://freefrontend.com/assets/img/css-menu/fullscreen-navigation.gif)
Author
Links
Made with
About the code
FULLSCREEN NAVIGATION
Fullscreen navigation with HTML, CSS and JS.
![Colourful Navigation Demo Image: Colourful Navigation](https://freefrontend.com/assets/img/css-menu/colourful-navigation.png)
Demo Image: Colourful Navigation
Fullscreen navigation with HTML, CSS and JS.
![Colourful Navigation Demo Image: Colourful Navigation](https://freefrontend.com/assets/img/css-menu/colourful-navigation.png)
Colourful Navigation
When you hover the colourful navigation the dot follows your moves to the current item. When you leave it goes back to the active item.
Made by Lewi Hussey
June 4, 2015
![Fullscreen Menu Demo image: Fullscreen Menu](https://freefrontend.com/assets/img/css-menu/fullscreen-menu-2.gif)
When you hover the colourful navigation the dot follows your moves to the current item. When you leave it goes back to the active item.
Made by Lewi Hussey
June 4, 2015
![Fullscreen Menu Demo image: Fullscreen Menu](https://freefrontend.com/assets/img/css-menu/fullscreen-menu-2.gif)
Author
Links
Made with
About the code
FULLSCREEN MENU
Simple fullscreen menu.
![Explosive Menu Demo Image: Explosive Menu](https://freefrontend.com/assets/img/css-menu/explosive-menu.png)
Demo Image: Explosive Menu
Simple fullscreen menu.
![Explosive Menu Demo Image: Explosive Menu](https://freefrontend.com/assets/img/css-menu/explosive-menu.png)
Explosive Menu
A, rather explosive, menu is just a click away. All you have to do is say fire.
Made by Harris Carney
May 17, 2015
![Sass Off Canvas Nav Demo image: Sass Off Canvas Nav](https://freefrontend.com/assets/img/css-menu/sass-off-canvas-nav.gif)
A, rather explosive, menu is just a click away. All you have to do is say fire.
Made by Harris Carney
May 17, 2015
![Sass Off Canvas Nav Demo image: Sass Off Canvas Nav](https://freefrontend.com/assets/img/css-menu/sass-off-canvas-nav.gif)
Author
Links
Made with
About the code
OFF CANVAS NAV
Sass off-canvas navigation.
![Solution For Long Drop Down Items Demo Image: Solution For Long Drop Down Items](https://freefrontend.com/assets/img/css-menu/solution-for-long-drop-down-items.png)
Demo Image: Solution For Long Drop Down Items
Sass off-canvas navigation.
Solution For Long Drop Down Items
Problem with long drop down menus? Well, try this simple solution with the use of JavaScript and jQuery.
Made by Larry Geams Parangan
March 13, 2015
![Full-Screen Menu Overlay Demo Image: Full-Screen Menu Overlay](https://freefrontend.com/assets/img/css-menu/full-screen-menu-overlay.png)
Demo Image: Full-Screen Menu Overlay
Problem with long drop down menus? Well, try this simple solution with the use of JavaScript and jQuery.
Made by Larry Geams Parangan
March 13, 2015
![Full-Screen Menu Overlay Demo Image: Full-Screen Menu Overlay](https://freefrontend.com/assets/img/css-menu/full-screen-menu-overlay.png)
Full-Screen Menu Overlay
A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.
Made by Ettrics
March 12, 2015
![Mobile Menu Demo image: Mobile Menu](https://freefrontend.com/assets/img/css-menu/mobile-menu.gif)
A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.
Made by Ettrics
March 12, 2015
![Mobile Menu Demo image: Mobile Menu](https://freefrontend.com/assets/img/css-menu/mobile-menu.gif)
Author
Links
Made with
About the code
MOBILE MENU
HTML, CSS and jQuery effect for mobile menu.
![Offcanvas Sidebar Menu With A Twist Demo Image: Offcanvas Sidebar Menu With A Twist](https://freefrontend.com/assets/img/css-menu/offcanvas-sidebar-menu-with-a-twist.png)
Demo Image: Offcanvas Sidebar Menu With A Twist
HTML, CSS and jQuery effect for mobile menu.
![Offcanvas Sidebar Menu With A Twist Demo Image: Offcanvas Sidebar Menu With A Twist](https://freefrontend.com/assets/img/css-menu/offcanvas-sidebar-menu-with-a-twist.png)
Offcanvas Sidebar Menu With A Twist
HTML, CSS and jQuery offcanvas sidebar menu with a twist.
Made by Devilish Alchemist
January 13, 2015
![Off Canvas Menu Demo Image: Off Canvas Menu](https://freefrontend.com/assets/img/css-menu/off-canvas-menu.png)
Demo Image: Off Canvas Menu
HTML, CSS and jQuery offcanvas sidebar menu with a twist.
Made by Devilish Alchemist
January 13, 2015
![Off Canvas Menu Demo Image: Off Canvas Menu](https://freefrontend.com/assets/img/css-menu/off-canvas-menu.png)
Off Canvas Menu
Little off canvas animated menu.
Made by Mark Murray
November 28, 2014
![Accordion drop down menu Demo Image: Accordion drop down menu](https://freefrontend.com/assets/img/css-menu/accordion-drop-down-menu.png)
Demo Image: Accordion Drop Down Menu
Little off canvas animated menu.
Made by Mark Murray
November 28, 2014
![Accordion drop down menu Demo Image: Accordion drop down menu](https://freefrontend.com/assets/img/css-menu/accordion-drop-down-menu.png)
Accordion Drop Down Menu
HTML, CSS accordion menu with jQuery. No plugins.
Made by Agustin Ortiz
November 18, 2014
![Flat Vertical Navigation Demo Image: Flat Vertical Navigation](https://freefrontend.com/assets/img/css-menu/flat-vertical-navigation.png)
Demo Image: Flat Vertical Navigation
HTML, CSS accordion menu with jQuery. No plugins.
Made by Agustin Ortiz
November 18, 2014
![Flat Vertical Navigation Demo Image: Flat Vertical Navigation](https://freefrontend.com/assets/img/css-menu/flat-vertical-navigation.png)
Flat Vertical Navigation
A simple flat vertical navigation with multi animated drop down menu. Also including Font Awesome and Animate.css.
Made by Andy Tran
November 18, 2014
![Material Design Navigation Demo Image: Material Design Navigation](https://freefrontend.com/assets/img/css-menu/material-design-navigation.png)
Demo Image: Material Design Navigation
A simple flat vertical navigation with multi animated drop down menu. Also including Font Awesome and Animate.css.
Made by Andy Tran
November 18, 2014
![Material Design Navigation Demo Image: Material Design Navigation](https://freefrontend.com/assets/img/css-menu/material-design-navigation.png)
Material Design Navigation
The page slides to reveal a clean, simple navigation.
Made by Lewi Hussey
October 30, 2014
The page slides to reveal a clean, simple navigation.
Made by Lewi Hussey
October 30, 2014
![Flat Horizontal Navigation Demo image: Flat Horizontal Navigation](https://freefrontend.com/assets/img/css-menu/flat-horizontal-navigation.jpg)
Author
Links
Made with
About the code
FLAT HORIZONTAL NAVIGATION
A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.
![Flat Vertical Navigation Demo Image: Flat Vertical Navigation](https://freefrontend.com/assets/img/css-menu/flat-vertical-navigation-2.png)
Demo Image: Flat Vertical Navigation
A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.
![Flat Vertical Navigation Demo Image: Flat Vertical Navigation](https://freefrontend.com/assets/img/css-menu/flat-vertical-navigation-2.png)
Flat Vertical Navigation
A simple flat vertical navigation with a simple dropdown menu.
Made by Andy Tran
September 1, 2014
![Radial Menu Demo image: Radial Menu](https://freefrontend.com/assets/img/css-menu/radial-menu.gif)
A simple flat vertical navigation with a simple dropdown menu.
Made by Andy Tran
September 1, 2014
![Radial Menu Demo image: Radial Menu](https://freefrontend.com/assets/img/css-menu/radial-menu.gif)
Author
Links
Made with
About the code
RADIAL MENU
Animated radial menu.
![Toggle Menu Demo Image: Toggle Menu](https://freefrontend.com/assets/img/css-menu/css-toggle-menu.png)
Demo Image: Toggle Menu
Animated radial menu.
![Toggle Menu Demo Image: Toggle Menu](https://freefrontend.com/assets/img/css-menu/css-toggle-menu.png)
Toggle Menu
Toggle menu with HTML, CSS and jQuery.
Made by Yoann
July 16, 2014
![Side accordion menu Demo Image: Side accordion menu](https://freefrontend.com/assets/img/css-menu/side-accordion-menu-html-css-javascript.png)
Demo Image: Side Accordion Menu
Toggle menu with HTML, CSS and jQuery.
Made by Yoann
July 16, 2014
![Side accordion menu Demo Image: Side accordion menu](https://freefrontend.com/assets/img/css-menu/side-accordion-menu-html-css-javascript.png)
Side Accordion Menu
Author
Links
Made with
About the code
DROPDOWN MENU
The hover menu is pure CSS. The toggle menu utilizes a minimal amount of JavaScript, but will degrade gracefully because it only uses JavaScript to close the menu when the user clicks outside of the menu.
![Circular Navigation Popout Demo image: Circular Navigation Popout](https://freefrontend.com/assets/img/css-menu/circular-navigation-popout.gif)
The hover menu is pure CSS. The toggle menu utilizes a minimal amount of JavaScript, but will degrade gracefully because it only uses JavaScript to close the menu when the user clicks outside of the menu.
![Circular Navigation Popout Demo image: Circular Navigation Popout](https://freefrontend.com/assets/img/css-menu/circular-navigation-popout.gif)
Author
Links
Made with
About the code
CIRCULAR NAVIGATION POPOUT
Full circular animated navigation in CSS. Perfect for mobile. Based on codrops's circular navigation.
![Touch Device Jelly Menu Concept Demo image: Touch Device Jelly Menu Concept](https://freefrontend.com/assets/img/css-menu/touch-device-jelly-menu-concept.gif)
Full circular animated navigation in CSS. Perfect for mobile. Based on codrops's circular navigation.
![Touch Device Jelly Menu Concept Demo image: Touch Device Jelly Menu Concept](https://freefrontend.com/assets/img/css-menu/touch-device-jelly-menu-concept.gif)
Author
Links
Made with
About the code
TOUCH DEVICE JELLY MENU CONCEPT
Touch device jelly menu concept with HTML, CSS and JavaScript.
![Vertical accordion menu using jQuery and CSS3 Demo Image: Vertical accordion menu using jQuery and CSS3](https://freefrontend.com/assets/img/css-menu/vertical-accordion-menu-using-jquery-and-css3.png)
Demo Image: Vertical Accordion Menu
Touch device jelly menu concept with HTML, CSS and JavaScript.
![Vertical accordion menu using jQuery and CSS3 Demo Image: Vertical accordion menu using jQuery and CSS3](https://freefrontend.com/assets/img/css-menu/vertical-accordion-menu-using-jquery-and-css3.png)
Vertical Accordion Menu Using jQuery And CSS3
A sleek vertical accordion menu for your next website/app. The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.
Made by thecodeplayer
![Bounce Mobile Menu Demo image: Bounce Mobile Menu](https://freefrontend.com/assets/img/css-menu/bounce-menu.gif)
A sleek vertical accordion menu for your next website/app. The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.
Made by thecodeplayer
![Bounce Mobile Menu Demo image: Bounce Mobile Menu](https://freefrontend.com/assets/img/css-menu/bounce-menu.gif)
Author
Links
Made with
About the code
BOUNCE MOBILE MENU
Menu animation with HTML, CSS and jQuery.
![Dropdown Menu Demo image: Dropdown Menu](https://freefrontend.com/assets/img/css-menu/dropdown-menu.gif)
Menu animation with HTML, CSS and jQuery.
![Dropdown Menu Demo image: Dropdown Menu](https://freefrontend.com/assets/img/css-menu/dropdown-menu.gif)
Author
Links
Made with
About the code
DROPDOWN MENU
This is a simple dropdown menu made using unsorted lists and CSS3 transitions.
This is a simple dropdown menu made using unsorted lists and CSS3 transitions.