24

I have a navigation bar for my website:

    <div id='menu'><ul>
    <li><a href='index.html'>Home</a></li>
    <li><a href='about.html'>About Us</a></li>
    <li><a href='http://www.brownpapertickets.com' target=_blank>Ticket Sales</a></li>
    <li><a href='merch.html'>Merchandise</a>
        <ul>
            <li><a href='merch.html'>Products</a></li>
            <li><a href='cart.html'>Shopping Cart</a></li>
        </ul>
    </li>
    <li><a href='past.html'>Past Shows</a>
        <ul>
            <li><a href='photos.html'>Photo Gallery</a></li>
            <li><a href='vids.html'>Video Clips</a></li>
        </ul>
    </li>
</ul></div>

I want to store this in one central place so that every time I have to add a hyperlink or something I don't have to edit every single file. What's the best way to do this?

Jason
  • 583
  • 2
  • 6
  • 8
  • 4
    Can you run any server-side language like PHP? – Wylie Aug 14 '11 at 04:36
  • As an alternative to using a server-side language, you could use a static site generator with a template that defines the commons parts of your pages. Here's a big list of static website generators: http://iwantmyname.com/blog/2011/02/list-static-website-generators.html – Josh Rosen Aug 14 '11 at 04:42
  • using IDs: http://www.webdeveloper.com/forum/showthread.php?156367-Making-my-menu-load-from-external-file – Gabriel Aug 20 '16 at 18:55
  • using Frames: http://www.jqwidgets.com/community/topic/can-menu-load-template-into-include/ – Gabriel Aug 20 '16 at 18:56
  • Possible duplicate of [Have a single menu on multiple pages?](http://stackoverflow.com/questions/2216347/have-a-single-menu-on-multiple-pages) – Gabriel Aug 20 '16 at 18:58
  • Solution available here: http://stackoverflow.com/questions/39447411/how-to-load-nav-menu-from-an-external-file-no-wamp-all-code-must-be-browser – Gabriel Sep 12 '16 at 17:10

5 Answers5

24

Assuming you are using a scripting language such as PHP, you simply save that HTML above in a php file called header.php (or something to your liking)

Then in your other php files you write:

include_once('header.php'); and it will plop that HTML right in there.

Some resources for you:

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

http://www.php.net/manual/en/function.include-once.php

http://php.about.com/od/tutorials/ht/template_site.htm

Enjoy!

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • Can this be done without PHP? Just html, css (maybe python..) –  Nov 21 '16 at 21:29
  • 1
    Of course with Python if that's serving up your web views. For example in a Django template you would add `{% include "path/to/partial/template.html" %} `. You could also use JavaScript as outlined in the answer from @no.good.at.coding – AlienWebguy Nov 23 '16 at 20:21
18

Update @AlienWebguy pointed out that these solutions will hurt your rankings in search engine results. If you care about that, don't use them. But in my opinion, as valid options, they are worth knowing about.

If a server-side include (using PHP or some other language) is not an option you could do it using :

  1. Frames
    In all your pages, include an iframe (styled to be without borders or scrollbars) and set the src to be an HTML file that holds your navigation markup. Of course, you're going to run in trouble with following links and you'll probably have to resort to JavaScript in order to get the 'right' behaviour. This is probably not worth the effort. To follow the links correctly, you'll need to use the target attribute in your navigation links to _top (or perhaps _parent). This is probably the simplest solution that should work even in user agents without scripting support.

    For example, your page will look like this:

    <html>
<body>
    <iframe src="navbar.html" class="navbar" />
    <!-- other content here -->
</body>
</html

    with navbar.html looking like this:

    <html>
<body>
    <div id='menu'><ul>
        <li><a href='index.html' target="_top">Home</a></li>
        <li><a href='about.html' target="_top">About Us</a></li>
        <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
        <li><a href='merch.html' target="_top">Merchandise</a>
            <ul>
                <li><a href='merch.html' target="_top">Products</a></li>
                <li><a href='cart.html' target="_top">Shopping Cart</a></li>
            </ul>
        </li>
        <li><a href='past.html' target="_top">Past Shows</a>
            <ul>
                <li><a href='photos.html' target="_top">Photo Gallery</a></li>
                <li><a href='vids.html' target="_top">Video Clips</a></li>
            </ul>
        </li>
    </ul></div>
</body>
</html>

  2. Ajax
    Save the HTML you need for the navbar in the form of an HTML fragment (not a complete HTML document) and load it using ajax on page load. Here's an example using jQuery. On your page:

    <html>
<script type="text/javascript">
    $(document).ready(function(){
        $('#menu').('navbar.html');
    });
</script>

<body>
    <div id='menu' />
</body>
</html>

    navbar.html

    <ul>
    <li><a href='index.html' target="_top">Home</a></li>
    <li><a href='about.html' target="_top">About Us</a></li>
    <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
    <li><a href='merch.html' target="_top">Merchandise</a>
        <ul>
            <li><a href='merch.html' target="_top">Products</a></li>
            <li><a href='cart.html' target="_top">Shopping Cart</a></li>
        </ul>
    </li>
    <li><a href='past.html' target="_top">Past Shows</a>
        <ul>
            <li><a href='photos.html' target="_top">Photo Gallery</a></li>
            <li><a href='vids.html' target="_top">Video Clips</a></li>
        </ul>
    </li>
</ul>
no.good.at.coding
  • 20,221
  • 2
  • 60
  • 51
  • -1 This is an absolutely horrible idea. Your main nav is the heart of your SEO juice. Why on earth would you ajax it so Google doesn't see any links to your main pages? – AlienWebguy Aug 14 '11 at 05:03
  • 10
    @AlienWebguy I feel the downvote was unnecessary - simply pointing out to the OP that if he cared about SEO, this wasn't a good idea (but valid options IMO). I answered the OPs question with the qualification that in the situation where a server side include was not possible, these were alternative approaches. There are certainly other considerations to be made when creating a website and as you've pointed out, perhaps search engine ranking is something the OP should consider. But it seems to me that that was not something very relevant to the question from a programming point of view. – no.good.at.coding Aug 14 '11 at 05:51
  • 1
    We don't know if the OP is developing a public site or an internal one - in the latter case, I doubt SEO figures very high in the list of considerations. Either way, I gave the OP options to consider given the information in the question. – no.good.at.coding Aug 14 '11 at 05:53
  • Yes. It will create SEO problems. Yes, the downvote was unnecessary (the OP does not mention that the solution should be SEO-compatible). – Gabriel Sep 12 '16 at 08:47
  • Its definately usable when you are creating a web portal for organisation's intranet where getting is server needs lot many permissions and SEO is not required. – codeomascot Nov 14 '17 at 13:52
4

I am using smartmenus for jquery which requires that you add 

$('#main-menu').smartmenus();

if you have submenus

I found that if you extend the load to:

$('#menu').load('navbar.html',function(){
    $('#main-menu').smartmenus();
});

this works fine. Where main-menu is the class of ul of the menu block.

Barry MSIH
  • 3,525
  • 5
  • 32
  • 53
APA
  • 164
  • 1
  • 5
1

You could use AJAX and then make a separate page with just the menu code on there.

Actually you could simply use jQuery's .load() which is very easy to use.

Here's an example loading nav.html into a div with #nav-container for the ID:

<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('/path/to/nav.html');
});
</script>

You would just have to add this code to each page and have a div on there but once you do this, you'll only have to update nav.html

Note: This is the best way to do it if you can't use PHP, as iframes are just not that good anymore. This will actually load the code from nav.html into the page right as the page is loading. (accept the <html>, <body>, and other page tags. It'll only the code within <body></body> on the nav.html page.

For your users without JavaScript, just put an iframe in <noscript></noscript> tags if you really want to. If you users have to have JavaScript enabled regardless to use your site then you don't have to bother with that. (remember with iframes you have to set targets and stuff on all of the links in the navigation.)

Remember to include the jQuery file link in your head tags on all of your pages that you're loading nav.html into if you haven't already.

Hope this is helpful.

Nathan
  • 11,814
  • 11
  • 50
  • 93
0

You can just put your nav bar's markup into a file menu.htm and use a (server-side includes) in the spot on your pages where you want your menu's markup. https://stackoverflow.com/a/2216356/2303079

Here's a similar discussion: Have a single menu on multiple pages?

Community
  • 1
  • 1
CaptainJanuary
  • 51
  • 4