0

I've done some simple HTML pages in the past. Now I'd like to add a navigation sidebar. Looking for an example I've found one that seems to do what I need.

I've tried and modified this example which also can be viewed and tested online:
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_fixed

The list of links only contains hashes so nothing happens when clicking on any of these.
So I've added my own link to the bottom of the list:
<li><a href="https://de.wikipedia.org">Wiki</a></li>

Clicking my own link "Wiki" opens Wikipedia. However this link is opened using up the complete window instead of only the right part of the window. The navigation bar disappears.

Now my question is how to define my own links that open only in the right hand side of the window keeping the navigation bar visible.

I'm working on a Windows PC using Firefox.
The article linking to the example may be found here:
https://www.w3schools.com/css/css_navbar.asp

Thank you very much.

Auto-Mark
  • 3
  • 1

2 Answers2

0

don't be confused between document and window. when you open a link the window of the link is open in a new window. one way to control it is by using iFrame witch load a different window in the current document. but maybe this is not your purpose. if you want to render your own written pages by navigating to a new window you wrote - with the same nav. the site will seem to open in the "same" document.

Matan Sanbira
  • 1,433
  • 7
  • 20
  • Thanks. Does that mean that every linked page has to have the same navigation bar? This doesn't seem to be very elegant. Also I'd like to link to external pages as shown in the example. This sounds like I'll have to look into iframes. – Auto-Mark Jan 23 '20 at 15:21
  • yes and yes. this is why front end devs use frameworks like React or Vue to write a component once and use it everywhere easily – Matan Sanbira Jan 23 '20 at 15:25
0

As my original approach didn't work I've combined two answers of stackoverflow to get the desired results.
Sidebar with iframe
and
Open link in iframe

Auto-Mark
  • 3
  • 1