The navigation was necessary for any website. Navigation could help the user to access all of the menus. The CSS is used to make the boring HTML menu transform into the looking-good navigation bars. However, the UX is important to note too.
In this tutorial, you’ll learn about the CSS3 navigation bar. I’ll show you how to make a simple navigation bar that easy to learn by beginners. Let’s Begin!
List of Links
The navigation bar is a list of links. You need to use a standard HTML as a base of the navigation bar before using the CSS. You can use
- and
- elements to make your first simple navigation bar.
Example:
-HTML
<!DOCTYPE html> <html lang="en"> <head> <title>CSS3 - Navigation Bars</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- navigation bar --> <h2>My First Navigation Bar</h2> <ul> <li><a href="index.html">Home</a></li> <li><a href="pagelink1.html">Page 1</a></li> <li><a href="pagelink2.html">Page 2</a></li> <li><a href="pagelink3.html">Page 3</a></li> </ul> </body> </html>
#css3 #css
1.15 GEEK