Coding Bootcamp (HTML & CSS)

Step 4, Make your own menu

In this step, we go through how to create a nice menu on your own site!
Below I have created a new menu for the kennel site:



The HTML-file (index.html)

Creating a menu is a little more complicated when we have chosen to use an external CSS file. We know that links are created through <a> tags. The best way is to place these <a> tags in a unordered list (<ul>). This is a well accepted method in web design. A menu is also in many ways a list of different links, so it is logical to use some form of list then.

Inside the HTML file (index.html) we place our list within the semantic <nav>> element:



The CSS-file (viken.css)

Five definitions will be required in the css file to succeed with the menu. The <nav> element (1) must first be defined, then the <ul> list (2), and its <li> option (3), then define the <a> links (4) and how they should behave (hover , active, focus) (5).
Let's start with the<nav> element:



We start by setting the background color to "deeppink" and the height of the menu to 25px. The width of the menu (nav) should be 100%. Then we specify the settings for our <ul> element:



Here we specify the general settings for the entire list element. "list-style: none;" is used to remove the item that usually appears in a disordered list.We also ensure that margins and padding are 0px.
We then specify the list items <li> below:



List items are by default a block element, which means that each <li> element starts on a new row. Through the display property "display: inline;" we convert this behavior to an inline element instead, and everything comes on the same line.
Belowe we define the <a> links:



We define here which font to use and the size of the text. "text-deciration: none;" removes the underline from our links which is otherwise defult. The text color is set to white and finally we specify "padding-right: 15px;" giving a space between the links of m15 pixels.
We then decide what to do when the mouse pointer is over the links:



Here we only specify that the background color should be hot pink and the text color deepping instead of white when you hover over the links