javascript/html

kegan5 · 21-10-2002 10:58am #1

I'm currently making a site and have added in a javascript navigation menu thing: the code for that is:

<html>
<head>
<Title> No Illusion Official </Title>

<style>

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

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

</style>

</head>

<body bgcolor="#ffffff" text="#FF5555" link="#FF5555" vlink="#FF5555" alink="#FF5555">

<div id="menuSelect" style="width: 693; height: 23">
<a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="nilogobig.jpg" width="50" height="35" border="0"></a>
</div>
<div id="menuShow" style="width: 119; height: 184">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="nilogobig.jpg" width="50" height="35" border="0"></a>
<br>
<br>
<a href="http://www.codelifter.com">Biography</a><br>
<a href="http://www.codelifter.com">Menu Item B</a><br>
<a href="http://www.codelifter.com">Menu Item C</a>
<br>
<a href="http://www.codelifter.com">Menu Item D</a><br>
<a href="http://www.codelifter.com">Menu Item E</a>
<br>
<a href="http://www.codelifter.com">Menu Item F</a><br>
<a href="http://www.codelifter.com">Menu Item G</a><br>
<a href="http://www.codelifter.com">Menu Item H</a><br>
</div>

<script>

Show ="yes";

// 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 = 50;
var PosY = 50;

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

var speed = 1;
var increment = 1;
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>

</body>
</html>



This menu is aligned to the left and I want to add text into the empty space on the left but front page wont allow me to do this... any ideas?

Many thanks
Kate

seamus · 21-10-2002 11:58am

Have you a screenshot of this working?
Maybe just add another style called BorderLeft or sumfink?

(First post evar from linux yay! I rock)

the Guru · 21-10-2002 12:39pm

You could use a layer or a table ???? /// the scroll is nice but I would tend to have it a tiny bit faster as people dont like to hang around on web pages

damien_gill · 24-10-2002 3:13pm

I know this is the third time I have posted this but WWW.DYNAMICDRIVE.COM will have the solution to your problem in it's FAQ's section.

Plus I had a similiar script on one of my webpages and a lot of people didn't like it. May be a bit ahead of it's time I think.

Anyway the navigation section in the URL above kicks ass to no extent.

javascript/html

Comments