发表新帖
发表新帖

How can I make my navi-bar the same across my html?

后端 未结
关注
9 771
长发绾君心
长发绾君心 2020-12-05 13:26

With each new page I have to update the navigation panel. Which means I go from page to page copying and pasting my navigation bar. The more pages I add the harder it gets.

相关标签:
9条回答
  • 予麋鹿
    2020-12-05 13:42

    If you would like to use PHP to achieve, this, you can do something similar to the code below. You'll have 2 "template" files, and then however many "content" files you need.

    • header.php will include content on the header (logo, nav menu, etc)
    • footer.php will include content on the footer (bottom navigation, copyright, disclaimers, etc.)
    • content.php will include the actual content you wish to display. You can have an infinite number of "content" pages.

    Note that while these files have .php extensions, HTML code still works perfectly fine. So you can do something like this for every content.php:

    content.php

    <?php include "header.php"; ?>

<div class="content">
Your page content will go here
</div>

<?php include "footer.php"; ?>

    header.php

    <html>
<body>
<div class="header">
Header content such as nav bar here
</div>

    footer.php

    <div class="footer">
Footer content such as copyright here
</div>
</body>
</html>

    In this way, you can change the contents of header.php and footer.php just once, and the changes will be reflected in all the pages you've included the files in.

    If you have any further questions or would like something explained again, feel free to post a comment.

    0 讨论(0)
  • 长情又很酷
    2020-12-05 13:44

    You can use server side scripting languages like php or ruby. Or you can create some say menu.json file and create menu from that in javascript.

    1. With serverside you should setup server or you can use XAMPP for fast setup.

    2. Create header.html with all your menu links

    3. Inlude menu file by using <?php include 'header.html'; ?> line (all files where you use it should be with .php extension or you can edit php config file for .html extension)

    0 讨论(0)
  • 渐次进展
    2020-12-05 13:55

    PHP would probably be the best method in this case, but since it sounds like you already have everything set up in pure HTML and JavaScript, you could consider using jQuery to load an external file into the DOM.

    jquery.load('header.html')

    This, of course has its own set of concerns, but you can effectively control everything from a simple .js framework without having to use php includes and doesn't require an iFrame.

    You'd still potentially want to address a fallback for browsers without JavaScript turned on, so I only suggest this without knowing all the details, and I would still suggest that php would still be a better solution since you're allowing the server to do the heavy lifting.

    0 讨论(0)
  • 抹茶落季
    2020-12-05 13:57

    I'd strongly recommend using PHP:

    <?php include "header.html"; ?>

    However, if that is not an option, you can use Server Side Includes:

    File in the same dir:

    <!--#include file="header.html"-->

    File in a different dir:

    <!--#include virtual="/header.html"-->

    You'll need a Linux/Apache (not Windows) server for this to work. You'll also need to use the .shtml file extension.

    Alternatively, given that you want to keep .html extensions, you can make Apache "think" that all .html files are actually .php:

    Create a .htaccess file at the root of your website and add this line:

    AddType application/x-httpd-php .html .htm

    If your are running PHP as CGI (probably not the case), you should write instead:

    AddHandler application/x-httpd-php .html .htm

    (Taken from this answer)

    0 讨论(0)
  • 暗喜
    2020-12-05 14:02

    Simply use jQuery .load(). It is very easy to use. Here's an example

    navbar.html

    <div>This is the navigation bar</div>

    index.html

    <!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the homepage.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

    about.html

    <!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the about page.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>
    0 讨论(0)
  • 终归单人心
    2020-12-05 14:04

    I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:

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

    Here's my js file:

    document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

    If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:

         ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

    Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.

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