Menu using css and html

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.

Источник

CSS Navigation Bar

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

and
elements makes perfect sense:

Example

Now let’s remove the bullets and the margins and padding from the list:

Example

• list-style-type: none; — Removes the bullets. A navigation bar does not need list markers
• Set margin: 0; and padding: 0; to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Responsive Navigation Menu Bar using HTML and CSS

Now I have added the necessary menu items here. Here I have basically added five menu items you can increase the amount if you want. Margin-left: 3rem has been used to keep each menu a bit away from each other. Here I have used the front size of the menu links 19 px and the color white. If you want to increase the size of these links a little, you can increase the size of the front here.

 class="nav-menu">  class="nav-item">  href="#" class="nav-link">Home   class="nav-item">  href="#" class="nav-link">Services   class="nav-item">  href="#" class="nav-link">Portfolio   class="nav-item">  href="#" class="nav-link">About   class="nav-item">  href="#" class="nav-link">Contact   

 .nav-menu  display: flex; justify-content: space-between; align-items: center; > .nav-item  margin-left: 3rem; > .nav-link font-size: 19px; color: white; > .nav-link:hover color: #1ae5f7; > 

Step 4: Create menu button

Above we have designed the Basic menu bar, now I will make it for Responsive Devices. First of all here I will create a menu button. Basically, in the case of responsive devices, menu items are completely hidden, instead we see a menu button. When we click on that menu button, we can see the complete menu items. I made this button by three lines. Which is built using the following HTML and CSS codes. I used width: 25px , height: 3px and background-color: white of each line. The lines are 5 pixels apart.

 class="hamburger">  class="bar">  class="bar">  class="bar">  

 .hamburger  display: none; > .bar  display: block; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: white; > 

Step 5: Make the menu bar responsive with css

Now I will make it for Responsive Devices. In this case, I did not use any bootstrap or CSS library. I made it responsive using only css.

@media only screen and (max-width: 668px)  .nav-menu  position: fixed; left: -100%; top: 5rem; flex-direction: column; background-color: #3d3d3d; width: 100%; padding-top: 20px; padding-bottom: 20px; text-align: center; transition: 0.3s; > .nav-menu.active  left: 0; > .nav-item  margin: 2.5rem 0; > 

Step 6: Determine what happens when you click on the menu button

The following CSS codes have been used to add animation effects to the menu button. When you click on that menu button, those three lines will join together to form a cross symbol. In this case, the lines number one and number three move at an angle of 45 degrees to each other and the line number two is not visible. This results in the number one and three lines being joined together to form a cross mark .

 .hamburger  display: block; cursor: pointer; > .hamburger.active .bar:nth-child(2)  opacity: 0; > .hamburger.active .bar:nth-child(1)  -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); > .hamburger.active .bar:nth-child(3)  -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); > 

Step 7: Activate the menu button using JavaScript

Now I have activated these buttons using JavaScript code. First I set the constants to one of three class functions. Here ‘.hamburger’, ‘.nav-menu’, ‘.nav-link’ have hamburger, navMenu, navLink constants respectively.

const hamburger = document.querySelector(".hamburger"); const navMenu = document.querySelector(".nav-menu"); const navLink = document.querySelectorAll(".nav-link"); 

hamburger.addEventListener("click", mobileMenu); navLink.forEach(n => n.addEventListener("click", closeMenu)); function mobileMenu()  hamburger.classList.toggle("active"); navMenu.classList.toggle("active"); > function closeMenu()  hamburger.classList.remove("active"); navMenu.classList.remove("active"); > 

Hope you know the basic JavaScript and understand the JavaScript structure above. If you have trouble understanding, you can watch the video tutorial above. Hopefully in this article I have explained how to extend the menu bar on a simple navigation using HTML CSS and JavaScript code. You can download the required source code.

Источник