We have received a number of requests from Dreamweaver users about creating menus, and we’re here to help! In this ‘Your Questions Answered’ post we’re tackling the basics of creating a menu in Dreamweaver. We’ll get more advanced in later posts, exploring how to create drop down menus and responsive menus, but for now let’s get started with a solid foundation to build off of.
If you are new to Dreamweaver, see our previous ‘Your Questions Answered’ post which walks you through setting up a site in Dreamweaver. Once you have a site set-up, you’re ready to rock this tutorial.
Let’s get coding!
Create a new page in Dreamweaver
- Select File > New
- Choose the default option (HTML), and click Create.
- Select File > Save As and save the file as menu.html
Create an unordered list in the body of the HTML page
Your code should look something like this:
__
__
__
__
__
Depending on the view that you are in, you should be able to see an unordered list in the Design View or Live view. Notice that each item in the list is associated with an tag. You specify the destination for each item in the tag. For example, when you click Home, the browser opens the home.html page.
We have not yet created the destination pages. So, clicking the links now will not lead you anywhere.
Remove the bullets from the list
You do not want bullets in your CSS menu, but never fear. We we will be using CSS to take care of this! After you are done with the code, click the Design view. The bullets in the list should disappear leaving you with a clean list.
Just below the “tag, create the style tags:
Insert this piece of CSS code in between the style tags.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
list-style-type:none: removes the bullets from the ordered list.
Setting margins and the padding to 0 overrides any browser default settings.
Specify a width for each of the list items
If we do not specify a width for the list items, they will take up a default width. To specify the width, we will be specifying a style for the “tag associated with each item in that list.
Below is the CSS code for the ul tag. Insert this piece of code:
a {
display: block;
width: 60px;
}
display:block: This makes the whole area around the link clickable, not just the text.
By specifying the width at 60px, we are overriding any default width settings of the browser.
You will not notice any major change in the design view except for a border around each item in the list.
Lining up the menu items
Since we are creating a horizontal menu, we want to line up the menu items next to each other. To do this, we have to first remove the line break that is associated with each item. While you don’t see the line break in the code, each block element is associated with a line break before and after the item.
To do this, use:
li {
display: inline;
}
Good, now the line breaks are gone. You won’t see anything happening in your Design view, but that’s okay. By default, each of the items take up the entire width of the browser. When we float them to the left, we tell each of those items to move to the left and make space for the next item in the list to move up and take up the empty space on the right.
li {
display: inline;
float:left;
}
You should now have the menu items lined up next to each other. Perfect.
