Красивое навигационное меню html css

16 CSS Horizontal Menus

Collection of hand-picked free HTML and CSS horizontal menu code examples from codepen and other resources. Update of December 2018 collection. 5 new items.

Related Articles

Author

Links

Made with

About the code

Pure CSS Magic Line Navbar

It’s pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line should move to whenever one of the links gets hovered.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

Links

Made with

About the code

Position Sticky Subnav

Sticky subnavigation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Perspective Menus

CSS only perspective menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hover Effect for Horizontal Menu

Pure CSS fading out for siblings menu options on option hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Menu Hover Line Effect

Nice and simple horizontal menu with hover line effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Horizontal Menu

Pure CSS horizontal menu concept with clip-path property.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Strikethrough Hover Effect for Menu

Hover effect for menu links. Use only one pseudo-element on link.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Lavalamp CSS Menu

Horizontal CSS menu with lavalamp hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Horizontal Icon Navigation

Simple SVG icon horizontal navigation with shadows using flex-box .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Slide Horizontal Menu

This is a CSS only horizontal slide menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Skewed Menu in HTML and CSS

Using CSS3 properties to make a no-mainstream skewed menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Horizontal Navigation Effects

Beautiful hover effects for horizontal navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simple Menu Navigation

Just a simple horizontal menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Transparent Fading Navigation Bar

Transparent fading horizontal navigation bar with mask image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

25 creative CSS menus (creative examples)

A good user flow contributes enormously to a successful website. The content, positioning and appearance of your menu/navigation should therefore be well thought out. Here you can find some inspiration and examples for your own CSS menu!

Partially in this list are “normal” CSS menus, for a very simple reason: the usability comes first and only then the appearance. Normal menu bars can also look very chic. With the right effects and animations they become a real eye-catcher.

The same of course applies to mobile displays, often called “hamburgers”. I have also compiled a large collection of CSS hamburger menus for you in the linked post.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Cool Nav Menu Hover

See the Pen Nav Menu Hover by Hans Engebretsen (@hans) on CodePen.

Author: Hans Engebretsen;
Coded in: HTML, CSS (SCSS);

#2 Sticky Navigation Menu with Smooth Scrolling

Author: Praveen Bisht;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);

#3 Pure CSS DropDown Menu

Author: Andor Nagy;
Coded in: HTML, CSS;

#4 Accessibility menu

Author: Lee Kiernan;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#5 CSS Menu hover effects

Author: Sarath AR;
Coded in: HTML, CSS;

#6 Icon Menu

See the Pen Nav/Menu Button by Graham Pyne (@gpyne) on CodePen.

Author: Graham Pyne;
Coded in: HTML, CSS;

#7 Snap.svg Menu animation

Author: romagny jerome;
Coded in: HTML, CSS (SCSS), JS (Snap.svg);

#8 Standard Nav Bar

See the Pen Nav Bar by Justin (@nilbog) on CodePen.

Author: Justin;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#9 Half-page Menu

See the Pen menu by mp_graphic (@mp_graphic) on CodePen.

Author: mp_graphic;
Coded in: HTML, CSS, JS (jQuery);

#10 CSS menu transitions

Author: Khaos;
Coded in: HTML, CSS;

#11 Vertical Navigation Menu

Author: Madalin Tudose;
Coded in: HTML, CSS, JS (jQuery);

#12 Portfolio Icon Nav

See the Pen Portfolio by Ridho Ahmad Batubara (@beteer) on CodePen.

Author: Ridho Ahmad Batubara;
Coded in: HTML, CSS, JS (jQuery);

#13 Responsive navigation multilevel

Author: Stéphanie Walter;
Coded in: HTML, CSS (Less), JS (jQuery);

#14 Nav Menu Design

See the Pen Nav Menu Design by Abdullah Al Amin (@billionbd) on CodePen.

Author: Abdullah Al Amin;
Coded in: HTML, CSS, JS;

#15 Full page drop down – GSAP

Author: Rath;
Coded in: HTML, CSS, JS (jQuery, TweenMax.js);

#16 Lavalamp CSS Menu

Author: Patak;
Coded in: HTML, CSS;

#17 Circle Nav

See the Pen Circle Nav by Corey Roth (@coreyroth) on CodePen.

Author: Corey Roth;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#18 Magic Line Menu

Author: Collin Smith;
Coded in: HTML (Pug), CSS (Stylus), JS (jQuery);

#19 Sliding Menu

Author: Florian-Gropp;
Coded in: HTML, CSS, JS;

#20 Another Circle Menu

See the Pen circle menu by Pierre (@Piewe) on CodePen.

Author: Pierre;
Coded in: HTML, CSS, JS;

