Friday, June 21, 2013

Static Menu Script in DHTML

Add an elegant, visible-from-the-start static menu to your site with this script! Both the menu's dimensions and its static location on the page can be easily configured, making it a piece of cake to integrate the menu to conform to your site's layout. Definitely one of the better DHTML menu systems out there.

Step 1: Insert the following stylesheet  into the <head> section of your page:

<STYLE TYPE="text/css">
<!--

.menuh    {
        BORDER-COLOR : #FFFF99 ;
        cursor : hand ;
        Border-Left : #FFFF99 ;
        Border-Top : #FFFF99 ;
        Padding-Left : 1px ;
        Padding-Top : 1px ;
        Background-Color : #FFFF99 ;
    }
.menu    {
        Background-Color : white ;
    }
.home    {
        cursor : hand ;
    }

.menulinks{
text-decoration:none;
}
//-->
</STYLE>


***************************************************************


Step 2: Insert the following into the <body> section of your page, outside any other tags:


<SCRIPT Language="Javascript1.2">
<!--

/*
Static menu script (By maXimus, maximus@nsimail.com, http://maximus.ravecore.com/)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure below variable for menu width, position on page
var menuwidth=110
var offsetleft=10
var offsettop=90

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

function makeStatic() {
if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop}
else if (ns6) {document.getElementById("object1").style.top=window.pageYOffset+offsettop}
else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));}
setTimeout("makeStatic()",0);
}

if (ie4||ns6) {document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')}
else if (ns4){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')}

if (ie4||ns6||ns4)
document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Menu</FONT></TD></TR>')

var menui = new Array();
var menul = new Array();

//configure below for menu items. Extend list as desired

menui[0]="Dynamic Drive";
menui[1]="What\'s New?";
menui[2]="What\'s Hot?";
menui[3]="Message Forum";
menui[4]="FAQs";
menui[5]="Submit Script";
menui[6]="Link to us";
menui[7]="Email us";

menul[0]="http://dynamicdrive.com";
menul[1]="http://dynamicdrive.com/new.htm";
menul[2]="http://dynamicdrive.com/hot.htm";
menul[3]="http://wsabstract.com/cgi-bin/Ultimate.cgi";
menul[4]="http://dynamicdrive.com/faqs.htm";
menul[5]="http://dynamicdrive.com/submit.htm";
menul[6]="http://dynamicdrive.com/link.htm";
menul[7]="http://dynamicdrive.com/contact.htm";

for (i=0;i<=menui.length-1;i++)
if (ie4||ns6) {document.write('<TR><TD BORDERCOLOR="white" ONCLICK="location=\''+menul[i]+'\'" onmouseover="className=\'menuh\'" onMouseout="className=\'menu\'"><CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')}
else if (ns4){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width="'+menuwidth+'" onmouseover="bgColor=\'yellow\'" onmouseout="bgColor=\'white\'"><CENTER><A HREF="'+menul[i]+'" class=menulinks>'+menui[i]+'</A></CENTER></LAYER></ILAYER></TD></TR>')}

if (ie4||ns6) {document.write('</TABLE></span>')}
else if (ns4){document.write('</TABLE></TD></TR></TABLE></LAYER>')}

function menu3(){
if (ns6||ie4||ns4)
makeStatic()
}

window.onload=menu3

//-->
</SCRIPT>
Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)

Labels

AJAX (1) Answers (1) Apache (1) Array (16) bug (1) C (1) C++ (1) Calendar (1) Class (1) Commands (1) Cookies (2) Database (2) Date (7) Days (1) explode (1) File Upload (1) FILES (1) firewall (1) fix (1) Functions (26) GET (1) GMT (1) JavaScript (2) localhost (1) Mail (1) Menu (1) MYSQL (13) PERL (1) PHP (36) php.ini (1) POST (1) preg_match (1) Questions (1) Script (1) SMS (2) Solution (1) String (1) Time (5) Time Zone (1) Vista (1) Wamp Server (1) windows 7 (2) XML (1)

Popular Posts

  • Database Information
    Database Information List Databases <?php $link = mysql_connect('localhost', 'mysql_user', 'mysql_password'); $d...

Popular Posts

  • send sms via way2sms using php
     Send SMS through way2sms   using php    1.  download one rar file    -   click here to download 2.  extract the rar file 3. ...
  • PHP script for SMS sending
    <? /*  Simple and easy for modification, PHP script for SMS sending through HTTP with you own Sender ID and delivery reports.  You just ...
  • Creating a registration form using PHP
    Creating a registration form using PHP in PHP Form Creating a membership based site seems like a daunting task at first. If you eve...
  • Date Convertion
    if ($_POST['Date'] == "") { $Date = ''; } else { $Date = $_POST['Date']; } list($Day,$Month,$Year)=...
  • Calculate No Of Days Excluding Weekends
       Calculate No Of Days Excluding Weekends    Count the number of days between two dates that exclude weekends as non work days Count...
  • Loading a Drop Down List Using jQuery
    Loading a Drop Down List Using jQuery in jQuery To load a drop down list (or a simple list) from a database, there are different wa...
  • More about forms
    More about forms Transmission methods HTTP, the transmission protocol used for the Web, actually defines two methods for sending form i...
  • login form using PHP
    Making a login form using PHP in PHP Form This is in continuation of the tutorial on making a membership based web site. Please see t...
  • PHP MySQL Select
    The SELECT statement is used to select data from a database. Select Data From a Database Table The SELECT statement is used to select...
  • php.ini default timezone for Kolkatta
    Default Time Zone of php.ini for India   Example : Search date.timezone if php.ini file and then remove the ;  infront of it and write ...