In this tutorial we'll create a drop down menu using CSS. This method is complies to web standards, works on mobile and is very Google (SEO) friendly.
File > New > Blank Document.
File > Save - dropdownmenu.html
Make sure you're in design view.
Create a div and call it #nav. You can give it dimensions that fit with your site. I've created one that has a width of 800px & a height of 80px.
Inside the #nav div type out your menu buttons e.g. HOME, PRODUCT, CONTACT US.
Highlight the text & choose unordered list from the properties panel.
Highlight the first word home.
Insert > Hyperlink
Link: index.html page. Note: if you haven't created your pages to link to yet you should use the # character. This works as a placeholder.
Use the title to describe where your link is going. E.g. Camper van hire.
Ok
Repeat this for all your pages. Now we need to format the hyperlinks so that they look like buttons. We need to remove the default padding and margins and remove the bullet points.
Note: If you're working on a new document you'll have to create a new style sheet. If you're working on an existing website you can use your existing style sheet.
Click your css style shee in the CSS Design panel.
Add a selector by clicking the + button.
Name your selector: #nav ul
Make the padding & margins on all sides 0.
Make the: list-style-type: none (this will remove the bullets).
Note: Next we want to get the list horizontal instead of vertical.
Add a selector by clicking the + button.
Call your selector: #nav li
Change the float to: left.
Create a new selector called #nav a
From the properties add the values:
Padding: top 5px, bottom 5px, left 20px, right 20px
Display: Block Note: This will increase the active area of the link to the size of the surrounding list item.
Background colour: blue.
Pick a font and font colour.
Text-decoration: None (this will remove the underline from the hyperlinks).
Create a new selector called #nav a:hover (this will control your hover colour).
Choose a background colour.
Preview in a browser.
Note: The navigation should change colour as your move your mouse over it. Next we'll get the drop down menu to work.
To add a drop down to your current menu we need to add a new unordered list. To make this easy we'll turn off the CSS styling for a moment.
Under the Product link press enter and type the dropdown list e.g. Red Widget, Blue Widget, Green Widget.
Select the new menu items and choose 'indent' from the properties panel.
Add hyperlinks to the new list. Remember you can use # if you haven't created the pages yet.
Preview in a browser Note: Next we need to hide the new list and get it to activate only when you hover your mouse over the product menu item.
Note: We can now turn our CSS back on: View > Style Rendering > Display Styles
Create a new selector called #nav ul ul
In the properties choose:
Display: None
Position: Absolute
Create a new selector called #nav ul li:hover > ul
In the properties choose:
Display: Block (this with make the drop down menu appear when you hover over it).
Preview in a browser. Note: We now need to get it to stack vertically instead of horizontally.
Create a new selector called #nav ul ul li
In the properties choose: Float: None
Preview in a browser:
If you've got questions about this tutorial or if you're having trouble with it. Use the comment below for help.
Cheating: Here is the CSS:
Note: If the div tag you have your navigation inside is different from the name I've given mine here (#nav) then replace all occurrences with the name you have used.
0 Response to "How To Create Drop Down Menu In Html And Css"
Post a Comment