Creating Website Menus using the UL Element


On your WordPress pages or blog you can create your own text-based menu that you can put anywhere on your post or page using HTML. You use links in an HTML unordered list. “UL” is the name of the HTML element used to create an unordered list. The three Items below are marked up with plain old HTML with a CSS class called “navlist1”. Right below is the three-item menu I created. Below that is the HTML code used. I also added horizontal lines just so that the menu is easier to see in this post.





<nav>
    <ul class="navlist1">
        <li><a href="#">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
    </ul>
</nav>

How To

Consider the code below. Your menu will be horizontal (display:inline), not the default vertical. The links do not go anywhere (href="#") on purpose since this is for example only. There are no markers (list-style-type: none;) on the list items because they are not needed and are removed with the code list-style-type: none.

nav .navlist1 li
 {
     display: inline;
     list-style-type: none;
     padding-right: 20px;
 }

Below is the rest of the CSS code used. Notice line 14. That is where we specify the colour to show when the user puts their mouse over the link. Once the mouse is moved away, it goes back to black.

nav .navlist1 li a:link {
   color: black;
   font-weight: normal;
}
nav .navlist1 li a:visited {
   color: black;
   font-weight: normal;
}
nav .navlist1 li a:focus {
   color: black;
   font-weight: bold;   
}
nav .navlist1 li a:hover {
   color: blue;
   font-weight: bold; 
}
nav .navlist1 li a:active {
   color: black;
   font-weight: bold;
}

Leave a comment

Your email address will not be published. Required fields are marked *