Lecture
What is a Menu?
A menu on a webpage is a collection of links that allows navigation to various locations on a website.
Typically, it is placed at the top of a webpage and can facilitate both navigation to different addresses and different sections within the same page.
Example Code for a Menu - HTML
<!-- Navbar links --> <ul class="nav-menu"> <li><a class="nav-link" href="#about">About</a></li> <li><a class="nav-link" href="#interests">Interests</a></li> <li><a class="nav-link" href="#memory">Memories</a></li> </ul>
Example Code for a Menu - CSS
.navbar .nav-menu { display: flex; align-items: center; background: white; } .navbar .nav-link { margin: 0 16px; font-size: 14px; font-weight: var(--weight-semibold); }
Structuring a Menu List
Structuring a Menu List
<ul class="nav-menu"> ... </ul>
First, structure the menu list.
The menu list is crafted using the <ul> tag. The <ul> tag is utilized to create a list.
There is a similar tag, the <ol> tag.
The <ol> tag is akin to the <ul> tag but is used for creating an ordered list.
Lessons in this chapter ยท Creating Navigation
- 1. What is a Container?
- 2. What is Navigation?
- 3. Styling the Navigation Bar
- 4. Styling Navigation div
- 5. Create a Logo
- 6. Difference Between span and p Tags
- 7. Creating a Menu
- 8. Configuring Menu Items
- 9. Styling the Menu
- 10. Creating a Button
- 11. Styling Buttons
- 12. Common Button Style
- 13. primary, secondary button styles
- 14. How to Style Buttons and Add Icons in Menus
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help