Главная » Языки программирования

Css menu templates code

Содержание
  1. 35 CSS Sidebar Menu Examples
  2. 102 CSS Menu
  3. Table of Contents
  4. Related Articles
  5. Author
  6. Links
  7. Made with
  8. About a code
  9. Menu
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. Fullscreen Overlay Navigation Bar
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Three Fancy Link Hover Effects
  20. Author
  21. Links
  22. Made with
  23. About a code
  24. Navigation Dotted Hover Effect
  25. Author
  26. Links
  27. Made with
  28. About a code
  29. Fullscreen Overlay Navigation Bar
  30. Author
  31. Links
  32. Made with
  33. About a code
  34. Context Menu
  35. Author
  36. Links
  37. Made with
  38. About a code
  39. Pure CSS Menu
  40. Author
  41. Links
  42. Made with
  43. About a code
  44. Neumorphism Context Menu
  45. Author
  46. Links
  47. Made with
  48. About a code
  49. Simple Navigation System
  50. Author
  51. Links
  52. Made with
  53. About a code
  54. CSS Menu
  55. Author
  56. Links
  57. Made with
  58. About a code
  59. Fullscreen Menu Enter
  60. Author
  61. Links
  62. Made with
  63. About a code
  64. Context Menu with Feather Icons
  65. Author
  66. Links
  67. Made with
  68. About a code
  69. CSS Hamburger Menu
  70. Author
  71. Links
  72. Made with
  73. About a code
  74. Text Fill on Hover
  75. Author
  76. Links
  77. Made with
  78. About a code
  79. List Item Hower Effect
  80. Author
  81. Links
  82. Made with
  83. About a code
  84. CSS-Only Marquee Effect
  85. Author
  86. Links
  87. Made with
  88. About a code
  89. CSS Full-Page Navigation
  90. Author
  91. Links
  92. Made with
  93. About a code
  94. Randomly Generated CSS Blobby Nav
  95. Author
  96. Links
  97. Made with
  98. About a code
  99. Full-Page Navigation
  100. Author
  101. Links
  102. Made with
  103. About a code
  104. Pure CSS Full Page Nav
  105. Author
  106. Links
  107. Made with
  108. About a code
  109. Fold Out Mobile Menu
  110. Author
  111. Links
  112. Made with
  113. About a code
  114. Menu Hover Fill Text
  115. Author
  116. Links
  117. Made with
  118. About a code
  119. Menu with Awesome Hover
  120. Author
  121. Links
  122. Made with
  123. About a code
  124. CSS Navigation Bar
  125. Author
  126. Links
  127. Made with
  128. About a code
  129. Menu Hover Underline
  130. Author
  131. Links
  132. Made with
  133. About a code
  134. Apple TV Menu Interface
  135. Author
  136. Links
  137. Made with
  138. About a code
  139. CSS Strange Nav
  140. Author
  141. Links
  142. Made with
  143. About a code
  144. Navbar with Pure CSS
  145. Author
  146. Links
  147. Made with
  148. About a code
  149. Navbar Interaction
  150. Author
  151. Links
  152. Made with
  153. About a code
  154. Off Canvas Menu Pure CSS
  155. Author
  156. Links
  157. Made with
  158. About a code
  159. Menu Bar CSS
  160. Author
  161. Links
  162. Made with
  163. About a code
  164. Vertical Dark Menu with CSS
  165. Author
  166. Links
  167. Made with
  168. About the code
  169. Moving Underline Nav Menu
  170. Author
  171. Links
  172. Author
  173. Links
  174. Made with
  175. About the code
  176. Navigation Menu
  177. Author
  178. Links
  179. Made with
  180. About the code
  181. 3D Navbar
  182. Author
  183. Links
  184. Made with
  185. About the code
  186. Just Another Menu
  187. Author
  188. Links
  189. Made with
  190. About the code
  191. Pure CSS Menu
  192. Author
  193. Links
  194. Made with
  195. About the code
  196. CSS Menu Feat. Emoji
  197. Author
  198. Links
  199. Made with
  200. About the code
  201. The Menu
  202. Author
  203. Links
  204. Made with
  205. About the code
  206. Menu Effect
  207. Author
  208. Links
  209. Made with
  210. About the code
  211. CSS-Only Nested Dropdown Navigation
  212. Full Page Off-Canvas Navigation
  213. Simple Radial Menu
  214. Accordion Menu
  215. Mobile Filter Menu
  216. Author
Читайте также:  Building compiler in python

35 CSS Sidebar Menu Examples

An agglomeration of the top free HTML and CSS sidebar menu code examples. These carefully selected CSS sidebar navigation menus are practical and utilize good color schemes ideal for web design. Moreover, many are responsive sidebars making them great for both desktop and mobile applications.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A Stylish CSS sidebar menu with excellent transition effects on hover over the menu items. It is created using HTML and SCSS. The menu items are highlighted with black bar and gives a smooth transition effect.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A modern and stylish sidebar menu with rounded corner in classic blue background created using pure HTML and CSS. On hover, it will change the background color to white to show the selection giving a very dignified look to the web page.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A decorous, collapsible, responsive sidebar menu created using pure HTML and CSS. On click, it opens a menu with a smooth transition and on hovering of menu items, it shows gradient background.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sophisticated, alluring side menu in black created with the slide effect on the sub menu items is created using HTML and CSS. When you hover over the side menu icons, menu items appears on the side in a block. When you hover over the menu items it gives a beautiful effect.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic collapsible sidebar menu with icons that has a smooth transition effects on hover. It is created using pure HTML and CSS. On hover over the menu, it expands the menu. When you hover over the menu item, it is highlighted with the light blue bar.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Code description:

