How to store nav bar in one file?_问答_开发者_运维开发者技术经验分享

I have a navigation bar for my website:

    <div id='menu'><ul>
    <li><a href='index.html'>Home</a></l开发者_Go百科i>
    <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?

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!

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 :

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>

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>

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.

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.

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?