simple menu

Navigation menu (or) menu bar creation is very simple. Little knowledge of HTML & CSS is needed. First of all, it is to be decided – whether Horizontal menu or Vertical menu. Majority of the Websites are considering horizontal menu bars. The new generation web sites are deigned with nested navigation bars / menu bars using java scripts. Before making nested menus / sliding menus / java script menus, it is vital to know the basic concept of css menu.

Step-1: Let us consider the horizontal menu /navigation bar with step by step method. The basic menu bar / Horizontal navigation bar with the menu items -“HOME"," ABOUT US", 'SERVICES","CONTACT”. The basic HTML code for menu bar shall be:
<html> <head> </head> <body> <ul> <li> HOME </li> <li> ABOUT US </li> <li> SERVICES </li> <li> CONTACT </li> </ul> </body> </html>
With the above code, the output would be:
  • HOME
  • ABOUT US
  • SERVICES
  • CONTACT
Step-2: Link the Web pages to the concerned menu item names. For linking an web page to the menu item name, tags of "a herf=www.yoursite.com/index" and "/a" to be used. Hence the code shall be:
<html> <head> </head> <body> <ul> <li> <a href=" # "> HOME </a> </li> <li> <a href=" # "> ABOUT US </a> </li> <li> <a href=" # "> SERVICES </a> </li> <li> <a href=" # "> CONTACT </a> </li> </ul> </body> </html>
With the above code, the output would be:
page: 1 of 4      NEXT

2 comments:

  1. simply better explanation

    ReplyDelete
  2. clearly explained. could you provide some css tree menus / js menus with source code? we will be thankful to you. Moreover, the menus are to be tested in Mozila

    ReplyDelete