FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Menu slide





thaonguyenxanh
First copy Style bellow paste <head>
Code:

<style>
#menuShow{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}

#menuSelect{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}

</style>

Code:


second copy code&Script bellow paste  <body>

<div id="menuSelect">
<p align="center">
<a href="#" onClick="moveOnMenu();moveOffSelector()">Click Here!</a>
</div>
<div id="menuShow">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
close Menu!</a>
<br>
<br>
<a href="http://www.yahoo.com">Menu Item A</a><br>
<a href="http://www.yahoo.com">Menu Item B</a><br>
<a href="http://www.yahoo.com">Menu Item C</a><br>
<br>
<a href="http://www.yahoo.com">Menu Item D</a><br>
<a href="http://www.111.com">Menu Item E</a><br>
<br>
<a href="http://www.222.com">Menu Item F</a><br>
<a href="http://www.222.com">Menu Item G</a><br>
<a href="http://www.333.com">Menu Item H</a><br>
</div>

<script>
// inotoday@yahoo.com
// Set Show to "yes" to show the menu on start-up.
// Set Show to "no" to show the selector on start-up.

Show ="no";

// Set OffX in pixels to a negative number
// somewhat larger than the width of the menu.

var OffX = -150;

// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.

var PosX = 100;
var PosY = 100;

// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.

var speed = 5;
var increment = 5;
var incrementNS4 = 5; // for slower NS4 browsers

// do not edit below this line
// ===========================

var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;

var MenuX=OffX;
var SelX=PosX;
var sPosX=PosX;
var sOffX=OffX;

if (Show=="yes"){
sPosX=OffX;
sOffX=PosX;
MenuX=sOffX;
SelX=sPosX;
}

if (is_NS4){
increment=incrementNS4;
Lq="document.layers.";
Sq="";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
}else{
Lq="document.all.";
Sq=".style";
document.getElementById('menuSelect').style.left=sPosX+"px";
document.getElementById('menuShow').style.left=sOffX+"px";
document.getElementById('menuSelect').style.top=PosY+"px";
document.getElementById('menuShow').style.top=PosY+"px";
}

function moveOnMenu(){
if (MenuX<PosX){
MenuX=MenuX+increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
}
}

function moveOffMenu(){
if (MenuX>OffX){
MenuX=MenuX-increment;
if (is_NS5up){
document.getElementById('menuShow').style.left=MenuX+"px";
}else{
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
}
}

function moveOffSelector(){
if (SelX>OffX){
SelX=SelX-increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOffSelector()',speed);
}
}

function moveOnSelector(){
if (SelX<PosX){
SelX=SelX+increment;
if (is_NS5up){
document.getElementById('menuSelect').style.left=SelX+"px";
}else{
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOnSelector()',speed);
}
}

</script>

[/code]
sparks
Its really cool.Where do you people get such cool stuff.I think I will use it on my website if you don't mind but I will make a few modifications.If there is a problem with that you just let me know.

Where does the menu hide anyway??It's very misterious!!
simplyw00x
Looks like a nice script. 1 things though; where's the PHP or mySQL? That's javascript.
deedee
Nice One Smile

No PHP, just JavaScript. Thanks for it.
Related topics
Best slide show creation utility
Flash ActionScript 2.0 Verical Animated Menu Problem
Menu[1] is Undefined [SOLVED]
JQuery Sliding Tab Menu
picture slide show (java)
[java scripts] Text effect , img ....
751 Useful Windows XP Files
I need Flash menu
Nice site for Javascript
Frankfurt Motor Show, 2005
DOS Boot CD Menu Disk
JavaScript (Menu)
Looking for something to help build a horizontal menu
Dropdown menu won't work
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.