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

Html dropdown menu template

Содержание
  1. How TO — Hoverable Dropdown
  2. Dropdown
  3. Create A Hoverable Dropdown
  4. Example
  5. Example Explained
  6. Example
  7. Example Explained
  8. 26 CSS Dropdown Menus
  9. Related Articles
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. Dropdown Dark/Light
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Gooey Dropdown Menu
  20. Author
  21. Links
  22. Made with
  23. About a code
  24. Drop Down Menu
  25. Author
  26. Links
  27. Made with
  28. About a code
  29. Navigation with Sub-Navigation
  30. Author
  31. Links
  32. Made with
  33. About a code
  34. Pure CSS Dropdown Menu
  35. Author
  36. Links
  37. Made with
  38. About a code
  39. The More Menu
  40. Author
  41. Links
  42. Made with
  43. About the code
  44. Drop Down Menu
  45. Author
  46. Links
  47. Made with
  48. About the code
  49. Molten Menu
  50. Author
  51. Links
  52. Made with
  53. About the code
  54. HTML & CSS Dropdown Menu
  55. Author
  56. Links
  57. Made with
  58. About the code
  59. Gradient Menu
  60. Author
  61. Links
  62. Made with
  63. About the code
  64. Main Menu
  65. Author
  66. Links
  67. Made with
  68. About the code
  69. CSS Menu
  70. Author
  71. Links
  72. Made with
  73. About the code
  74. CSS Dropdown Menu
  75. Author
  76. Links
  77. Made with
  78. About the code
  79. Horizontal Dropdown Menu
  80. Author
  81. Links
  82. Made with
  83. About the code
  84. Dropdown Menu
  85. Author
  86. Links
  87. Made with
  88. About the code
  89. Fancy Menu
  90. Author
  91. Links
  92. Made with
  93. About the code
  94. Recursive Hover Navigation
  95. Author
  96. Links
  97. Made with
  98. About the code
  99. Cool Dropdown Menu Effects
  100. Author
  101. Links
  102. Made with
  103. About the code
  104. CSS Dropdown Menu
  105. Author
  106. Links
  107. Made with
  108. About the code
  109. Dropdown Menu
  110. Author
  111. Links
  112. Made with
  113. About the code
  114. Simple Pure CSS Dropdown Menu
  115. Author
  116. Links
  117. Made with
  118. About the code
  119. Simple Pure CSS Dropdown Menu
  120. Author
  121. CSS Dropdowns
  122. Example
  123. Example Explained
  124. Dropdown Menu
  125. Example
  126. Create Dropdown Menu Using HTML and CSS
  127. Dropdown Menu Using Only HTML and CSS Project Preview👇
  128. CSS Code For Dropdown Menu:-
  129. Final Output Of Dropdown Menu Using CSS:
  130. Live Preview Of Dropdown Menu:-
  131. Which code editor do you use for Dropdown Menu coding?
  132. What is a drop-down Menu?
  133. What is the purpose of drop down menu?
Читайте также:  Using lists in java example

How TO — Hoverable Dropdown

Learn how to create a hoverable dropdown menu with CSS.

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create A Hoverable Dropdown

Create a dropdown menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Источник

26 CSS Dropdown Menus

Collection of hand-picked free HTML and CSS dropdown menu code examples from codepen and other resources. Update of July 2019 collection. 9 new items.

Author

Made with

About a code

Pure CSS dropdown dark/light.

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

Author

Made with

About a code

Gooey Dropdown Menu

Compatible browsers: Chrome, Edge, 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

Pure CSS Dropdown Menu

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

Author

Made with

About a code

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.

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

Author

Made with

About the code

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

Author

Made with

About the code

Molten Menu

This combines a CSS drop down menu, and the oozing effects of liquid flame.

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

Demo image: HTML & CSS Dropdown Menu

Author

Made with

About the code

HTML & CSS Dropdown Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Gradient Menu

Author

Made with

About the code

Gradient Menu

Responsive gradient dropdown menu.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Horizontal menu with dropdown effects in HTML and CSS.

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

Demo image: CSS Menu

Author

Made with

About the code

CSS Menu

No JS — be sure to check out the mobile menu.

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

Demo image: CSS Dropdown Menu

Author

Made with

About the code

CSS Dropdown Menu

HTML and CSS dropdown menu with nice effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Horizontal Dropdown Menu

Pure CSS horizontal dropdown menu with nice transitions and beautiful palette.

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

Demo image: Dropdown Menu

Author

Made with

About the code

Cool HTML & CSS dropdown menu.

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

Demo image: Fancy Menu

Author

Made with

About the code

Fancy Menu

Fancy dropdown menu in HTML and CSS. Inspired by https://dribbble.com/shots/1075480-Ui-Kit-Hotel

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

Demo image: Recursive Hover Navigation

Author

Made with

About the code

Recursive Hover Navigation

Only CSS recursive hover nav.

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

Demo image: Cool Dropdown Menu Effects

Author

Made with

About the code

Cool Dropdown Menu Effects

Cool dropdown menu pure CSS effects.

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

Author

Made with

About the code

CSS Dropdown Menu

Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

Demo image: Dropdown Menu

Author

Made with

About the code

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

Demo image: Simple Pure CSS Dropdown Menu

Author

Made with

About the code

Simple Pure CSS Dropdown Menu

