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
    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

  • 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