Scroling Menu

Demo

• HTML
• Vb.Net

Step 1: Insert the following style sheet to the HEAD section of your page:

<style type="text/css"> * { margin: 0px; padding: 0px; } #menu{ width: 350px; height: 65px; margin: 0 auto; background-color:#000; } #menu_bg{ height: 82px; /*background: url(images/menu_bg.jpg); background-repeat:repeat-x;*/ background-position:top; } #menu ul { list-style: none; padding-top: 4px; /*padding-left: 55px;*/ } #menu li { display: inline; } #menu a { font-family: Georgia, "Times New Roman", Times, serif; text-align: center; text-decoration: none; color: #ffffff; font-weight: normal; font-size: 16px; float:left; width: 174px; height: 42px; display: block; padding-top: 20px; } #menu a:hover{ width: 174px; height: 42px; background: url(menu_hov.png); font-weight:bold; color: #F00; } .menulines a{ text-decoration:none; color:#F00; } .menulines:hover{ background-color:#000; } </style>

Step 2: Add the below HTML  to the body of your page.

<marquee direction="left" behavior="alternate" scrollamount="5"> <div id="menu_bg"> <div id="menu"> <ul> <li><a href="http://cybersorce.blogspot.in/p/eewfewf.html" title="" style="border-right: 1px solid #ffffff; color: #F00;">HTML</a></li> <li><a href="http://cybersorce.blogspot.in/p/vbnet.html" title="" style="color: #F00;">Vb.Net</a></li> </ul> </div> </div> </marquee>

Step 3: Download Folowing Image and save it into same Folder.

1.Right Click on the image

2.Save Image As....

 

You can have multiple menus on the same page.

 

Hover Menu

Demo

• HTML
• C\C++
• Vb.Net
• Asp.Net
• PHP

Step 1: Insert the following style sheet to the HEAD section of your page:

<style type="text/css"> .hovermenu ul{ font: bold 13px arial; padding-left: 0; margin-left: 0; height: 20px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px 0.5em; text-decoration: none; float: left; color: black; background-color: #FFF2BF; border: 2px solid #FFF2BF; } .hovermenu ul li a:hover{ background-color: #FFE271; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } </style>

Step 2: Add the below HTML  to the body of your page.

<div class="hovermenu"> <ul> <li><a href="http://cybersorce.blogspot.in/p/eewfewf.html">HTML</a></li> <li><a href="http://cybersorce.blogspot.in/p/cc.html">C\C++</a></li> <li><a href="http://cybersorce.blogspot.in/p/vbnet.html">Vb.Net</a></li> <li><a href="http://cybersorce.blogspot.in/p/aspnet.html">Asp.Net</a></li> <li><a href="http://cybersorce.blogspot.in/p/php.html">PHP</a></li> </ul> </div>

You can have multiple menus on the same page.