Nav Menu for all pages of site - Overclock.net

StepsAscend · 09-13-06

I'm new to all this, but I'm making a personal website for a class. I've found some code for a really great javascript nav menu to go on the left side of my page. I want this on every page, but I don't want to have to update each individual file each time I add an item to the menu. What is the best way to achieve this?

**Chipp** · 09-13-06

The easiest would be to use HTML frames. Have one centeral frame in the center of the page (index.html) where your actual content goes, then have the links in the Java navigation bar point to that specific frame. (So that news.html or whatever your content is shows up in the centeral frame, while the rest of the page, I/E the nav bar, stays the same.) I'm not as good with HTML as I used to be, but I could probably dig up one of my old sites if you wanted to see some of the code.

EDIT: Hre is a very complicated, but good guide on how to properly set up frames. http://www.w3.org/TR/html4/present/frames.html (I suggest using Frontpage, it makes them a breeze, if not totaly proper.)

StepsAscend · 09-13-06

I thought about that. My prof has specifically asked us not to use frmaes though. If I can implement it smoothly then he won't mind but I'll avoid it if possible. Any other ideas?

**Chipp** · 09-13-06

Quote:

Originally Posted by StepsAscend

I thought about that. My prof has specifically asked us not to use frmaes though. If I can implement it smoothly then he won't mind but I'll avoid it if possible. Any other ideas?

No frames, eh? Sorry man, that's all I've really ever used. Wish I could help more... Good luck!

stupid · 09-13-06

chances are your school computers run .net 2.0 framework, and with that you can use what is called asp.net masterpages. You should be able to find some good documentation on the web for them. I use them at work. Basically a masterpage is a webpage that is the 'master' template which has an <asp:contentplaceholder> for where your other pages go, your other pages all load up inside the masterpage, so you only have to edit once. It is very simple to do in ColdFusion as well, but that is most likely not used in class.

I am sure there is a way to do this in php, but it has been so long since I have touched it I don't know off the top of my head.

Here is a simple example (sorry if they are a bit long):

MasterPage.master:

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .sidebar {
        position:absolute;
        background-color:yellow;
        }        
        .content {
        margin-left:100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="sidebar">
        <a href="Default.aspx">LINK1</a><br />
        <a href="Default2.aspx">LINK2</a><br />
    </div>
    <div class="content">
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

see how it uses the placeholder tag? Thats where it will insert all of your pages as long as the page includes the tag 'MasterPageFile="~/MasterPage.master"' in them

here is Default.aspx:

Code:

<%@ Page Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Default Page <br /><br />BLA!<br />BLA!<br />BLA!<br />BLA!<br />BLA!<br />BLA!<br />
</asp:Content>

and the other page, Default2.aspx:

Code:

<%@ Page Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Page 2!?@#?!@#?!    <br />;aklsdhjfkljasghdfkjahsdgf
    <br />;aklsdhjfkljasghdfkjahsdgf    <br />;aklsdhjfkljasghdfkjahsdgf
    <br />;aklsdhjfkljasghdfkjahsdgf    <br />;aklsdhjfkljasghdfkjahsdgf
    <br />;aklsdhjfkljasghdfkjahsdgf    <br />;aklsdhjfkljasghdfkjahsdgf
</asp:Content>

You can see it work here:http://auctionconstructor.com/asp

It is extremely ugly, but you get the point.

fyi, this is an example in asp.net 2.0

StepsAscend · 09-14-06

well, i achieved the desired effect with an iframe. problem is I can't link directly to the page and already have the iframe opened to a specific link. Working on that now.

stupid · 09-14-06

You will only link to the main page that has the iframe within it. The other pages will be rendered in the iframe only, the url will never change.

Main page (with navigation):

Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title>TEST</title>
    <style type="text/css"> 
        body {background-color:gray;}
        .sidebar { position:absolute; top:0; left:0;} 
        .content { margin-left:100px; width } 
    </style>
</head> 
<body>
    <div class="sidebar"><br /><br />
        <a href="#" onclick="document.getElementById('iframe').src='iframe2.htm';">PAGE1</a><br /> 
        <a href="#" onclick="document.getElementById('iframe').src='iframe.htm';">PAGE2</a><br /> 
    </div>
    <div class="content">
        <iframe id="iframe" scrolling="no" style="border:0" frameborder="0" src="iframe.htm" width="100%" height="100%"></iframe>
    </div>
</body>
</html>

the two pages it will load:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body style="background-color:Blue;">
</body>
</html>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body style="background-color:Lime;">
</body>
</html>

I am not sure if I answered your or not, please let me know.

sniperscope · 09-24-06

All you need to do is place the javascript in a separate file (e.g. navbar.html) and just include it on every page using PHP:

Code:

<?php include "www.yoursite.com/navbar.html");
?>

		Overclock.net - Overclocking.net > Software, Programming and Coding > Coding and Programming > Web Coding
Nav Menu for all pages of site

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)