How to Create a Simple CSS Navigation Menu Code
Navigation menus connect the different pages of your site using hyperlinks. You need only write the navigation markup once, and then copy it to every page. Web design conventions require that you write the content of the menu in HTML and put the formatting instructions in CSS. By using CSS correctly, you reduce clutter in your HTML files and may easily change the formatting of your navigation menu in future website redesigns.
Other People Are Reading
Instructions
-
-
1
Create an unordered list in HTML using the <ul> element to define the list, and the <li> list item element for each item in the list, with each item corresponding to the links you want to appear in your navigation menu. Inside each <li> tag, use the <a> anchor element to create the actual hyperlink.
-
2
Add CSS markup to override Web browser defaults for formatting the appearance of lists. Use the CSS selector “ul” for “unordered list” and create a declaration group. For a basic default solution, set the “list-style-type” property to “none” and the “padding” and “margin” properties both to “0”. If your layout requires different values, or additional declarations, substitute or add them as necessary.
-
-
3
Choose whether you plan to use a vertical menu bar or a horizontal one. For a vertical one, you don’t need to add any extra information except as necessary to reflect your site’s layout requirements. For a horizontal menu, add an extra declaration to your “ul” group, setting the “display” property to “inline.” Create another declaration group using the CSS selector “li” for “list item.” Here, use the “padding” property to create left and right padding between menu entries. This way the text of your menu items won’t run together. For example, a value of “0px 10px 0px 10px” will create 10 pixels of padding on the left and right ends of the navigation bar, and 20 pixels of padding between menu items.
-
4
Isolate your menu bar formatting if you plan to use other unordered lists in the body of your website. Do this by using a complex CSS selector such as “header ul” instead of just “ul”. Create an HTML container around the header area of the page by using the <div> element, and give it the id “header” to connect it with the CSS selector. If you do this, then your formatting instructions will only pertain to the “header” of the pages on your site, and only the parts of the header which are an unordered list. Only the navigation menu fits this description. You may also wish to do the same thing for other declaration groups, such as “header li” instead of “li” for list items in the navigation menu.
-
1
