Instruction: In this tutorial, we will create a real simple horizontal navbar using a list of links.
Carving out space for the horizontal navbar
- Using the two-column fixed-width layout template, select the header container and click the Insert Div button in the Layout tab. Select the After option from the Insert combo box and <div id="header"> from the other combo box. Assign an ID of nav and click OK.
TIP: ALTERNATIVELY, after selecting the header container, click the right arrow key and insert the div tags and ID attribute in Code view: <div id="nav">Links will go here</div>.
Add links inside of div
- Add a list of links inside the div:
<div id="nav">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</div>
Style links with CSS
- Add a style for the general buttons look (#nav a) and a style for the hover state (#nav a:hover)
NOTE: Must test in browser to see hover state.
/* Style buttons */
#nav a
{
background-color:#00F;
color:white;
border-right: 1px solid #FFF;
line-height: 1.2;
text-decoration: none;
padding: 0 25px;
}
/* Style hover state */
#nav a:hover
{
background-color:#09F;
}
NOTE: You may have notice spaces between the buttons. To create this problem, edit the links in the Code view by having ALL of the links on ONE line with NO white spaces between them:
<div id="nav">
<a href="#">Home</a><a href="#">Products</a><a href="#">Services</a>...
</div>
BONUS: If you want the buttons background color to extend the complete page width , create a rule for the #nav container:
#nav {background-color:#00F;}