Universal Nav Bar?

Blue445 · 03-29-2009, 01:36 PM

Hello, the few wepages I've made over the past required me to edit every Nav bar on every page whenever I add or take away a link, or change it in anyway. Is there a way to have an external file, like CSS, where all my pages link up to for the Nav bar?

**dm01** · 03-29-2009, 07:54 PM

There is a way, but it requires JavaScript (which not every browser supports) or PHP (which not every server supports).

JavaScript:

in a .js file:

Code:

//dm01's navbar
document.writeln('<div id="left">');
document.writeln('<div id="left-in">');
document.writeln('<ul id=nav-left>');
document.writeln('<li><a href="url">Linky 1</a></li>');
document.writeln('</ul>');
document.writeln('</div>'); //end #left
document.writeln('</div>'); //end #left
//end script

You will have to add this in your page as well (JS call and degradation for the people who don't like JavaScript for whatever reason):

HTML Code:

<script type="text/javascript" src="javascript/menu.js"></script>
<div id="noscript">
<p>If you are seeing this message, your JavaScript has been disabled. Please enable JavaScript to see this content. I assure you it is neither annoying nor malicious, unless you consider a menu file to be either.</p>
<p>Of course, you could always just use the (unfinished) <a href="sitemap.html">Site Map</a></p>
</div> <!--id="noscript"-->

PHP:

in your document:

PHP Code:


			
include(file.html);

if the file is not completely necessary to the page, or

PHP Code:


			
require('file.html');

if the file is absolutely necessary to the page (causes page load failure if the file can not be found).

Where file.html is a separate document with the markup for the navbar. With this method you do not need a degradation, but if the server won't co-operate you won't be able to use it. You don't need to use any other PHP for this method.

There is another way to use PHP, but it screws up more often (just the way PHP is). If the above doesn't work, try:

PHP Code:


			
echo file_get_contents( "file.html" );

Blue445 · 03-30-2009, 04:14 PM

PHP is the only way to do this? I havn't worked with PHP or JavaS, only HTML and CSS.

**dm01** · 03-30-2009, 04:26 PM

Unless you want to update every page manually every time a change is required, yes. CSS can not handle this operation.

I would use PHP if possible, but the JavaScript method works quite well if PHP is not an option.

Blue445 · 03-30-2009, 05:08 PM

Hm...Like i said, i don't know how to use the PHP...where do i paste the line in my document? And how do i set up my second HTML file?

Thanks

**dm01** · 03-30-2009, 05:17 PM

You put the PHP line where you want the nav bar to be (at the top for a top, left, or right nav bar, and at the end for a bottom nav bar).

The second .html file is just a standard .html file, the PHP inserts the markup directly into the document.

Blue445 · 03-30-2009, 05:22 PM

I put the PHP line in my Divs, and it just shows up the text, not the menu bar.

**dm01** · 03-30-2009, 05:33 PM

Does your server fully support PHP?

Linky?

Blue445 · 03-30-2009, 06:08 PM

Yes, it does...

And whats Linky?

Heres my code btw:

HTML Code:

<body>
<div id="header">


	<div id="logo">
		<h1><a href="#">CHRIS</a></h1>
		<p>Pixil Time</a></p>
	</div>
	<!-- end #logo -->
	<div id="menu">
	include(file.html); 
	</div>
	<!--end #menu --> 
</div>
<!-- end #header -->

and the second page

HTML Code:

		<ul>
			<li class="first"><a href="#">Home</a></li>
			<li><a href="#">Image Gallery</a></li>
			<li><a href="#">Stories</a></li>
			<li><a href="#">Forums</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>

**dm01** · 03-30-2009, 06:46 PM

Try this instead:

PHP Code:


			
echo file_get_contents( "file.html" );

Remember to replace file.html with the name and path of the file you wish to import.

Blue445 · 03-30-2009, 08:25 PM

Nope, still showing text.

**dm01** · 03-30-2009, 09:29 PM

Did you <link /> the CSS file to the menu page? Sometimes this may be necessary.

<link rel = "stylesheet" type = "text/css" href="filepath/cssfile.cs"></link>

Blue445 · 03-31-2009, 04:44 PM

Still refuseing to work :(

**dm01** · 04-01-2009, 01:55 AM

Ah, I think I found it. The secondary file is a complete web page. You have omitted the DocType Declaration, <html>, <head></head>, and <body>. When you add the missing elements, the page should appear correctly formatted.

03-29-2009, 01:36 PM	#1 (permalink)
Blue445 Registered User Join Date: Dec 2008 Posts: 160 OS: Linux Mint	Universal Nav Bar? Hello, the few wepages I've made over the past required me to edit every Nav bar on every page whenever I add or take away a link, or change it in anyway. Is there a way to have an external file, like CSS, where all my pages link up to for the Nav bar? __________________ bLUE445

03-29-2009, 07:54 PM	#2 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,427 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Universal Nav Bar? There is a way, but it requires JavaScript (which not every browser supports) or PHP (which not every server supports). JavaScript: in a .js file: Code: //dm01's navbar document.writeln('<div id="left">'); document.writeln('<div id="left-in">'); document.writeln('<ul id=nav-left>'); document.writeln('<li><a href="url">Linky 1</a></li>'); document.writeln('</ul>'); document.writeln('</div>'); //end #left document.writeln('</div>'); //end #left //end script You will have to add this in your page as well (JS call and degradation for the people who don't like JavaScript for whatever reason): HTML Code: <script type="text/javascript" src="javascript/menu.js"></script> <div id="noscript"> <p>If you are seeing this message, your JavaScript has been disabled. Please enable JavaScript to see this content. I assure you it is neither annoying nor malicious, unless you consider a menu file to be either.</p> <p>Of course, you could always just use the (unfinished) <a href="sitemap.html">Site Map</a></p> </div> <!--id="noscript"--> PHP: in your document: PHP Code: `include(file.html);` if the file is not completely necessary to the page, or PHP Code: `require('file.html');` if the file is absolutely necessary to the page (causes page load failure if the file can not be found). Where file.html is a separate document with the markup for the navbar. With this method you do not need a degradation, but if the server won't co-operate you won't be able to use it. You don't need to use any other PHP for this method. There is another way to use PHP, but it screws up more often (just the way PHP is). If the above doesn't work, try: PHP Code: `echo file_get_contents( "file.html" );` __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

03-30-2009, 04:14 PM	#3 (permalink)
Blue445 Registered User Join Date: Dec 2008 Posts: 160 OS: Linux Mint	Re: Universal Nav Bar? PHP is the only way to do this? I havn't worked with PHP or JavaS, only HTML and CSS. __________________ bLUE445

03-30-2009, 04:26 PM	#4 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,427 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Universal Nav Bar? Unless you want to update every page manually every time a change is required, yes. CSS can not handle this operation. I would use PHP if possible, but the JavaScript method works quite well if PHP is not an option. __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

03-30-2009, 05:08 PM	#5 (permalink)
Blue445 Registered User Join Date: Dec 2008 Posts: 160 OS: Linux Mint	Re: Universal Nav Bar? Hm...Like i said, i don't know how to use the PHP...where do i paste the line in my document? And how do i set up my second HTML file? Thanks __________________ bLUE445

03-30-2009, 05:17 PM	#6 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,427 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Universal Nav Bar? You put the PHP line where you want the nav bar to be (at the top for a top, left, or right nav bar, and at the end for a bottom nav bar). The second .html file is just a standard .html file, the PHP inserts the markup directly into the document. __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

03-30-2009, 05:22 PM	#7 (permalink)
Blue445 Registered User Join Date: Dec 2008 Posts: 160 OS: Linux Mint	Re: Universal Nav Bar? I put the PHP line in my Divs, and it just shows up the text, not the menu bar. __________________ bLUE445

03-30-2009, 05:33 PM	#8 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,427 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Universal Nav Bar? Does your server fully support PHP? Linky? __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

03-30-2009, 06:46 PM	#10 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,427 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Universal Nav Bar? Try this instead: PHP Code: `echo file_get_contents( "file.html" );` Remember to replace file.html with the name and path of the file you wish to import. __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

03-30-2009, 08:25 PM	#11 (permalink)
Blue445 Registered User Join Date: Dec 2008 Posts: 160 OS: Linux Mint	Re: Universal Nav Bar? Nope, still showing text. __________________ bLUE445

03-30-2009, 09:29 PM	#12 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,427 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Universal Nav Bar? Did you <link /> the CSS file to the menu page? Sometimes this may be necessary. <link rel = "stylesheet" type = "text/css" href="filepath/cssfile.cs"></link> __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

03-31-2009, 04:44 PM	#13 (permalink)
Blue445 Registered User Join Date: Dec 2008 Posts: 160 OS: Linux Mint	Re: Universal Nav Bar? Still refuseing to work :( __________________ bLUE445

04-01-2009, 01:55 AM	#14 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,427 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Universal Nav Bar? Ah, I think I found it. The secondary file is a complete web page. You have omitted the DocType Declaration, <html>, <head></head>, and <body>. When you add the missing elements, the page should appear correctly formatted. __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.