This post describes you how to create a simple and beautiful menu list using table.Usually we all in need of creating menu list for our blog but wonder how to do in simple and effective manner.The above menu list was created by means of a table and CSS along with it.This will be very effective for all the Bloggers and website owners all you have to do is change the color and the link to which you want your users to go.Lets see the which makes this menu list.
- <html>
- <style type ="text/css">
- td.menu{
- background-color:#359AFF;
- text-align:center;
- border:2px solid black;
- }
- td.menu:hover{
- background-color:#0167D8;
- }
- a.menu { color:#000000;
- font-family:arial;
- font-size:1em;
- }
- a.menu:visited { color:#232323; }
- a.menu:hover { color:#FFFFFF; }
- a.menu:active {color:#232323; }
- a.menu:link {text-decoration:none;}
- a.menu:visited {text-decoration:none;}
- </style>
- <body>
- <table cellpadding="5" cellspacing="5" width="150" border="0">
- <tr><td class="menu"><font face ="arial" size="2"><a class="menu" href="http://gadgetronicx.blogspot.in" target="_blank">ELECTRONICS</a></td></tr>
- <tr><td class="menu"><a class="menu" href="http://gadgetronicx.blogspot.in" target="_blank">GADGETS</a></td></tr>
- <tr><td class="menu"><a class="menu" href="http://gadgetronicx.blogspot.in" target="_blank">TECHNOLOGY</a></td></tr>
- </table>
- </body>
- </html>
Copy and paste the above code in your new html/javascript gadget.Now you need to change few things in the code inorder to make it work for your blog or website.Here exch link was embedded into a table inorder to give a menu like appearance.Here are the steps to personalise the code for your blog/website.
- In the 2nd line you can see we have defined the CSS for attractiveness of the menu list.You can change the colors of the visited,hover and link colors by replacing the color codes (#FFFFFF,#232323...etc) with your own color codes.You can obtain the HTML color codes here
- CSS plays an important role here the lines 3 to 19 defines the various attribute of the table and by adding a class ="menu" to the CSS we can specify the applied CSS to the table alone.By using class we can avoid the impact of CSS on various tables.
- Next step is to assign a table in line 22 for placing our links in a table and i have defined the table width as 150px and you must give the border value as 0 in order to make it look like a menu.
- Cell padding defines the distance between various cells and cellspacing defines the distanc between contents and borders of the cell.
- Now you have to define rows <tr> defines rows for menu.
- <td> in line 23 defines the column here we use a single row and a single column for the purpose of menu list.
- Border in the style attribute of <td> is optional but it gives better look to your menu list.
- <a> tag defines the link and you have to paste your desired link in the href="" attribute.
- And the text to be show should be placed in between the link <a> </a>
- You have to add the <tr> ..........</tr> in line 23 repeatedly by replacing the link in it alone to obtain your desired number of menu's
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.
