Member Avatar for supriya.iiita

hi i wud like to make a side navigation bar which opens links in another side of page , but on the same page only.
i have prepared the css but what i need is to give the target to the link so that it opens the link at the required position.

my code looks like following right now:

<html>
<head>
  <title>My first styled page</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
<style type="text/css">

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }


</style>
</html>

kindly help with this..
basically i wanted my page to work something like the follwoing link:

thanking in advance!

  • 2 Contributors
  • 1 Reply
  • 283 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by effu

Dani AI

Generated

A short, practical summary and two safe ways to get the left menu to open content on the right without reloading the whole page. wants the nav to stay visible while the right-hand area changes; ’s multi-page suggestion is the simplest progressive-fallback (keep separate HTML files and a shared stylesheet). If you want the single-page behaviour you asked for, pick one of these two approaches depending on needs:

  1. Named iframe — fastest, least code
  • Place an iframe as the right-hand panel and give it a name. Point each nav link’s target at that name. This requires no JavaScript and works in every browser, but content inside an iframe is not always indexed or scriptable from the parent (cross-origin pages cannot be manipulated). Remember to add a descriptive title on the iframe for accessibility.

Example:

<a href="musings.html" target="panel">Musings</a>

<iframe name="panel" title="Main content" src="index-content.html" style="width:100%;height:80vh;border:0;"></iframe>
  1. Progressive JavaScript loader — modern and SEO-friendly
  • Keep each page as a full HTML file (so links still work with JS off). When JS is available, intercept nav clicks, fetch() the target page, extract the main fragment, inject it into the right panel, and call history.pushState() to update the URL. This gives smooth transitions and lets search engines index full pages (because the links still point to real pages).

Minimal pattern:

document.querySelector('.navbar').addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    e.preventDefault();
    fetch(e.target.href).then(r => r.text()).then(html => {
      document.getElementById('main').innerHTML = /* extract fragment from html */;
      history.pushState({}, '', e.target.href);
    });
  }
});

Useful tips and troubleshooting

  • Ensure the iframe name exactly matches link target. Relative paths in the iframe are resolved relative to the iframe page, not the parent. For the JS approach, watch CORS (must be same origin) and sanitize injected HTML. For layout, prefer CSS flexbox or grid for a stable two-column layout instead of absolute positioning.
Member Avatar for effu

Were you planning on using JavaScript, Frames, or something else?

If it's just plain HTML and CSS here is one method:

For musings.html
1. Copy what you have.
2. Save it as musings.html
3. Change the <!-- Main content --> section to the "musings" content.
4. Re-save
5. Repeat with another file

Also, you could save your CSS to an external location and reference it in your HTML. This method makes it easier when changing the CSS around, so it will be changed on all your HTML files that refer to it. Place this code within your <HEAD> tags

<LINK href="style.css" rel="stylesheet" type="text/css">

Here is your style.css:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.