March 1Mar 1 Administrators CSS Navigation Bars A vertical navbar: Home News Contact About A horizontal navbar: Home News Contact About CSS Navigation Bars Having an easy-to-use navigation is important for any website! CSS navigation bars are an important component of web design. Navigation bars helps users to easily navigate between different sections of a website. Navigation bars are typically built with HTML list elements ( <ul> and <li>), and then styled with CSS to get a great look. Navigation bars are typically located at the top or at the side of a webpage. Navigation Bar = List of Links A navigation bar needs standard HTML as a base. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense: Example <ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> Try it Yourself » Now let's remove the bullets and the margins and padding from the <ul> element: Example ul { list-style-type: none; margin: 0; padding: 0; } Try it Yourself » Example explained: Set list-style-type: none; - Removes the bullet points from list Set margin: 0; - Resets default browser margins Set padding: 0; - Resets default browser paddings Note: The HTML and CSS code in the example above is the base code used for both vertical and horizontal navigation bars, which you will learn more about in the next chapters. ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.