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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML / Javascript external menu coding

    This has got me banging my head at the moment, I have been looking at tutorial pages all morning and am not getting anywhere. I have a website with a Javascript menu which is currently on each page. However the website is growing and changing any code within the menu is getting time consuming. I have written the site in HTML but haven't got the hang of CSS yet (which is how I want the site to go).
    My main problem is (I think!) that I can't figure out what to put in the body part of my code where the menu should be.

    The coding in the header part reads as follows:

    Code:
      <link rel="stylesheet" type="text/css" href="slashfiles/menu.css" />
        <script type="text/javascript" src="slashfiles/menu.js">
    and the coding in the body part where the menu currently is reads:
    Code:
    <div class="sdmenu">
          <span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Home</span>
          <div class="submenu">
            <a href="../index.htm#about">About Us</a>
    	<a href="../index.htm#contact">Contact Us</a>
            <a href="../index.htm#news">Group News</a>
           </div>
    
          <span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Committee</span>
          <div class="submenu">
            <a href="../committee.htm#members">Hyndburn Group Committee</a>
            <a href="../committee.htm#meets">Meetings</a>
            <a href="../committee.htm#joinus">Join the Committee</a>
            <a href="../committee.htm#policies">Group Policies</a>
          </div>
    
    <span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />The Walks</span>
          <div class="submenu">
            <a href="../thewalks.htm#prog">Group Programme</a>
            <a href="../thewalks.htm#wedwalks">Wednesday Walking Group</a>
            <a href="../thewalks.htm#coach">N E Lancs Coach Rambles</a>
            <a href="../thewalks.htm#reports">Walk Reports</a>
          </div>
    
    <span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />General Info</span>
          <div class="submenu">
            <a href="../general.htm#need">What You May Need</a>
            <a href="../general.htm#code">The Country Code</a>
            <a href="../general.htm#book">Book and Map Library</a>
            <a href="../general.htm#clog">The Hyndburn Clog</a>
            <a href="../general.htm#arch">Archived Documents</a>
          </div>
    
    <span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Links & Downloads</span>
          <div class="submenu">
    	<A HREF="../links.htm">Links</A>
    	<A HREF="../downloads.htm">Downloads</A>  
          </div>
    
    <span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />Sitemap</span>
          <div class="submenu">
             <A HREF="../sitemap.htm">Sitemap</A>
          </div>
    
        </div>
    
    <p align="center"><a href="javascript:slash_expandall()">Expand</a>/
    <a href="javascript:slash_contractall()">Contract</a>
    I have tried turning the body text into a .css file of its own and a .js file but have completely lost myself.

    The site can be found here: http://www.hyndburnramblers.co.uk
    Any help greatly appreciated.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I think what you’re trying to do is have a single file for your menu, which you can update once and then include it on all your web pages?

    If that’s right, then css alone isn’t going to help you with this. You still need to have the html which is controlling the words on the menu, and you still need to have the javascript controlling what elements of the menu appear or change colour when you hover or expand the menu etc. So, saving your html document as a .css or .js file isn’t right.

    You could consider using an “include” command – see here for a basic explanation. This would allow you to have one file including your menu html, and then a statement in each web page which imports the menu html into the rest of the page. I’m not too familiar with this but this might point you in the right direction.

    A possible alternative, if you are using some sort of web editing package like Dreamweaver, is to make use of the template functionality where you would effectively save the menu as a template and then use it as the basis for all the other pages.

    Hope this helps. Maybe others can suggest other ways of doing what you’re after.

  • Users who have thanked SB65 for this post:

    churchman (05-27-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that SB65, much appreciated.
    Have had a quick try without uploading but it doesn't want to work so will try and upload it and try then.

    I've never used Dreamweaver et al as I've only ever hand coded!!

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    AAAAAAARRRRRRGGGGGGHHHHHHHHH!!!!!! BANG BANG BANG BANG BANG (head hitting keyboard).

    Tried the link SB65 told me about to no avail

    Have tried loads of other advice forums too but can't get anything else to work either. One site did mention framesets but I don't really like them and feel I may be taking a backwards step in the coding.
    Looks like I may have to change the menu somehow....

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Morning Churchman, hope your head's not too sore.

    Sorry that didn't work. Using php might work for you instead. Have a look at this thread;

    How Do I Link Multiple Pages Together

    which covers the approach well.

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cheers SB65. Have been away for the weekend so will check it out tomorrow now.

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ermmmmmm.......a little over my head that php stuff!! I'm gonna have to do some serious studying!!!
    In the meantime looks like I'm gonna have to continue changing every page. Sob!!

    Thanks again for your help, much appreciated.

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Location
    Canberra
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    external javascript menu

    Hi,
    I've got similar problem - 200 pp website so every tiny change has to be replicated 200x !!
    Anyway, found this, and it works pretty well:
    http://snipplr.com/view/8161/javascr...external-file/


  •  

    Posting Permissions

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