Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

java/html

  • 21-10-2002 11:57AM
    #1
    kegan5
    Registered Users, Registered Users 2 Posts: 446 ✭✭


    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&gt;
    <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:confused:


Comments

  • #2
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭Enygma


    I don't really know what you mean. Something like this?
    <html>
<head>
<Title> No Illusion Official </Title>


<style>

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

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

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

</style>

</head>

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

<div id="menuSelect" style="width: 100; 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>


<div id="text" style="width:100; height:100">
Hello World
</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>

<!--
============================================================
//-->


Advertisement