Yahoo Search


Search the web Search this site

Live Search

Google Search

Custom Search

Translate this Web Site to

Tuesday, November 15, 2011

HTML Menu

Today I thought to share with you, how to create menus using HTML only. These menus will be very useful if you need to create web sites using only HTML.

image

Above menu is created using basic unordered list (UL), list items (LI), links and some CSS.

Below is the HTML code for the menu. In the code I have created the full menu using HTML lists and used CSS to format the list to work as a menu.

  1. <ul class="mainMenu">
  2.     <li class="mainMenuItem"><a href="Home.html" class="mainMenuLink">Home</a>
  3.         <ul class="subMenu">
  4.             <li class="subMenuItem"><a href="Page1.html" class="subMenuItemLink">e</a></li>
  5.             <li class="subMenuItem"><a href="Page2.html" class="subMenuItemLink">ee</a></li>
  6.         </ul>
  7.     </li>
  8.     <li class="mainMenuItem"><a href="Module1.html" class="mainMenuLink">Module 1</a>
  9.         <ul class="subMenu">
  10.             <li class="subMenuItem"><a href="Module1_Page1.html" class="subMenuItemLink">dd</a></li>
  11.             <li class="subMenuItem"><a href="Module1_Page2.html" class="subMenuItemLink">ddd</a></li>
  12.             <li class="subMenuItem"><a href="Module1_Page3.html" class="subMenuItemLink">dddd</a></li>
  13.         </ul>
  14.     </li>
  15.     <li class="mainMenuItem"><a href="Module2.html" class="mainMenuLink">Module 2</a>
  16.         <ul class="subMenu">
  17.             <li class="subMenuItem"><a href="Module2_Page1.html" class="subMenuItemLink">c</a></li>
  18.             <li class="subMenuItem"><a href="Module2_Page2.html" class="subMenuItemLink">cc</a></li>
  19.             <li class="subMenuItem"><a href="Module2_Page3.html" class="subMenuItemLink">ccc</a></li>
  20.         </ul>
  21.     </li>
  22.     <li class="mainMenuItem"><a href="Module3.html" class="mainMenuLink">Module 3</a>
  23.         <ul class="subMenu">
  24.             <li class="subMenuItem"><a href="Module3_Page1.html" class="subMenuItemLink">bb</a></li>
  25.             <li class="subMenuItem"><a href="Module3_Page2.html" class="subMenuItemLink">bbb</a></li>
  26.             <li class="subMenuItem"><a href="Module3_Page3.html" class="subMenuItemLink">bbbb</a></li>
  27.         </ul>
  28.     </li>
  29.     <li class="mainMenuItem"><a href="Module4.html" class="mainMenuLink">Module 4</a>
  30.         <ul class="subMenu">
  31.             <li class="subMenuItem"><a href="Module4_Page1.html" class="subMenuItemLink">aa</a></li>
  32.             <li class="subMenuItem"><a href="Module4_Page2.html" class="subMenuItemLink">aaa</a></li>
  33.             <li class="subMenuItem"><a href="Module4_Page3.html" class="subMenuItemLink">aaaa</a></li>
  34.         </ul>
  35.     </li>
  36. </ul>

 

Below is the CSS that you need to make the above HTML work as a menu.

  1. .subMenu
  2. {
  3.     padding: 1px;
  4.     position: absolute;
  5.     visibility: hidden;
  6. }
  7. .subMenuItem
  8. {
  9.     list-style: none;
  10.     float: left;
  11.     position: relative;
  12.     margin: 0px;
  13.     display: block;
  14.     width: 92px;
  15. }
  16. .subMenuItemLink
  17. {
  18.     color: White;
  19.     text-align: left;
  20.     text-decoration: none;
  21.     padding-left: 5px;
  22.     display: block;
  23.     height: 32px;
  24.     width: 92px;
  25.     background-image: url('./Images/menuButtonSelected.jpg');
  26. }
  27. <!-- Changing the menu when mouse is over the menu. -->
  28. .mainMenuItem:hover .mainMenuLink
  29. {
  30.     color: White;
  31.     background-color: Blue;
  32.     background-image: url('./Images/menuButtonSelected.jpg');
  33. }
  34. <!-- Changing the menu when it is selected. -->
  35. .mainMenuItem:active .mainMenuLink
  36. {
  37.     background-image: url('./Images/menuButtonSelected.jpg');
  38. }
  39. <!-- Showing the sub menu items when mouse is over the main menu. -->
  40. .mainMenuItem:hover .subMenu
  41. {
  42.     visibility: visible;
  43.     z-index: 100;
  44. }

 

Do not forget to import the CSS into the HTML page by using a link as shown below.

  1. <link rel="stylesheet" type="text/css" href="DefaultStyles.css" />

 

I used the following images as the background images of the links.

menuButton11  menuButtonSelected11

I think the code is not that complex, so hope this helps, let me know if you need any help on this, I will try to help you out.

No comments: