/    Sign up×
Community /Pin to ProfileBookmark

external navigation bar

Copy linkTweet thisAlerts:
Sep 09.2009

I am new to this forum.
I know html and css. My web site will have many pages added from time to time but I do not want to go to each page to add links. I want to add link in one page that is called by all others.

I know it is possible to add a navigation bar that is external to web pages.
I do not know how to do it. Is javascript the right thing to use?

If yes, then please what is syntax for external page (just a list?) and also for web page to call it.

thank you.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@mityaSep 11.2009 — Well yes, JS can do this, but this is more commonly done in something like PHP. For example, you have a script, nav.php, which contains something like:

[CODE]<?php

$links = array(
"Home" => "index.php",
"About us" => "about.php",
"Contact" => "contact.php"
);

foreach($links as $key => $val)
echo "<a href="".$val."">".$key."</a>";

?>[/CODE]

...then each page calls the script via something like

[CODE]<?php require_once "nav.php"; ?>[/CODE]

This is preferable to the equivalent JS approach because, if you did it in JS, the nav content wouldn't really exist, it would be created on runtime, and so not found by search engines. It would also not show to anyone with JS disabled or users on screenreaders, phones etc.
Copy linkTweet thisAlerts:
@ilurnauthorSep 11.2009 — thank you for replying and thank you for the code. I want to test before uploading to host so I think I now must add php to iis on my computer.

It is something new to learn and only little time.

From your explanation, all files are now .php

is .php better for search engine than .html or does it not matter?

thank you
Copy linkTweet thisAlerts:
@mityaSep 11.2009 — 
  • - re: .php vs. .htm, no difference for Google etc.


  • - yes pages now need to be .php.


  • - get yourself xampp (www.apachefriends.org). This is a local server environment. Easy to install, nothing difficult. It has a local httdocs folder; put all your sites in there then access them through http://localhost/mysitefolder/page.php etc.


    • p.s. the call to require_once "nav.php" should appear at the place in your code where you want the nav to appear.
    Copy linkTweet thisAlerts:
    @JMRKERSep 12.2009 — I am new to this forum.

    I know html and css. My web site will have many pages added from time to time but I do not want to go to each page to add links. I want to add link in one page that is called by all others.

    I know it is possible to add a navigation bar that is external to web pages.

    I do not know how to do it. Is javascript the right thing to use?

    If yes, then please what is syntax for external page (just a list?) and also for web page to call it.

    thank you.[/QUOTE]

    Consider this:

    Nothing wrong with the PHP approach,

    but if quick and dirty is the way you want to go,

    this might be the thing you need.

    In one external JS file, say: 'JSlinks.js', create something like this:
    <i>
    </i> var str ='Common Links';
    str+='&lt;ul&gt;';
    str+=' &lt;li&gt;&lt;a href="www.google.com"&gt;Google&lt;/a&gt;&lt;li&gt;';
    str+=' &lt;li&gt;&lt;a href="www.yahoo.com"&gt;Yahoo!&lt;/a&gt;&lt;/li&gt;';
    str+=' &lt;li&gt;&lt;a href="www.bing.com"&gt;Bing&lt;/a&gt;&lt;li&gt;';
    str+='&lt;/ul&gt;';
    document.write(str);
    // Add other links a desired


    In each new HTML page you create add the following where you want the list to appear.
    <i>
    </i>&lt;script type="text/javascript" src="JSlinks.js"&gt;&lt;/script&gt;


    You can pretty it up with some additional CSS code.

    Untested, but it should work.
    ×

    Success!

    Help @ilurn spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...