35 menus in HTML and CSS

Menu

In this series of articles with lSelected views of CSS, HTML and JavaScript code, we usually share text effects, arrows, headers or sliders with which to emphasize the design of our website so that it is more elegant or capable of adding value to the content that we present to the visitor.

This time it's time for the menus in HTML and CSS with which you can animate adequately those important elements that allow us to direct the user to the most important parts of our eCommerce, blog and more. We go with them to give our site that sought after quality touch and that it is as current as possible to the standards of UI design.

Slide accordion menu

Burger

Un slide menu or hamburger side menu composed of graceful animations with a minimalist touch to great effect.

sidebar template
Related article:
9 sidebar CSS menus you can't miss

Swanky Pure CSS Drop Down

swanky

Swanky Lil Drop Down Manu V2.0 es menu well complete pure CSS which has the added value that there is no JavaScript code at all in the user interface. Simply excellent its incorporation to discover great elegance.

Accordion menu

Accordion

This accordion menu es very simple if we compare it to the previous two with HTML, JS and CSS.

Stripe Menu
Related article:
16 cascading menus in CSS to revamp your website

Vertical menu with jQuery and CSS3

Vertical accordion

Un vertical menu with jQuery and CSS3 de great touch for an app or website. All kinds of transitions and gradients with minimalist shadows.

Circular menu

Circular navigation

Un circular menu de experimental navigation which works perfectly for a technical website. Manufactured in SVG and GreenSock Animation Platform, different without a doubt.

Radial menu

Radial

Other radial menu and experimental which is perfectly valid for a page intended for a game.

Circular CSS HTML menu

Circular

Un circular menu CSS HTML to place it laterally and that opens circularly with a great user experience.

Ring menu concept

Rings

In this ring menu that links are positioned in the upper part of each one to create different rings.

Flower pop up menu

Flower

Other particular pop-up menu with a very well applied animation that produces a great effect.

Recursive Hover Nav

recursive

Recursive Hover Nav is a high quality drop down menu for those animations that perfectly indicate the structure of the content of the web.

Dropdown navigation

CSS

Un menu dropdown navigation similar to the previous one although with other tints in the interface design.

Pure CSS dropdown menu

Simple Pure CSS

Other quality dropdown menu in CSS which follows current UI design standards.

Responsive and simple menu

simple responsive

full screen, this responsive and simple menu in HTML5 and CSS3 it is compatible with Internet Explorer 11.

Full screen menu in SVG

Full Menu SVG

Un full screen menu in SVG placed on the side in hamburger and that is very eye-catching.

Mega Menu CSS

Mega Menu

Un Mega Menu in CSS and HTML different from what is seen, with a modern and minimalist style.

Another Menu Concept

Menu concept

Another Menu Concept is the ideal option if you are looking for a different and original menuThis one is just great thanks to a custom menu on the icon and painstakingly crafted animation.

Material Design Menu

Material

Material Design Menu is based on Google's design language. 

Burger mobile menu

Burger

Un hamburger menu mobile optimized and that it is done in HTML, CSS and JavaScript.

Velocity.js full screen flexbox

Velocity

Velocity.js full screen flexbox is a menu of enormous quality in the effect achieved and for its almost unique user experience. Full screen flexbox with velocity.js.

Full Page off-canvas

full page

Full Page off-canvas is a full-screen, high-quality menu that works perfectly for displaying how to devise a website with those values.

Hover menu line effect

Hover

Un hover menu simple line effect and very nice.

CSS clip-path menu concept

CSS Menu Concept

Another concept of menu with clip-path consisting of a very curious hover and some animated categories.

strikethrough hover

Strike

strikethrough hover it's another menu hover for curious links Outcome.

Lavalamp CSS Menu

lavalamp

Lavalamp CSS Menu contains one hover animation for each of the links that lends itself to dynamism.

Navigation slider

Clean Slider

Un navigation slider which scrolls to each link to be distinguished with a red hue and a well cared animation of great results.

Mobile menu navigation

Mobile menu

Un burger menu navigation of great effect aimed at mobile devices.

IPhone X mobile menu concept

iPhone X

Un menu designed for iPhone X that can give that touch of quality to your website so that it is on par with the design of the Apple phone.

Submenu expand for mobile

submenu expand

Submenu expand for mobile is designed for the footer with graceful animation and a very suitable displacement. Elegance at all levels for a mobile interface of your app or website.

Animated mobile navigation

Animated

Other animated menu for mobile with a circular animated background with great visual results.

Menu with scrolling and hover effects

Scroll hover

Other great effect for a different menu and quirky. East menu with scrolling and hover effects it's perfect for restaurants, reviews, and more.

Mobile filter menu

Filter

Un filter menu mobile converted for the web version and aimed at mobile.

Off-canvas navigation

Off-canvas

Off-canvas navigation It is a menu that experiment with transitions and navigation to be very current. If you are looking for something new to surprise, its level is the best on this list.

Hidden CSS side menu

Hidden menu

Un side menu in CSS what is hidden and so appears with the hamburger icon.

Fixed navigation sidebar

Fixed

Use bootstrap instead of flexbox to support IE9 / 10. Another excellent menu for its Fixed navigation sidebar in its concept.

morphing tab

morphing

morphing tab it's a menu dropdown that occurs when you press on the main tab button.


Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   Javier said

    Hello I find the different menus available on this page very interesting, my question is how do you install the js files of the menu? several times I tried to build any menu those that have js do not work, or do not install them, in inspecting browser elements it says that the function that appears first is not defined and so with all menus

  2.   Eduardo said

    Excellent contribution :)

  3.   Cami said

    excellent I hope there are more people like you, who share their wisdom and knowledge to other people.