SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Easy Microsoft.com style nav bar....Where?

    I found a cool nav bar script Here, but I thought someone might know of one similar (that works in NS 4+) where there is just one JS file to update when adding, or deleting links within the menu.

    In other words, all pages would just have a link to a js file, instead of putting the entire js code on each page.

    This way when I add links, I can update one file, upload it, and I'm done.

    Anybody know where I might find such a script?
    .

  2. #2
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why not just save all the menu code to a file and include it into your other pages?
    Last edited by naramation; Sep 8, 2002 at 20:59.
    Mike
    It's not who I am underneath, but what I do that defines me.

  3. #3
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that's what I was wanting to know if I could do is just save the javascript code that would normally go on the page as a .js file, and then put the url to that code in the place where I want my nav bar to be.

    I've done other javascrips like that, I just wasn't sure if this method would work with this nav bar.

    So you think this would fly?
    .

  4. #4
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, simple to do

    Firstly, you need to make sure you have the file "navcond.js" that was on that page for download...

    Now, create a new text file names "nav.js" and in it paste the following:

    Code:
    /*
    Top Navigational Bar II (By Mike Hall)
    Last updated: 00/05/08
    Permission granted and modified by Dynamicdrive.com to include script in archive
    For this and 100's more DHTML scripts, visit http://dynamicdrive.com
    */
    
    var myNavBar1 = new NavBar(0);
    var dhtmlMenu;
    
    //define menu items (first parameter of NavBarMenu specifies main category width, second specifies sub category width in pixels)
    //add more menus simply by adding more "blocks" of same code below
    
    dhtmlMenu = new NavBarMenu(100, 0);
    dhtmlMenu.addItem(new NavBarMenuItem("Home", "http://dynamicdrive.com"));
    myNavBar1.addMenu(dhtmlMenu);
    
    dhtmlMenu = new NavBarMenu(100, 120);
    dhtmlMenu.addItem(new NavBarMenuItem("News", ""));
    dhtmlMenu.addItem(new NavBarMenuItem("CNN", "http://www.cnn.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("MSNBC", "http://msnbc.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("ABCNews", "http://www.abcnews.com"));
    myNavBar1.addMenu(dhtmlMenu);
    
    dhtmlMenu = new NavBarMenu(110, 120);
    dhtmlMenu.addItem(new NavBarMenuItem("Technology", ""));
    dhtmlMenu.addItem(new NavBarMenuItem("News.com", "http://www.news.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Techweb", "http://www.techweb.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Wired", "http://www.wired.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Dynamic Drive", "http://www.dynamicdrive.com"));
    myNavBar1.addMenu(dhtmlMenu);
    
    dhtmlMenu = new NavBarMenu(100, 150);
    dhtmlMenu.addItem(new NavBarMenuItem("Search", ""));
    dhtmlMenu.addItem(new NavBarMenuItem("Yahoo", "http://www.yahoo.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Alta Vista", "http://www.altavista.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Infoseek", "http://www.infoseek.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Excite", "http://www.excite.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("HotBot", "http://www.hotbot.com"));
    myNavBar1.addMenu(dhtmlMenu);
    
    dhtmlMenu = new NavBarMenu(100, 150);
    dhtmlMenu.addItem(new NavBarMenuItem("Webmaster", ""));
    dhtmlMenu.addItem(new NavBarMenuItem("Dynamic Drive", "http://dynamicdrive.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Website Abstraction", "http://wsabstract.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("Freewarejava.com", "http://freewarejava.com"));
    dhtmlMenu.addItem(new NavBarMenuItem("BrainJar", "http://brainjar.com"));
    myNavBar1.addMenu(dhtmlMenu);
    
    //set menu colors
    myNavBar1.setColors("#000000", "#000000", "#C0C0C0", "#ffffff", "#666666", "#000000", "#cccccc", "#ffffff", "#000080")
    
    //uncomment below line to center the menu (valid values are "left", "center", and "right"
    //myNavBar1.setAlign("center")
    
    var fullWidth;
    
    function init() {
    
      // Get width of window, need to account for scrollbar width in Netscape.
    
      fullWidth = getWindowWidth() 
        - (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);
    
      myNavBar1.resize(fullWidth);
      myNavBar1.create();
      myNavBar1.setzIndex(2);
      //UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
      //myNavBar1.moveTo(0, 50);
    }
    Now you have the single file with all of the code that previously was in the <head> of the page...

    Now to call it, add this line in the head:

    Code:
    <script language="JavaScript" src="nav.js"></script>
    And just add the onload function to the <body> tag as always... Here is my finshed example...

    Code:
    <html>
      </head>
        <title>Test</title>
        <script language="JavaScript" src="navcond.js"></script>
        <script language="JavaScript" src="nav.js"></script>
      </head>
      <body onload="init()">
        Content Goes Here...
      </body>
    </html>

  5. #5
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, man!

    It's working now.
    Only problem is I didn't really want it at the very top of the page like that.

    Isn't it possible to control where this nav bar sits on the page. I read something about controling where a nav bar is located on a webpage.

    I'll look through my notes.
    Hopefully I'll still have some info on this.

    Thanks again for the help!
    .

  6. #6
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you needed it further down, there is a line ofn there that, when uncommented, will move the nav down 50 pixels. I'm sure you can adjust that to any height
    Mike
    It's not who I am underneath, but what I do that defines me.

  7. #7
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I was experimenting with it and couldn't get it to move. I guess I was adjusting the wrong thing.

    Then, I saw a nav bar by 'Brothercake' and decided to try that because of all the browsers it supports. I have never got anything to show up on my page after following directions exactly how it's written.

    I guess tomorrow I'll go back to the first nav bar.
    At least I got it to working.

    I just don't want to leave out anybody with oddball browsers being able to use this thing since this is going on a business site.

    Thanks for the help.
    I'm going to bed!
    I'll be back tommorrow.......
    .

  8. #8
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you needed it further down, there is a line ofn there that, when uncommented, will move the nav down 50 pixels. I'm sure you can adjust that to any height
    How do I do this?
    I've been experimenting, with no luck at all.....
    .

  9. #9
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the following line:

    Code:
    //myNavBar1.moveTo(0, 50);
    First you need to uncomment it (Take out the "//") then the bar will be 50px from the top of the page, change that value to make it higher/lower

  10. #10
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANKS!!!!

    I've been wondering exactly what 'uncomment' meant!

    It's working like a charm.....
    .

  11. #11
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your welcome, glad to be able to help

  12. #12
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I'm a little closer to knowing a little something about javascript.

    Everytime I learn something like this, I keep notes!
    (that way I don't have to re-learn anything)

    Now I gotta play with it & figure out how to change the thickness & the colors. I think I can do that with most of the instructions that come with it.

    Plus, when I change something I always keep a copy of the original so I can restore what I screw up!
    .


Bookmarks

Posting Permissions

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