发表新帖
发表新帖

How to store nav bar in one file?

前端 未结
关注
5 1479
囚心锁ツ
囚心锁ツ 2021-01-30 11:39

I have a navigation bar for my website:

    
    
    
  • Home
    • 
    
  •          


        

                      

              相关标签:
5条回答
  • [愿得一人]
    2021-01-30 11:48

    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>
    0 讨论(0)
  • 情话喂你
    2021-01-30 11:52

    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.

    0 讨论(0)
  • 广开言路
    2021-01-30 11:54

    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.

    0 讨论(0)
  • 情歌与酒
    2021-01-30 12:01

    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?

    0 讨论(0)
  • 面向向阳花
    2021-01-30 12:02

    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!

    0 讨论(0)
 看不清?
提交回复
热议问题