Html css menu with images

130+ Beautiful CSS Menus (Free Code + Demos)

Enjoy this huge collection of 100% free and open source HTML and CSS navigation menu code examples. All examples are easy to add to your own project.

1. Mega Dropdown

2. Building A Circular Navigation With CSS Transforms

3. CSS Menu — Text Fill On Hover

Filling the text with a different color on hover — a creative text effect. View this pen on full screen mode and enjoy this creative pen

4. Circle Links Menu

5. Full-page Navigation

6. CSS Only Fold Out Mobile Menu

7. Pure CSS Single Page Application

8. Randomly Generated CSS Blobby Nav

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter, and SVG filter. Also, has a pure CSS «off» click by resizing a label Enjoy!

9. Full-Page Navigation

10. Pure CSS CPC Full Page Nav

11. Full Page Nav CSS

12. Menu Hover Fill Text

13. Menu With Awesome Hover

14. Drop Down Menu

15. Navigation With Sub-Navigation

16. Menu Hover Underline

17. Apple TV Menu Interface (Chrome, Edge, Safari)

18. CSS Strange Nav

19. Off Canvas Menu Pure CSS

20. Navbar With Pure Css

21. Pure CSS Navigation Simple & Easy

22. Simple PureCss Dropdown Menu With Following Subnav

23. The Circular Menu

24. Navbar Interaction

25. Off-Canvas Menu On Pure CSS

26. Vertical Dark Menu With CSS

27. Barra De Navegación Con Css — Menú Bar

28. The More Menu

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

29. Pure CSS Circle Menu

Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.

30. CSS — Folding Menu

31. Moving Underline Nav Menu

32. 🌟 Circle Menu (Pure CSS) 🌟

33. Fun Hover Navigation

Fun navigation effect using CSS Keyframes. A quick jump back to the old school. Take a look and let me know what you think 👍🏼

34. Pure CSS Magic Line Navbar

I’ve always been fascinated by navbars that would have a line following your cursor while you hovered a link, so I decided to finally try my hand at making one with just CSS.

35. Position Sticky Can Do A Lot

36. CSS Only Drop Down Menu

37. Slide Out Navigation Menu

38. Pure CSS Menu Drawer W/ Off-click 🍔

39. 3D Navbar

40. Just Another Menu (Pure CSS)

Pure CSS Floating menu animation Inspired by https://www.uplabs.com/posts/options-floating-interaction design

41. 💪 CSS Menu Feat. Emoji

42. The Menu

43. CSS Only Perspective Menus 🦄

44. Dropdown Menu Animation

45. Pure CSS Fading Out For Siblings Menu Options On Option Hover

46. CSS-Only Nested Dropdown Navigation (ARIA)

Updated with ARIA roles and accessibility. Based off of a piece of code I did for @jzl’s portfolio navigation at http://jeselleobina.com/portfolio. Stay tuned for a full tutorial on Tuts+!

47. Fullscreen Menu Flexbox Method

48. Full Screen Navigation Overlay

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu across the entire screen. Codrops did a really nice set of demos with full screen overlay styles last year. I wan.

49. Mobile Navigation Animation

Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking.

Источник

16 CSS Sidebar Menus

Collection of hand-picked free HTML and CSS sidebar menu code examples from codepen and other resources. Update of July 2018 collection. 3 new items.

Related Articles

Author

Links

Made with

About a code

App Admin Menus

App admin menus. light/dark modes.

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

Author

Links

Made with

About a code

Menu Hover Slide Fill

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

Author

Links

Made with

About a code

Pure CSS Single Page Application

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

Author

Links

Made with

About the code

Menu Effect

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Only Navigation for Sidebar

CSS only mirror like navigation for sidebar.

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

Author

Links

Made with

About the code

CSS Sidebar Menu

HTML and CSS navbar and sidebar mega menu.

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

Dependencies: bootstrap.css, font-awesome.css

Author

Links

Made with

About the code

Purple Sidebar Menu

This is a reverse engineering of the «Hyperspace» design from HTML5 Up! https://html5up.net/hyperspace

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

Author

Links

Made with

About the code

Pure CSS Fly in Sidebar Navigation

A simple, multi-level sidebar navigation. Features pure css «fly in» subnav, that leaves icons of parent nav visible. Nav items will scroll ( overflow-y ) if needed. Uses transform s and transition s.

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

Author

Links

Made with

About the code

Sidebar Navigation Animation

Nothing like a little trendy body pushin.

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

Author

Links

Made with

About the code

Fixed Hover Navigation

Fixed sidebar drawer navigation, that expands on hover.

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

Author

Links

Made with

About the code

Fully Responsive CSS3 Sidebar Menu

A fully responsive sidebar menu without any need of JavaScript and using less than 200 lines of functional CSS code.

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

Author

Links

Made with

About the code

Sidebar Sliding Menu CSS

CSS sliding sidebar menu with scroll, no JS were used

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

Author

Links

Made with

About the code

3D Rotating Sidebar Navigation

A vertical navigation bar that switches from an icon to text with a cool animation.

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

Author

Links

Made with

About the code

Pure CSS3 Sidebar Menu

Pure CSS3 mega dropdown sidebar menu with animation..

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

Author

Links

Made with

About the code

Sidebar Menu CSS

CSS sidebar menu with hover show/hide.

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

Author

Links

Made with

About the code

CSS Sidebar Menu

Easy to use sidebar menu with HTML and CSS.

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

Author

Источник

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Пример простого меню из картинок с CSS анимацией

Продолжая изучать свойства анимации CSS3, решил применить полученные знания на практике — сделать какое-нибудь простенькое анимированное меню. В итоге получилось довольно симпатичное и очень простое меню с использованием иконок. Смысл его в том, что при наведении курсора картинка и тест плавно увеличиваются, как бы приближаясь к посетителю, анимация выполнена с помощью CSS3.
Сразу смотрим:
DEMO
Для реализации данного меню у себя на сайте или в блоге не нужно ничего дополнительно подключать, достаточно лишь добавить не большой HTML и короткий CSS коды. В Blogger-блоге можно использовать для этих целей стандартный гаджет HTML/JavaScript.
Итак, по кодам. HTML для меню выглядит так:

.macmenu <
height: 128px; /*высота общего блока*/
>
.button <
margin: 0 auto; /*выравнивание блока по центру*/
width: 720px; /*ширина всего блока с меню*/
>
.button a img,
.button a <
display: block;
float: left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height: 70px;
width: 70px;
>
.button a <
margin: 5px 15px;
text-align: center;
color: #fff;
font: normal normal 10px Verdana;
text-decoration: none;
word-wrap: normal; /*запрещает автоматически разрывать слова на перенос*/
>
.macmenu a:hover img <
margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/
height: 128px;
width: 128px;
>
.button a:hover <
font: normal bold 14px Verdana;
>

.macmenu <
height: 720px; /*высота всего блока*/
>
.button <
text-align: center;
margin: 0 10px; /*внешние отступы*/
>
.button a img,
.button a <
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height: 70px;
width: 70px;
>
.button a <
margin: 15px 5px;
text-align: center;
color: #000;
font: normal normal 10px Verdana;
text-decoration: none;
word-wrap: normal;
>
.macmenu a:hover img <
margin-left: -30%;
height: 128px;
width: 128px;
>
.button a:hover <
font: normal bold 14px Verdana;
height: 128px; /*высота ссылки при наведении курсора*/
>

Источник