An awesome triangular mobile CSS sidebar menu with amazing animation effects. It was created using HTML, SCSS, and JQuery. On click, the main page fades out to the right showing triangular sidebar items with nice animations.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A cool CSS sidebar menu with a 3D transition. It is created using HTML, SCSS, and Javascript. When the menu button is clicked, a 3D transition occurs on the main page reviling the sidebar menu to the left. The menu item is highlighted with a white background when you hover over them.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful, collapsible sidebar created using HTML, SCSS and JS(Babel). When you click on the menu bar, it expands covering the whole page with the different menu items listed on it and a close button to collapse the menu. When you hover over the menu items, it changes the text color to yellow.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated bootstrap sidebar menu with smooth transition effects created using HTML, CSS, and jQuery. It highlights the menu items when you you hover over them. It has used font awesome icons to show icons which gives a descent look to the web page.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing, vertical navigation bar that switches from an icon to text with a cool animation. It is created using HTML5 and CSS3. When you hover over the icons, it will change its face with smooth animation to show text giving a 3D look to the menu.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing sidebar menu for the medium screen with the sliding effect created using HTML, CSS, and Javascript. On click, it will expand the menu and push the main page right.

Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated sidebar with the menu icons created using HTML and CSS. When you hover over the icon on the menu, it highlights the menu with a beautiful purple color to give a decent look. This menu bar can be expanded and collapsed using the arrow on the top of menu. It also has a button to switch between dark mode and light mode in the web page.

Источник

102 CSS Menu

Collection of free HTML and CSS navigation menu code examples. Update of May 2020 collection. 27 new items.

Table of Contents

Author

Made with

About a code

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

Author

Made with

About a code

Fullscreen Overlay Navigation Bar

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

Author

Made with

About a code

Transitioning clip-path and pseudo-element transform s to create smooth link hovers.

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

Author

Made with

About a code

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

Author

Made with

About a code

Fullscreen Overlay Navigation Bar

Fullscreen overlay navigation bar with html & css neon effect.

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

Author

Made with

About a code

Context Menu

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

Author

Made with

About a code

Pure CSS Menu

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

Author

Made with

About a code

Neumorphism Context Menu

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

Author

Made with

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

Author

Made with

About a code

CSS Menu

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

Author

Made with

About a code

Fullscreen Menu Enter

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

Author

Made with

About a code

Context Menu with Feather Icons

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

Author

Made with

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

Author

Made with

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

Author

Made with

About a code

List Item Hower Effect

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

Author

Made with

About a code

CSS-Only Marquee Effect

A simple CSS-only marquee effect for a menu.

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

Author

Made with

About a code

CSS Full-Page Navigation

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

Author

Made with

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

Author

Made with

About a code

Full-Page Navigation

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

Author

Made with

About a code

Pure CSS Full Page Nav

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

Author

Made with

About a code

Fold Out Mobile Menu

CSS only fold out mobile menu.

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

Author

Made with

About a code

Menu Hover Fill Text

Menu hover fill text ( color + background-clip ).

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

Author

Made with

About a code

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

Dependencies: bootstrap.css, bootstrap-social.css, font-awesome.css

Author

Made with

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

Author

Made with

About a code

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

Author

Made with

About a code

Apple TV Menu Interface

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

CSS Strange Nav

Made a strange navigation. CSS only. Let’s Click!

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

Author

Made with

About a code

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

Author

Made with

About a code

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

Author

Made with

About a code

Off Canvas Menu Pure CSS

Off canvas menu pure CSS by using only CSS.

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

Author

Made with

About a code

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

Author

Made with

About a code

Vertical Dark Menu with CSS

Simple vertical dark menu with CSS and icons.

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

Author

Made with

About the code

Moving Underline Nav Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Author

Made with

About the code

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

Author

Made with

About the code

3D Navbar

3D navbar in HTML and CSS.

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

Author

Made with

About the code

Just Another Menu

Pure CSS floating menu animation.

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

Author

Made with

About the code

Pure CSS Menu

Pure CSS menu drawer with off-click.

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

Author

Made with

About the code

CSS Menu Feat. Emoji

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

Author

Made with

About the code

The Menu

Table contents style menu.

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

Author

Made with

About the code

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: CSS-Only Nested Dropdown Navigation (ARIA)

Author

Made with

About the code

CSS-Only Nested Dropdown Navigation

CSS only nested dropdown navigation with ARIA.

Demo Image: Full Page Off-Canvas Navigation

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

Demo Image: Simple Radial Menu

Simple Radial Menu

HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2016

Demo Image: Simple accordion menu with HTML, CSS and JavaScript

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2016

Demo Image: Mobile Filter Menu

Mobile Filter Menu

Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2016

Author

Источник

Оцените статью
© 2024 Программирование