How to add another page link to my nav bar

Report · Mar 06, 2019

Hi All, I recently built a nav bar in Javascript for a website but I have forgotten how to add an extra page somehow xD I'm just learning to code right now so am very inexperienced. I'd love if anyone could help and lend me a hand with bug fixing and the like too here is my code.

The code for the other pages can be found here too if needed.

Report · Mar 06, 2019

Rather than an image, could you copy and paste the code from the first image here so that we can copy it and make the alterations. Also, please explain why you want to use JavaScript to show the markup (HTML).

Wappler, the only real Dreamweaver alternative.

Report · Mar 07, 2019

function mymenu()

{

document.write('<ul><li><a href="javascript:contactus();">Contact</a></li><li><a href="javascript:about();">About</a></li><li><a href="javascript:Animals();">Animals</a></li><li><a class="active"href="javascript:home();">Home</a></li></ul>');

}

function home()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

Click <a href="Voucher.pdf">Here for a link to a free voucher!</a>

<alt="voucher">

</div>

</td>

</tr>

<marquee behavior="scroll" direction="right" scrolldelay="800" scrollamount="50">Welcome to marshall zoo! Please browse our website and check out our new arrivals!

<td>

<tr>

</table>`;

}

function Animals()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

<body>

<div class="text"><font size="4">There are only a few hundred of these precious animals left in the wild, so we are doing all we can to stop them becoming extinct.

Sumatran tigers have webbed paws, which means that they are brilliant swimmers. Explore that Sumatra in Islands and you could see mother and daughter, Kirana and Kasarna, splashing around in the pool or sunbathing on the rocks.

Sumatran tigers are the smallest of all tigers and their low stance lets them creep up on prey unseen. Their stripes are narrower and closer together than those of other tigers.</font></div>

</a>

</div>

</div>

<div class="text"><font size="4">Iblis, our nine year old male, is an important part of the European Endangered Species Breeding Programme. This is a carefully managed scheme overseeing the breeding of zoo animals in different countries.

You can find our pride of three beautiful lions, Iblis, Kiburi and Kumari next to The Oakfield. Lions enjoy relaxing and lazing around, they spend between 16 and 20 hours each day resting and sleeping. They have few sweat glands so they wisely tend to conserve their energy by resting during the day to conserve their energy at night for when it is cooler.

The Asiatic lion is listed as endangered on the International Union for the Conservation of Nature (IUCN) Red list. </div>

</a>

</div>

</div>

<div class="text"><font size="4">Reflecting the 'heartland' of India, these swampy flood plains are home to one of the two species of rhino that can be found at Marshall Zoo; here you can find the greater one-horned rhino. These magnificent prehistoric-looking animals enjoy regular dips in the muddy pool, galloping around or grazing on the grasslands.

Just around the corner, over Elephant Bridge, you will also be able to spot two other Asian species exploring their sandy plains and the onager, which is related to the donkey, and the Bactrian camel. Both of these animals are critically endangered in the wild.</div>

</div>

</a>

</div>

</body>

</td>

</tr>

</table>`;

}

function about()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

Our mission is to conserve biodiversity and other natural resources, both locally and internationally – but we rely on the support of thousands to bring it to life!

We engage with over 40,000 children and young people through our conservation educational programmes, and welcome over 500,000 visitors each year to our 140 acre zoological park. In every contact we seek to encourage understanding, and inspire care for the natural world. In essence, we aim to connect people with nature.

Our team of Conservation Biologists run field programmes in the UK & Africa in partnership with communities, statutory agencies and other non-governmental organizations. Find out which species we’re working with and the positive, sustainable impacts we’re making on our conservation website.

</textarea>

</td>

</tr>

</table>`;

}

function contactus()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

<tr>

<td>

lol

<tr>

<td>

</form>

</div>

</td>

</tr>

</table>`;

}

I hope this answers your question, and honestly Im not quite sure It was just the way I remember doing it a while ago.

Report · Mar 06, 2019

I'm afraid your use of JavaScript for something so basic as navigation has me baffled. A few lines of HTML code are all that's necessary. Use CSS rules to change the appearance.

