So let's start with the menu that is displayed in the top section of the window.
You have already done some preparatory work for this menu. You will no doubt remember the pretty color gradient that was saved as a one-pixel graphic. This is exactly what will now be used. First, however, the corresponding HTML structure for the menu area must be created. It could look like this:
<div class="header"> <div class="header-top"> <h1>Your tax advisor</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Home page</a></li> <li><a href="#">About us</a></li> <li><a href="#">How we work</a></li> <li><a href="#">How we work</a></li> <lia href="#">Contact</a></li> <li><a href="#">Imprint</a></li> </ul> </div> <div class="header-img"> </div> </div>
To design the background, the one-pixel graphic is included and repeated vertically until the entire element is filled.
.topmenu { background-image: url(../images/menue.jpg); background-repeat: repeat-x; width: 978px; height: 37px; float: left; }
The menu can then be formatted. In principle, there are no special features to consider here. Only the following aspects are decisive for such menus:
- Blenders the bullet points via list-style-type: none;.
- Ensures that the list entries are displayed next to each other.
As you already know, I work with a colour gradient at this point, which is implemented using a graphic. Of course, there are now numerous other options available for menus. Think of JavaScript frameworks such as jQuery, for example. Presenting all these options would of course go beyond the scope of this article. However, there have long been numerous online generators that can be used to create menus with just a few clicks. You can find one of them - without judging whether it is the most ingenious of its kind - at http://www.cssmenubuilder.com/.
In any case, I have opted for the following variant:
.topmenu ul { width: 100%; height: 37px; list-style-type: none; } .topmenu ul li { height: 37px; float: left; padding-right: 25px; padding-left: 25px; } .topmenu ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 37px; color: #fff; text-decoration: none; display: block; height: 37px; float: left; padding-right: 20px; padding-left: 20px; } .topmenu ul li a:hover { background-image: url(../images/menue-hover.jpg); background-repeat: repeat-x; background-position: left top; }
Only the hover state is actually decisive. If this event occurs, a different background graphic is displayed.
The right-hand menu
The website not only has a menu at the top, one is also displayed in the right-hand window area.
This menu belongs in the div area with the class content-right. For the development phase of the page, I have only stored dummy content there.
<div class="content-right"> <h2>Main menu</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
The area is first positioned in the appropriate place and in the desired size.
.content-right { width: 210px; float: right; padding-right: 20px; margin-top: 20px; border: 1px solid #eee; }
We continue with the definition of the actual menu. This time, however, the entries are one below the other. So you just have to make sure that the bullet points are hidden. The rest of the menu design is ultimately up to you.
.content-right ul { list-style-type: none; } .content-right ul li { padding-left: 45px; padding-top: 4px; padding-bottom: 4px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ccc; } .content-right ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; text-decoration: none; text-align: left; display: block; } .content-right ul li a:hover { color: #0b90d6; }The following image should now appear in the browser:
The bottom menu
There will be another menu in the footer area of the website. Here on PSD-Tutorials.de such a menu is also used to provide links to general information.
There is also a copyright notice on our website. Both things are actually quite typical for websites. First, the HTML structure again.
<div class="bottom"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">News</a></li> <li><a href="#">Control center</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Imprint</a></li> <lili><a href="#">Sitemap</a></li> </ul> <p>© Copyright 2014 by PSD-Tutorials.en</p> </div>
This is a simple ul list. Each list entry contains a menu entry. Below the ul list there is a p element containing the copyright notice. What is still missing is, of course, the CSS syntax.
.bottom { background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: left top; text-align: center; width: 1000px; height: 110px; float: left; }
How you design the footer area is ultimately up to you, of course. I use a color gradient again. But you can also use a simple background color or CSS3 syntax, for example. In the case of my graphic variant, however, it is crucial that repetition is prevented by background-repeat: no-repeat;.
First take a look at the result:
What stands out here are the white bars that are displayed next to the individual menu items. These are defined using various border-left specifications, which ultimately means that the specifications refer to the left-hand edge of the element.
Overall, the syntax for the bottom menu looks like this:
.bottom ul { margin-top: 30px; list-style-type: none; } .bottom ul li { display: inline; border-left-width: 1px; border-left-style: solid; border-left-color: #fff; } .bottom ul li a { font-size: 12px; color: #fff; text-decoration: none; padding-right: 15px; padding-left: 15px; } .bottom ul li a:hover { text-decoration: underline; } .bottom p { font-size: 12px; color: #fff; margin-top: 40px; } .bottom a { font-size: 12px; color: #fff; margin-top: 40px; } .bottom a:hover { text-decoration: none; }
In contrast to the top menu, there is a special feature here. In fact, no further graphic is loaded in the hover case. However, to make it clear to visitors that they are moving the mouse pointer over a link, the individual links are underlined when the hover event occurs.
At the end of this tutorial, the basic steps to the website have been completed. What is still missing now is to make the page look nicer. More on this in the next tutorials.