#21 Pure CSS One page vertical navigation

Author: Hrtzt;
Coded in: HTML (Pug), CSS (Sass), JS;

#22 CSS Menu Concept (Clip-path)

Author: Charlie Marcotte;
Coded in: HTML (Pug), CSS (Sass), JS;

#23 💪 CSS menu feat. emoji

Author: Piotr Galor;
Coded in: HTML, CSS, JS;

#24 Pure CSS Menu Navigation

Author: Izzy Skye;
Coded in: HTML, CSS, JS;

#25 Pure CSS Menu

See the Pen Pure CSS Menu by Karim Khan (@icodefx) on CodePen.

Author: Karim Khan;
Coded in: HTML, CSS, JS;

Conclusion

Did you code your own fancy menu, which should appear in this list? Please let me know! 🙂

Note: All buttons are all published on codepen.io and not by me .

Not enough? Then this could be something for you:

Источник

113 Modern CSS menu examples

See the Pen PureCSS Menu by Jason Tyler (@jasontyler) on CodePen.

Dev: Jason Tyler

Pure CSS Menu – #13

Dev: Ivan Grozdic

Pure CSS menu

See the Pen Pure CSS menu by Antonija Šimić (@tonkec) on CodePen.

Dev: Antonija Šimić

Pure CSS Drawer Menu with overlay

Dev: Mattia Astorino

CSS Menu Concept – #codepenchallenge

Pure CSS Menu Animation

See the Pen Pure CSS Menu Animation by Charlie Marcotte (@FUGU22) on CodePen.

Dev: Charlie Marcotte

Pure CSS Menu Drawer w/ off-click #CodePenChallenge

Hamburger + clip-path

Dev: Mikael Ainalem

Stripe Like CSS Only Menu

Dev: smpnjn

App Admin Menus + Light/Dark Modes – With Tailwind CSS

Dev: Rob Stinson

Animated Sidebar Left

Dev: Sergio Andrade

See the Pen Navi Bar by Yuhomyan (@yuhomyan) on CodePen.

Dev: Yuhomyan

Gooey Dropdown Menu

Dev: Mark Eriksson

Gooey Menu – CSS Only

Dev: Matthew Sechrest

Neumorphism context menu

Dev: Bar Hatsor

Fullscreen Menu Enter

Dev: alphardex

List Item Hower Effect

Dev: Abhinav Kumar

Overlay Css menu

Dev: Thibault D

CSS Swinging Panel Menu

Dev: Seth Abbott

CSS Menu Concept (Clip-path)

Dev: Charlie Marcotte

CSS menu feat. emoji

Dev: Piotr Galor

Flower CSS Menu

See the Pen Untitled by Lars Moelleken (@voku) on CodePen.

Dev: Lars Moelleken

Dropdown Menu

Dev: Kyle Lavery

CSS Hamburger Menu

Pure CSS menu cutout effect

Dev: Zach Saucier

Yet Another Pure CSS Menu

See the Pen Yet Another Pure CSS Menu by Colin Hall-Coates (@Oka) on CodePen.

Dev: Colin Hall-Coates

Pure CSS Hamburger fold-out menu

Dev: Erik Terwan

Side Sliding Menu CSS

Dev: Eduard L

iOS style sliding menu

Dev: Jason Howmans

See the Pen menu by Arefeh hatami (@arefeh_htmi) on CodePen.

Dev: Arefeh hatami

Hamburger Menu

Dev: Yuhomyan

Three Fancy Link Hover Effects

Dev: James Hancock

Navigation Dotted Hover Effect

Dev: whisnuys

Context Menu

Vertical color-adapting CSS menu

Dev: Ines Montani

Css Menu Hover Effect

See the Pen Css Menu Hover Effect by Mehmet Burak Erman (@mburakerman) on CodePen.

Dev: Mehmet Burak Erman

Cool css menu

Dev: Fivera

CSS Menu Transition

Dev: Sarath AR

A CSS Menu Toggle using jQuery

Dev: Juwan Petty

CSS menu transitions

Pure CSS Menu

See the Pen Pure CSS Menu by Robin Brons (@bronsrobin) on CodePen.

Dev: Robin Brons

Pure CSS Menu

See the Pen Pure CSS Menu by Colin Hall-Coates (@Oka) on CodePen.

Dev: Colin Hall-Coates

CSS Menu hover effects

Dev: Sarath AR

Menubar Drop Down Style With CSS

Dev: Teja Sukmana

Pure CSS Menu Dropdown

Dev: Monkey Raptor

Slidey CSS Menu

See the Pen Slidey CSS Menu by Ian Gloude (@igloude) on CodePen.

Dev: Ian Gloude