CSS Styling Links

<nav>

<ul>

<li><a href="voucher.pdf">Voucher</a></li>

<li><a href="contact.html">Contact</a></li>

<li><a href="https://example.com">Example</a></li>

<li>

</ul>

</nav>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 06, 2019

https://forums.adobe.com/people/Nancy+OShea wrote
I'm afraid your use of JavaScript for something so basic as navigation has me baffled.

Yeah its baffling most developers........it's coming back into fashion - a bit like that old wallpaper in your ole grandmas house you used to hate when you were a kid.

Report · Mar 07, 2019

hahha, i know very little about coding so I assume your not wrong and my website is an old wallpaper.

Report · Mar 07, 2019

Im not 100% sure about what you mean by this.

Report · Mar 07, 2019

To give some context to why im creating a website, it is for a Zoo used for a school project in IT. Im very inexperienced in coding so would appreciate any help available to me here by all of you kind people.

Report · Mar 07, 2019

Can we assume apart from adding another page the Contact, About, Animals and Home pages are working?

If so just add an additional function to your <script></script> block and insert your html in the function:

function anotherPage() {

document.getElementById('content').innerHTML =

`<table>

<tr>

<td>

<h2>Another page</h2>

<td>

<tr>

</table>`;

}

Then add the link in your navigation html:

<li><a href="javascript:anotherPage();">Another Page</a></li>

There is no necessity to keep calling the font awesome css file or the <body></body> tags in your Animals function as they should be set up initially in the main page.

Report · Mar 07, 2019

Hi, I hate to be an annoying student but I attempted to add the code you told me and it broke the entire website and removed the entire nav bar. All pages work as you asked me also.

Report · Mar 07, 2019

I'm wondering if your site is composed by a content management system or a log-in admin panel from which you add new pages and menu items. The reason I ask is because editing code directly from outside the CMS could indeed cause a total site failure.

What's the URL to your online site?

Can you find out from your IT dept what software or platform was used to create this site?

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 08, 2019

https://forums.adobe.com/people/Nancy+OShea wrote
I'm wondering if your site is composed by a content management system or a log-in admin panel from which you add new pages and menu items. The reason I ask is because editing code directly from outside the CMS could indeed cause a total site failure.

I doubt it. I don't know any CMS that would write html to javascript functions like what has been posted. The code would most likely be stored in a database if using a CMS or some kind of stand alone flat page CMS.

I don't know - there is more to this than meets the eye. There should be a master page with the doctype and the content <div> which the functions are being called into and the nav isnt going to work unless its called into this master page. The functions for all I know may be being held in their own linked js file or they could be just sitting in the master page.

I also doubt this is on line anywhere - being a school project the student/s are probably just being taught something locally without having to upload the page anywhere, although there might be a possibility that the school has a server on which students work pages can be published. As you say seeing the actual existing page would go a long way to solving the 'mystery'.

The page will work if you include the additional function and the extra link correctly- as we know one false move and everything could potentially blow-apart.

Report · Mar 08, 2019

I think they are being linked in a JS file, and yes it is locally without having to upload the page anywhere.

Report · Mar 08, 2019

As this is a school task, everyone is building within dreamweaver but there isn't any URL to the online site, we just have to open it using google chrome and its not hosted.

Report · Mar 08, 2019

When you say <script></script> block do you mean this part?

Report · Mar 08, 2019

mitchellp61824118 wrote
When you say <script></script> block do you mean this part?

No. If your functions - mymenu(), home(), animals,() about(), contactus() are all in their own linked js file there wont be a <script></script> block surrounding them.

That's where your new page function needs to go - in with the current functions, so IF they are in their own file just add the new function to the end of the file and then add the new link to the mymenu() function, which I assume is in the file with all your other functions, as well.

If that is how the pages are set up you don't need to touch the page which contains the snippet of coding you have just posted.

See if that helps.

Report · Mar 12, 2019

Hey, Thank you for all your help so far but im still struggling to get this page on my site this is the code I added to my "menu.js" file and it seems to just break my entire site. Is there some more code I need to add elsewhere?

Report · Mar 12, 2019

So far I've only managed to get this appear on my site, but as soon as I add the function to my "menu.js" file it breaks the whole site. Im really not sure what im doing wrong lol.

Report · Mar 12, 2019

have just managed to get the page to be linked in the nar bar, but as soon as I add the function to my "menu.js file" the website still breaks.

and when I add this extra page my nav bar looks horrible like this so if anyone could further advise me on how to fix this part too i'd appreciate it.

Report · Mar 12, 2019

Open your page in a browser like Firefox or Chrome. Right-click and select Inspect Element or hit F12. to open the Developer Toolbar.

With any luck, you should be able to see the CSS styles that are effecting your navigation menu.

As an example,

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 12, 2019

Try something less complex. Below is what your main page should vaguely look like. I have no idea why you are using this work method but if you insist.

<!DOCTYPE html>

<html>

<head>

<title>Marshall Zoo</title>

</head>

<style>

.page-wrapper {

width: 90%;

margin: 0 auto;

}

.main-nav {

display: flex;

justify-content: space-between;

}

.main-nav ul {

display: flex;

flex: 1;

justify-content: flex-end;

margin: 0;

padding: 15px;

background-color: #000;

}

.main-nav li {

list-style: none;

margin: 0;

padding: 0;

}

.main-nav a {

text-decoration: none;

padding: 10px;

color: #fff;

}

.logo {

background-color: #fff;

width: 200px;

}

</style>

<body>

function mymenu() {

document.write('<ul><li><a class="active" href="javascript:home();">Home</a></li><li><a href="javascript:about();">About</a></li><li><a href="javascript:Animals();">Animals</a></li><li><a href="javascript:anotherPage();">Another Page</a></li><li><a href="javascript:contactus();">Contact</a></li></ul>');

}

mymenu();

</script>

</nav>

</div>

</body>

</html>

Now for simplicity insert each of your functions into their own page. For instance the about function insert into a new page and call it - about.js

function about()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

Our mission is to conserve biodiversity and other natural resources, both locally and internationally – but we rely on the support of thousands to bring it to life!

We engage with over 40,000 children and young people through our conservation educational programmes, and welcome over 500,000 visitors each year to our 140 acre zoological park. In every contact we seek to encourage understanding, and inspire care for the natural world. In essence, we aim to connect people with nature.

Our team of Conservation Biologists run field programmes in the UK & Africa in partnership with communities, statutory agencies and other non-governmental organizations. Find out which species we’re working with and the positive, sustainable impacts we’re making on our conservation website.

</textarea>

</td>

</tr>

</table>`;

}

Repeat the same for your other functions and give the page the same name as that which is in the <script> tags at the bottom of the main page - home.js, animals.js, another-page.js, contact.js

I have zero idea where this is going but if you follow the steps at least you will have a working page. How you style it is up to you.

Report · Mar 15, 2019

Thank you for you help so far guys, I know im a big noob here so this does help me learn too. I will try this once I get home and show you the result.

Report · Mar 26, 2019

Hi guys, sorry for the huge delays in my posting but my school had a break. I'm not 100% what you meant osgood but I have copied your code and I will attach screenshots of my issues now.

This is my website folder and what I understood by your previous message I had to create seperate java files for each page?

I have tried to call them in Dreamweaver but I am presented with this error and I cant edit the code on any of the JS files, using the about.js file as an example here.

Report · Mar 26, 2019

I'm not familiar with how a PC shows file names in a folder but on a Mac the files names would end with an extention:

about.js

animals.js

another-page.js

home.js

Maybe that's why you're getting the message.

I don't really understand why all the files in your folder are missing their extensions, yet show the correct format, maybe someone who uses a PC can elaborate, or maybe its just a PC way of showing the files.

To edit the code in a .js file you have to open it directly.

Post the code in your index file here as I think that is probably where the corrupt code is.

Report · Mar 26, 2019

In File Manager, check the box to get the file extensions

Wappler, the only real Dreamweaver alternative.

Adobe Community

How to add another page link to my nav bar

1 Correct answer