CODEWITHSUNDEEP
htmlcssnavigation-drawermenubarappbar
gio
gio

Reputation:

How To Make Reuseable HTML Navigation Menus?

I'm sure this topic comes up all the time,
But I can't seem to fine a concise answer.

I've got a vertical menu bar that I want to reuse in webpages (>20). The Menu Bar is coded in HTML and uses uses: UL, LI, A, <Div> tags, and CSS. We need this:

  1. Reusable
  2. Maintainable
  3. Scalable

So we don't have to modify all pages every time we add a page.

We'd rather avoid a coding approach if possible. We could live with just one master file that we edit as needed. Since we're using CSS and <div>s, I don't think frames scale for us. What can we do?

Upvotes: 11

Views: 22759

Answers (10)

spammusubix
spammusubix

Reputation: 1

I was searching for a way to write a reusable navigation menu that toggled(show/hide) when clicking a button. I want to share a solution that worked for me in case anyone else is looking to do the same. This solution uses jQuery, html, and css.

Add this line of code to your head tag in your main index.html file:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Add div for your nav in body tag:

<div id="mySidenav" class="sidenav"></div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#mySidenav").load("nav.html").toggle().width("400pt");
  });
});
</script>

Create a html file that will be where your navigation menu resides. My file is called nav.html and inside the file the contents look like this:

<a href="musubi.html">have you found your one true musubi?</a>` <a href="example2.html">item2</a> <a href="example3.html">item3</a>

Upvotes: 0

Martin Pfeffer
Martin Pfeffer

Reputation: 12627

Using a w3 script..

index.html

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="header.html"></div>
<div w3-include-html="nav.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

header.html

<h1>Title</h1>

nav.html

<h2>Your nav</h2>

See also: http://www.w3schools.com/howto/howto_html_include.asp

And don't forget to test this code on your localhost.

Upvotes: 2

deceze
deceze

Reputation: 522110

As a modern answer to a six year old question: Web Components are specifically reusable HTML components, and Polymer is possibly the most popular implementation of it at the moment. Currently virtually no browser has native support for Web Components, so at the very least a Javascript polyfill is required.

Upvotes: 1

Abhinav Aggarwal
Abhinav Aggarwal

Reputation: 1363

I was facing the same thing. Then, I created a new file for storing the html of the navigation bar.

I created a file navbar.html which had all my navigation bar code. Then, in your main html file where you want navigation bar, just include this file by using jquery.

$(document).ready(function() {
    $('#navigation').load('navbar.html');
});

Then at the place where you want navigation bar, just add this line:

<div id="navigation"></div>

Upvotes: 1

Filippo Mazza
Filippo Mazza

Reputation: 4377

Without any server side script or Javascript you can use object or iframe tags.

http://www.w3schools.com/tags/tag_object.asp

http://www.w3schools.com/tags/tag_iframe.asp

The only thing to care is to indicate target="parent" in links.

Hope it helps

Upvotes: 2

Elle
Elle

Reputation: 166

I've done this two separate ways - one using server side (PHP) and one using Javascript includes (for demos that need to be able to run without any internet connection or server capabilities).

For PHP includes your pages will have to end with .php rather than .htm or .html, and these are very ideal to replace your header, footer, navigation, etc. Anything that is repeated on multiple pages.

Basically you would create your normal code then copy and paste the code you want to break out - in this example, your navigation - and save it in another file called (for example) inc_navigation.htm (this page can be called .htm).

Then in your actual pages you'd use the following code:

<?php include('inc_navigation.htm') ?>

That would insert your navigation at that point, if you had a change to make you'd make it to the .htm file and it would propagate to any page with that included.

For javascript includes you will have to include the following line at the top of every document where you want to include your navigation:

<script type="text/javascript" src="includes.js"></script>

Then you'll create a document called includes.js.

At the top of this document you'll declare your navigation variable:

var navigation  = new Array();  // This is for the navigation.

Then a little ways down in that same document you need to actually outline your navigation code (the line numbers in the square brackets are crucial - keep them in order and start with 0 - you cannot have line breaks in this code so every line of code has to be a new line):

// ==================== Navigation ==================== //
navigation[0]   = '<div id="tab_navigation">';
navigation[1]   = '<ul id="dropline">';
navigation[2]   = '<li><a href="index.htm"><b>Home</b></a></li>';
navigation[3]   = '<li><a href="about_us.htm"><b>About Us</b></a></li>';
navigation[4]   = '</ul>';
navigation[5]   = '</div><!-- Close TAB NAVIGATION -->';

Then a little ways after that you'll actually insert the javascript that will put that code into your page (it doesn't actually put it there but rather makes it accessible in the page without actually altering the code of the .htm page - so if you view source you'll see the reference to the code not the code itself).

function show(i)
 {
  for (x in i)
  {
   document.write(i[x]+'\n')
  }
 }

Finally - in your .htm document, say for your index.htm page, you'll replace your navigation code (that you put in the above block called navigation) with this:

<script type="text/javascript">show(navigation);</script>

Where that name after SHOW and in the parenthesis is the name of your variable (declared earlier).

I have sites showing both methods in use if you'd like to see them just send me a message.

Upvotes: 1

rjzii
rjzii

Reputation: 14543

So far one of the best solutions I have found is to model the menus after the Son of Suckerfish XHTML/CSS solution that is pretty well documented on the internet now combined with some logic on the server to render the unordered list. By using unordered lists you have a couple different options on how to output the results, but as long as the menu has some basic hierarchy you can generate it. Then for the actual page all you need to do is include a reference to the menu generating function.

Upvotes: 0

zombat
zombat

Reputation: 94167

Server side includes are the way to go if you don't want to use a programming language.

They take this form:

<!--#include virtual="menu.html" -->

and will be inserted in the page wherever you put that tag in your HTML. It requires server side parsing, so your web server must have server side includes enabled. You can try it out, and if it doesn't work, contact your server host to see if you can get them enabled. If it's Apache, there's a method of enabling them via .htaccess files as well.

Upvotes: 9

marcgg
marcgg

Reputation: 66445

In order to do this, you'll have to use some server side technology. For instance you could...

  • include them in php

  • put them in the master page in .net

  • put this in a partial or a layout page in rails

Some reading:

http://us.php.net/manual/en/function.include.php

http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

Another solution would be to create all this using Javascript, but please don't do it like that :)

html:

<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>

hack.js:

function createMenu(){
  $("#mymenu").html("all the html of your menu");
}

Upvotes: 2

Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53603

If you would use PHP, all you have to do is use the include command, no coding beyond this one command.
Also, check out server side includes

Upvotes: 0

Related Questions