Want to create a simple, intuitive and easy-to-customize menu? This is how you can do it:
1. Firstly, open up the HTML document you want to add a menu to,
2. Then, create the following code in the place where you want your menu to appear:
(Edit any of the link*.html links to link to your other pages and edit the link name to match with your chosen page)
3. If you have a stylesheet linked or in the file, then continue to step 4, if not, create the following tags after the <title></title> tags:
4. Insert the following classes, into your stylesheet:
(Customize any of the values to match your page)
And voila! A finished menu, for your webpage.
1. Firstly, open up the HTML document you want to add a menu to,
2. Then, create the following code in the place where you want your menu to appear:
(Edit any of the link*.html links to link to your other pages and edit the link name to match with your chosen page)
| Code: |
| <div class=”simple-menu”><a href=”link1.html”>Link1</a><a href=”link2.html”>Link 2</a><a href=”link3.html”>Link 3</a></div> |
3. If you have a stylesheet linked or in the file, then continue to step 4, if not, create the following tags after the <title></title> tags:
| Code: |
| <style type=”text/css”></style> |
4. Insert the following classes, into your stylesheet:
(Customize any of the values to match your page)
| Code: |
| .simple-menu{
background-color:#FFFFFF; color:black; border:1px solid #000; margin-left:30%; margin-right:30%; text-align:center; } .simple-menu a{ color:black; margin:0px; text-decoration:none; } .simple-menu a:hover{ color:white; border-top:1px solid #666; border-bottom:1px solid #666; border-right:1px solid #666; border-left:1px solid #666; background-color:black; } |
And voila! A finished menu, for your webpage.
