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

Html menu with icons

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

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

Источник

How TO — Menu Icon

If you are not using an icon library, you can create a basic menu icon with CSS:

Animated Menu Icon (click on it):

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

Example Explained

The width and the height property specifies the width and height of each bar.

We have added a black background-color , and the top and bottom margin is used to create some distance between each bar.

Animated Icon

Use CSS and JavaScript to change the menu icon to a «cancel/remove» icon when it is clicked on:

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

.container <
display: inline-block;
cursor: pointer;
>

.bar1, .bar2, .bar3 width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
>

/* Rotate first bar */
.change .bar1 transform: translate(0, 11px) rotate(-45deg);
>

/* Fade out the second bar */
.change .bar2

/* Rotate last bar */
.change .bar3 transform: translate(0, -11px) rotate(45deg);
>

Step 3) Add JavaScript:

Example

Example Explained

HTML & CSS: We use the same styles as before, only this time, we wrap a container element around each element and we specify a class name for each.

The container element is used to show a pointer symbol when the user moves the mouse over the divs (bars). When it is clicked on, it will execute a JavaScript function that adds a new class name to it, which will change the styles of each horizontal bar: the first and the last bar is transformed and rotated to the letter «x». The bar in the middle fades out and becomes invisible.

Источник

How to Create a Menu Bar with Icons in CSS: A Step-by-Step Guide

Learn how to create a stylish and functional menu bar with icons in CSS. This guide covers HTML and CSS structures, JavaScript functions, and CSS animation tools to help you create a responsive and visually appealing navigation menu.

  • Creating a Menu Icon with HTML and CSS
  • Creating a Navigation Bar with Icons
  • Create a Navigation Bar with Icons
  • Adding JavaScript Functionality to the Menu Icon
  • Using CSS to Create Animation Effects
  • Creating a Fixed Top Menu
  • Other code examples for creating a menu bar with icons in CSS
  • Conclusion
  • What do you do to get a menu when clicking on an icon?
  • How do I create a menu bar icon in HTML?
  • How do you stick the menu on top in CSS?

As websites become more advanced and interactive, users expect a more sophisticated user interface. One way to achieve this is by creating a menu bar with icons that appears when a user clicks on a menu icon. In this article, we will explain how to create a menu bar with icons in CSS, step-by-step.

Creating a Menu Icon with HTML and CSS

The first step in creating a menu bar with icons is to create a menu icon. This can be done by using HTML and CSS. There are different HTML and CSS structures that can be used to create a menu icon, such as the tag, the tag, or the

To create a visually appealing icon, we can use different CSS properties such as color, font-size, and line-height. For example, we can create a hamburger icon by using the tag and applying the following CSS properties: 

.icon  color: #333; font-size: 24px; line-height: 24px; >

We can then add this icon to our HTML code:

div class="menu-icon"> i class="icon fa fa-bars">i> div>

Creating a Navigation Bar with Icons

Once we have created the menu icon, we can move on to creating the navigation bar. To create a navigation bar that only contains icons, we can use the

    and
    tags. We can then apply different CSS properties to create a responsive navigation menu . For example, we can use the display property to change the layout of the navigation menu depending on the screen size:

@media screen and (max-width: 768px)  .navigation  display: none; > .navigation.show  display: block; > > 
div class="menu-icon"> i class="icon fa fa-bars">i> div> ul class="navigation"> li>a href="#">i class="fa fa-home">i>a>li> li>a href="#">i class="fa fa-user">i>a>li> li>a href="#">i class="fa fa-envelope">i>a>li> li>a href="#">i class="fa fa-bell">i>a>li> ul>

Create a Navigation Bar with Icons

In this video we’ll be creating a stylish navigation bar with icons, using plain HTML, CSS and Duration: 12:00

Adding JavaScript Functionality to the Menu Icon

To make the menu icon functional, we need to add a JavaScript function that adds a new class name to the navigation menu upon clicking the icon. We can use the addEventListener method to add a click event to the menu icon:

var menuIcon = document.querySelector('.menu-icon'); var navigation = document.querySelector('.navigation');menuIcon.addEventListener('click', function()  navigation.classList.toggle('show'); >);

Using CSS to Create Animation Effects

We can further enhance the menu icon by using CSS animation tools to create a menu icon that changes appearance upon clicking. We can use the transition property to animate the icon:

.icon  transition: transform 0.3s ease-in-out; > .icon.active  transform: rotate(90deg); > 
var menuIcon = document.querySelector('.menu-icon'); var icon = document.querySelector('.icon');menuIcon.addEventListener('click', function()  icon.classList.toggle('active'); >);

Creating a Fixed Top Menu

Finally, we can use position:fixed and top:0 in CSS to create a fixed top menu. This means that the menu bar will always be visible at the top of the screen, even when the user scrolls down. To create a fixed top menu, we can add the following CSS properties to our navigation menu:

.navigation  position: fixed; top: 0; width: 100%; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); >

Other code examples for creating a menu bar with icons in CSS

/*you can use the :checked or the :focus property on the icon you want the user to click and than change the display of the menu from none to whatver you want*/ #yourmenu < /*style*/ display: none; >#yourbutton < /*style*/ >#yourbutton:checked > yourmenu < display: block;/*whathever value you want*/ >/*sorry for the shitty english, hope to help someone with this concept*/

Источник

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