Lecture
What is a Menu?
A menu on a webpage is a collection of links that allows users to navigate to different locations within a website.
Typically, it is found at the top of the webpage and can direct users to different pages or different sections within the same page.
Menu Example Code - 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>
Menu Example Code - 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); }
Creating the Menu List
Creating the Menu List
<ul class="nav-menu"> ... </ul>
First, let's create the menu list.
A menu list is created using the <ul> tag. The <ul> tag is used to define an unordered list.
A similar tag is the <ol> tag.
The <ol> tag is similar to the <ul> tag but is used to define 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