See the Pen Menu css by @BrawadaCom (@Anna_Batura) on CodePen.

Dev: @BrawadaCom

Context menu with Feather icons

Dev: Håvard Brynjulfsen

Text fill on hover

Dev: G Rohit

Full-page navigation

Dev: Cassandra Rossall

Animated Menu

See the Pen Animated Menu by Una Kravets (@una) on CodePen.

Dev: Una Kravets

Off canvas menu

Dev: Mark Murray

Randomly generated CSS blobby nav

Pure CSS CPC full page nav

Dev: Alex Hart

CSS only fold out mobile menu

Dev: Cyd Stumpel

Menú horizontal / ítems verticales

Pure CSS Menu

Dev: Ehsan Amiri

Flexible radial CSS menu [POC]

Dev: iGadget

CSS – Menu Circular (LESS)

Dev: Dennis Calazans

Cool Pure CSS Menu!

Dev: Lucas Reis

Button Menu

See the Pen Button Menu by Alex Hripak (@alexh58) on CodePen.

Dev: Alex Hripak

Tilted CSS Menu

Dev: Felix Rilling

CSS Menu Animation

Menu Hover Fill Text

Dev: alphardex

Menu with awesome hover

See the Pen menu with awesome hover by Swarup Kumar Kuila (@uiswarup) on CodePen.

Dev: Swarup Kumar Kuila

CSS Navigation Bar

Dev: Jasmine G

Menu Hover Underline

Dev: alphardex

CSS Strange Nav

Sweet circular menu

Dev: Thomas

Flip Out CSS Menu

Dev: Cody Hadsall

SVG and CSS Menu

Dev: Ghost Rider

See the Pen CSS menu by Edison Mora (@Zerchan) on CodePen.

Dev: Edison Mora

UI Cards CSS Menu

Dev: Sergiu N.

Simple CSS menu

See the Pen Simple css menu by Surkov Dmitriy (@mast) on CodePen.

Dev: Surkov Dmitriy

Navbar Interaction

Dev: Himalaya Singh

Off Canvas Menu (CSS)

Barra de navegación con css – Menú bar

Dev: Dave Mendoza

Vertical Dark Menu with CSS

Dev: Alberto Leon

Moving Underline Nav Menu

Dev: Bennett Feely

Futuristic 3D Hover Effect

Dev: Jouan Marcel

See the Pen 3D Navbar by Chenius (@chenius) on CodePen.

Dev: Chenius

Just Another Menu(Pure CSS)

Dev: Akhil Sai Ram

Simple radial menu

See the Pen Simple radial menu by Nikolay Talanov (@suez) on CodePen.

Dev: Nikolay Talanov

Filter Menu

See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.

Dev: Arjun Amgain

Fullscreen Menu Flexbox Method

Dev: Marcus Hall

Mobile navigation animation

Dev: Karlo Videk

Animated Tab Bar

See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl) on CodePen.

Dev: abxlfazl khxrshidi

Colourful Flower Popup Menu

Dev: Jasper LaChance

Multi level css only push menu

Pure CSS3 Mega Dropdown Menu With Animation (Vertical)

Dev: Rizky Kurniawan Ritonga

Overlay menu

See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.

Dev: Ivan Grozdic

Floatting Draggable Menu (Messenger like)

Dev: Andy Pagès

Animated Tab Bar

See the Pen Animated Tab Bar v.2 by abxlfazl khxrshidi (@abxlfazl) on CodePen.

Dev: abxlfazl khxrshidi

Drop-down menu

See the Pen Drop-down menu by Ivan Grozdic (@ig_design) on CodePen.

Dev: Ivan Grozdic

Social App Menu

Dev: Matt Hoiland

Full screen burger menu

Dev: Paul Sullivan

PURE CSS SIDEBAR TOGGLE MENU

Dev: Jelena Jovanovic

Pure CSS Header Menu

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.

Dev: Nikolay Talanov

Pure CSS Circle Menu

Dev: Hadar Weiss

Burger Menu inspired by Material Design

Dev: Victor Freire

Another menu concept

See the Pen Another menu concept by Rune Sejer Hoffmann (@RSH87) on CodePen.

Dev: Rune Sejer Hoffmann

Perspective Split Text Menu Hover

Dev: James Bosworth

Pure CSS Hamburger Menu & Overlay

Dev: Brad Traversy

Expanding Burger/Menu Icon

Dev: Joe Harry

Menu Hover Line Effect

Dev: Mehmet Burak Erman

Dropdown menu

Dev: Leena Lavanya

CSS Grid Menu Panels

Dev: Ryan Mulligan

SVG UI Navigation Concept

Dev: Alex Permyakov

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

Источник