Menu with dropdown made only in CSS, with a line that follow the hover on the line.

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

Demo image: Simple Pure CSS Dropdown Menu

Author

Made with

About the code

Simple Pure CSS Dropdown Menu

Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.

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

Author

Источник

CSS Dropdowns

Cinque Terre

Create a dropdown box that appears when the user moves the mouse over an element.

Example

.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
>

.dropdown:hover .dropdown-content display: block;
>

Example Explained

HTML) Use any element to open the dropdown content, e.g. a , or a element.

Use a container element (like ) to create the dropdown content and add whatever you want inside of it.

Wrap a element around the elements to position the dropdown content correctly with CSS.

CSS) The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a «card».

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Create a dropdown menu that allows the user to choose an option from a list:

This example is similar to the previous one, except that we add links inside the dropdown box and style them to fit a styled dropdown button:

Example

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content display: block;
>

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn background-color: #3e8e41;
>

Источник

Create Dropdown Menu Using HTML and CSS

Hello Coder! Welcome to the Codewithrandom blog. In this blog, we learn how to create a Dropdown Menu Using HTML and CSS. When you hover over the link in the navbar its shows a dropdown menu on links hover.

We use Html for creating the Structure of the Dropdown Menu by creating a navbar And Use Css for styling the Dropdown menu.

Dropdown Menu Using HTML and CSS

A “dropdown” menu resembles a list of choices but is concealed within a button or other element. When the user clicks on the button, the dropdown menu is revealed. This blog post will discuss how to make a sidebar dropdown menu using HTML and JavaScript.

master frontend development ebook cover

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

Dropdown Menu Using Only HTML and CSS

CSS Code For Dropdown Menu:-

@import url(https://fonts.googleapis.com/css?family=Open+Sans); @import url(https://fonts.googleapis.com/css?family=Bree+Serif); body < background: #ebf0f5; font-size: 22px; line-height: 32px; color: #ffffff; word-wrap: break-word !important; font-family: "Open Sans", sans-serif; >a < color: #fff; >#container < margin: 0 auto; >nav < margin: 50px 0; background-color: #0f131f; >nav ul < padding: 0; margin: 0; list-style: none; position: relative; >nav ul li < display: inline-block; background-color: #0f131f; >nav a < display: block; padding: 0 10px; color: #fff; font-size: 20px; line-height: 60px; text-decoration: none; >nav a:hover < background-color: #5f5c5c; >nav ul ul < display: none; position: absolute; top: 60px; >nav ul li:hover > ul < display: inherit; >nav ul ul li < width: 170px; float: none; display: list-item; position: relative; >nav ul ul ul li < position: relative; top: -60px; left: 170px; >h1 < width: 670px; color: black; font-size: 1.4rem; >li > a:after < content: " +"; >li > a:only-child:after

Step1:Using the Google import link, we will first add a few new typeface styles to our drop-down menu. The two new font families Open Sans and Bree Brif will be added to our effort.

The background will now be set to a light blue using the body tag selector, and the font size property will be used to set the typeface height to “22 px.” We will add a line height of 32 pixels using the line height attribute, and the font color is set to white.

@import url(https://fonts.googleapis.com/css?family=Open+Sans); @import url(https://fonts.googleapis.com/css?family=Bree+Serif); body

Step2:Using the tag identifier (a,nav), we will now set the background property to “black,” the margin to 5 opx, and the colour to “white.” We will also set the margin using the navbar tag selector.

By using the “a” tag selector, we will also set the display as “block” and the font height as 20px for our drop-down menu as we set the position as inline block for it.

Also using the hover property we will add an hover as the user hover over the navbar link the background color changes of the icon sd “Gray color”.

< color: #fff; >#container < margin: 0 auto; >nav < margin: 50px 0; background-color: #0f131f; >nav ul < padding: 0; margin: 0; list-style: none; position: relative; >nav ul li < display: inline-block; background-color: #0f131f; >nav a < display: block; padding: 0 10px; color: #fff; font-size: 20px; line-height: 60px; text-decoration: none; >nav a:hover < background-color: #5f5c5c; >nav ul ul < display: none; position: absolute; top: 60px; >nav ul li:hover > ul < display: inherit; >nav ul ul li < width: 170px; float: none; display: list-item; position: relative; >nav ul ul ul li < position: relative; top: -60px; left: 170px; >h1 < width: 670px; color: black; font-size: 1.4rem; >li > a:after < content: " +"; >li > a:only-child:after

Now we have completed our Html and Css Code

Final Output Of Dropdown Menu Using CSS:

Live Preview Of Dropdown Menu:-

Dropdown Menu Using HTML and CSS

Dropdown Menu Using Only HTML and CSS

Here is our updated output with Html and Css. Hope you like Dropdown Menu Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

In this post, we learn how to create a Dropdown Menu Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Which code editor do you use for Dropdown Menu coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

What is a drop-down Menu?

A “dropdown” menu looks like a collection of options but is actually hidden inside a button or other element. The drop-down menu is displayed after the user selects the button. In this blog article, we’ll talk about creating a sidebar dropdown menu with HTML and JavaScript.

What is the purpose of drop down menu?

A drop-down menu’s primary function is to condense a lot of data and links into a small space. This aids in website administration and makes it easy for users to access key links, which improves user experience.

Источник

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