|
↑
Menus and Navigation >>>
When an icon is clicked, this script glides in a menu from screen-left. Clicking on the same icon in the menu causes it to slide off the screen, with the triggering icon sliding back in. The script can be set to have either the trigger icon or the menu show on start-up; and the menu and trigger icon positions can be set via script variables.
Step 1: Add the below code to the <body> section of your page:
<style>
#menuShow{
border:
1px solid #666666;
background-color:
#CCCCFF;
padding:
13px;
font-size:
13px;
font-family:
Verdana,
Arial;
position:
absolute;
width:
auto;
height:
auto;}#menuSelect{border:
1px solid #666666;
background-color:
#CCCCFF;
padding:
13px;
font-size:
13px;
font-family:
Verdana,
Arial;
position:
absolute;
width:
auto;
height:
auto;
}
</style><center>
<div
id="menuSelect">
<a
href="#"
onClick="moveOnMenu();moveOffSelector()">
<img
src="reddot.gif"
width="28"
height="28"
border="0"></a>
</div>
<div
id="menuShow">
<a
href="#"
onClick="moveOffMenu();moveOnSelector()">
<img
src="reddot.gif"
width="28"
height="28"
border="0"></a>
<br>
<br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item A</a><br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item B</a><br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item C</a><br>
<br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item D</a><br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item E</a><br>
<br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item F</a><br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item G</a><br>
<a
href="http://www.yaldex.com/JSFactory_Pro.htm">Menu
Item H</a><br>
</div>
<script
language="javascript"
type="text/javascript">
Show
="yes";
var
OffX =
-150;
var
PosX =
250;
var
PosY =
300;
var
speed =
1;
var
increment =
1;
var
incrementNS4 =
5;
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>
</center>
|
Step 2: The script uses an image as part of its interface. You can create your own, or use the below (resized for easier download):
(right click image, and select "Save Image As")
Upload it into the same directory as your webpage.
↓
http://www.cashadvance-loans.net/california/cash-advance-richmond-ca/ . Bitcoin Gambling Site
|