Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Navigation menu

  1. #1
    ivy
    ivy is offline
    Regular Coder
    Join Date
    Jun 2002
    Location
    London / Glasgow / Liverpool
    Posts
    177
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Navigation menu

    Hello all

    I wonder whether you can help..

    I am looking for a navigation menu (and I guess that javascript is the code that I need) that changes the link in the navigation menu if the page loaded is that link. Mmmmmm.... Hard to desribe really, so don't worry if you do not understand so far...

    An example is here:

    BBC Web Site

    From this page, you can see the navigation menu on the left. If you click on one of the menus, it changes to the relevant page, and then that link on the menu changes to have a different background colour than the rest.

    E.g. the page above has "Britain" highlighted in another colour. If you click on "Timelines", the page changes, "Britain" becomes the "normal" background colour and "Timelines" now has the different background colour...

    OK, long winded I know but I hope you understand what I am looking for. I guess the script must check the URL of the page and if it matches a link on teh page changes its style properties (so I guess also CSS is used).

    If anyone can help I would be very grateful as at teh moment I have a site where I have a different navigation menu depending on teh page loaded - this is a real hassle as every time something is added to the navigation menu on one page I need to update all nav menus... And there are hundreds.

    Look forward to hearing some ideas (seeing some links perhaps to source code?!).
    See ya

    Ivy.

    MAC Codes

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    If there are independent pages (the BBC example), that is a simple CSS change of the TD background ,according to the page.
    They are different pages aftera all, so they can be build each with different menu appeareace, right? :-)

    If there is framed page, with the meniu fixed on the parent page, that you have to use a javascript solution.

    I'll just explain my way to do so, but, first, on theory. If you think it suits to your site, or if you can do it by yourself, let me know, and I can detail to you

    The general ideea is that i put in the pages BODY tags of the childframes a call on onload

    For page link 1 in childframe
    <body onload ="parent.afunction('link1')">
    For page link 2
    <body onload ="parent. afunction('link2')">
    .
    .
    .

    Than I build a script, in parent page (the page with the menu) which can change the atributes of the (in your case) cell's background.

    The script is based on getElementById method. I give ID's to the cells on the tables. I build a setup function to define each object (with the [B]new{/B] method. I return the object style atributes with a this.obj asignment, than i build that function afunction(bla) who change the styles according to the parameters returned ('link1', link2', a.s.o)

    May sounds confusing, but if you don't follow me till here, I'll give you later an example.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    ivy
    ivy is offline
    Regular Coder
    Join Date
    Jun 2002
    Location
    London / Glasgow / Liverpool
    Posts
    177
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Kor

    Thank you for replying.

    I am getting the "general" idea... An example would be excellent if you have the time.

    Look forward to hearing from you.
    See ya

    Ivy.

    MAC Codes

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    a simple structure with a menu on parent page (index.html) and two "children" pages, link1.html and link2.html, wchil will be called in a iframe)

    index.html is

    <html>
    <head>
    <script language="JavaScript">
    function objectSetup() {
    zlink1 = new layerSetup("link1","#CCCCCC");
    zlink2 = new layerSetup("link2","#CCCCCC");
    }
    function layerSetup(id,backgroundColor) {
    this.obj = document.getElementById(id).style;
    this.obj.backgroundColor = backgroundColor;
    return this.obj;
    }
    function afunction(bla){
    objectSetup();
    zbla = new layerSetup(bla,"#CC9999");
    }
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000" onload="objectSetup()">
    <table width="100" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td id="link1" class="cells"><a href="link1.html" target="framea">link1</a></td>
    </tr>
    <tr>
    <td id="link2"><a href="link2.html" target="framea">link2</a></td>
    </tr>
    </table>
    <iframe id="framea" style="height: 370px; position:absolute; left:160; top:70; z-index: 3" src="link1.html" frameborder="NO" border="0" framespacing="0" noresize width="550" name="framea"></iframe>
    </body>
    </html>


    link1.html is:

    <html>
    <head>
    </head>
    <body bgcolor="#CCFFFF" text="#000000" onload="parent.afunction('link1')">
    LINK 1
    </body>
    </html>

    link2.html is

    <html>
    <head>
    </head>
    <body bgcolor="#CCFFFF" text="#000000" onload="parent.afunction('link2')">
    LINK 2
    </body>
    </html>

    Put them in the same root than click on the links... the cells' background will change on different inner frames onload...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    ivy
    ivy is offline
    Regular Coder
    Join Date
    Jun 2002
    Location
    London / Glasgow / Liverpool
    Posts
    177
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Kor

    Thank you for the example..... It works perfectly...

    My only reservation is that not all browsers support iFrames.

    As far as I am aware Netscape 6x supports them and so too IE5.5 and higher.

    Is it a good idea to use iFrames (and that question goes to everyone - the more comments the better please).

    I think that I will implement that script and test it for a while, depends on feedback with regards to the various browsers and their support for iFrames.

    Once again, thank you Kor.
    See ya

    Ivy.

    MAC Codes

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    <iframe> works for IE 5 and above, NS6 and above, all the recent Opera or AOL versions, that means over 98-99 % of the users. Fewer and fewer use NS4 or IE4, so I think it is the moment to use <iframe> in regular sites...

    On the other hand, my example can be use for classical frames... I used iframes because it looks easier for me to give you a quick example...

    The javascript itself works only for the same browsers as <iframe>, but here you can use a browser detect script and than, with some "if statesments" you can make it work for NS4 and IE4 as well

    something like

    function layerSetup(id,backgroundColor) {
    if (este.ie5||este.ie55||este.ie6||este.ns6){
    this.obj = document.getElementById(id).style;
    this.obj.backgroundColor = backgroundColor;
    return this.obj;
    } else if(este.ie4) {
    this.obj = document.all[id].style;
    this.obj.backgroundColor = backgroundColor;
    return this.obj;
    } else if(este.ns4) {
    this.obj = document.layers[id];
    this.obj.bgColor = backgroundColor;
    return this.obj;
    }
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •