Known Participant

Answered

How to add another page link to my nav bar

Forum|Forum|6 years ago
March 6, 2019
5 replies
1931 views

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.

This topic has been closed for replies.

Correct answer Nancy OShea

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>

mitchellp61824118Author

Known Participant

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.

Nancy OShea

Community Expert

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

mitchellp61824118Author

Known Participant

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.

mitchellp61824118Author

Known Participant

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.

O

osgood_

Legend

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.

mitchellp61824118Author

Known Participant

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.

Nancy OShea

Correct answer

Community Expert

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

O

osgood_

Legend

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.

mitchellp61824118Author

Known Participant

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

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

mitchellp61824118Author

Known Participant

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded