I have a web site that gets a new page every couple weeks, and that means I need to update the menu to have the new page in every single one. I'm wondering if there is a way to have an external text or .htm file that I can basically insert into the web page. That way I can put the menu in the external file and call it wherever I want it. So I only have to edit one thing when I get a new page.
Thanks in advance.
Edit: This is a drop-down menu with ul and li tags with an external style sheet for them. So this needs to work for that too. Thanks
Have a single HTML page like so:
<html>
<head></head>
<body>
HTML OF LINKS HERE
</body>
</html>
Then save it as my_links.html and into the page you want to insert it... do the following. Copy and paste the whole page and it as FILENAME.PHP and then use this code:
<?php include("my_links.html"); ?>
Congratulations, you have just used PHP! Learn more about the including pages here.
This is very easy and common to do on sites that use a server-side language behind them (PHP, ASP.NET, etc.)
If you don't want to use a server side language, than an <iframe> is your only option.
If you want to use HTML, and only html (no server side programming or javascript), you can use Server Side Includes embedded into your html files. Your web server may need to be configured to accept them.
If you are using server side include and you had navigation in a separated file, yes you can just edit things separate.
You can also do this using jQuery.
$('#elementid').load('page.html');
http://api.jquery.com/load/
But this will not be SEO friendly.
Also if someone has scripts turned off in their browser, then this will not work.
Related
I am new to HTML/CSS and in this project intend to create a simple web page in such a way that each page links to three other HTML pages.
<div id="mySidenav" class="sidenav">
Home Page
about
Projects
Contact
</div>
My questions:
Is it possible to link to other pages other than the page itself via
programming (to write if page_name == link.html then exclude it from
the links)? e.g., I want to tell my HTML that if I am in the "about"
page, don't add the link to this page.
If that is possible, how I can fill the self-link button without using JS.
Yes, it possible. First, you have to know about PHP. Then get the current page url by $_SERVER['REQUEST_URI'].
IF the current page url is matched with your link like about.html then ignore the link for the same current page.
Otherwise, you can create a separate page with ignoring link. Like when you at about page ignore that link.
The short answer is no. HTML isn't a programming language and has no flow control or logic capabilities. You could achieve this via server-side rendering (express or php or whatever) or via static site generation (gatsby, etc.).
Otherwise you could (of course) modify the nav on each page accordingly, but I understand and agree that that's less than ideal.
This is a bit of a stretch, but you could link to homePage.html#homePage and use the CSS :target pseudo-selector to hide the current item or give it special css treatment, but this is sort of a brittle hack and it will break down if the fragment (#homePage, #projects, etc.) isn't present in the browser's url.
I have a web site of more than 20 pages, all using the same dropdown menu. Currently, each page contains redundant HTML code for the menu, so if I want to change one thing in a menu, I have to change it for all the pages. I am using plain html/css and some javascript for my site. Is there a way to have my dropdown menu all in one file and include the reference to that file for all 20 pages?
I tried using the <embed> element to include the menu, but it did not work out for me since I cannot adequately align it as it leaves a large empty area right below it to allow for dropdown options. Not sure what is the best way to handle that
As suggested by Quetin Veron in the comment, PHP include statements are the best way to deal with it.
However, in case you're not interested in writing backend code, you can do that using JavaScript by parsing a json or an ini file/text in your script and converting it into the required links on the menu.
[Do note that you'll still have to use JavaScript for that]
If you'd not even prefer to use JS (Not recommended), you can use an iframe as the navigation menu
When you do that, add <base target="_parent"> in the head section of your iframe.
And then, in all other pages, add <iframe src="menu.html"></iframe> and replace menu.html with the path to the menu.
I hope this helps. However, please note that this just is a workaround if you wish to use frontend technologies only.
Otherwise use <?php include "menu.php";?> for PHP or for Node with EJS, use <%include "menu.ejs";%>
I have a website that has menu on every page. But, When I try to add new link on the menu, I
had to add the link on every page individually. So, I used HTML and CSS like this so I just have to edit one thing, but it will just show up as "Home" with "a" tag on it instead of showing "Home" as hyperlink.
<!DOCTYPE html>
<html>
<head>
<style>
.menu:after{
content: "HomeGames";}
</style>
<title>Page</title>
</head>
<body bgcolor="#cccccc">
<center>
<div class="menu"></div>
<center>
</body>
</html>
create a page call
menu.php and put the menu, for example with your code
HomeGames;
then in your index.php
<?php
include('menu.php');
?>
You cannot do that using CSS because the style would have to alter the DOM. CSS is simply not designed and not legitimized to alter the DOM.
CSS content property: is it possible to insert HTML instead of Text?
What you probably should do is using a server-sided pre-processing language like PHP to go with templating.
Another solution would be using jQuery (javascript):
$('.menu').prepend('Home');
That is the wrong way to go about doing something like that. What you really need is to use a language that can make templating possible. I would recommend learning PHP, it makes stuff like that much easier. With PHP, you could have a file called menu.php, with the HTML markup for the menu inside the file, and then just type include "menu.php"; when you need it. PHP (and similar languages) can do so much more than that, you won't regret learning it.
Yikes, that is a really messy way to do it. You don't say weather you can or can't... but I really recommend using PHP for this. Create your menu in a PHP file, say 'menu.php' and include it like this
require_once("menu.php");
You will also have to change the file you put this in from .html to .php. As far as I know there is no performance issues with your method, and while you are solving your problem by putting the link in CSS, this sort of goes against everything CSS stands for. The content attribute is mainly for inserting certain characters to be styled differently.. like a custom bullet or something.
PHP is the best way to go about this, as other have mentioned. Javascript can accomplish this, but it wouldn't break gracefully. If the Javascript didn't work or was turned off, you would be left without navigation.
I thought I would just mention some other possibilities.
iframe:
<iframe src="/nav.html" seamless></iframe>
seamless isn't compatible with older browsers, but you can fix that with css.
SSI:
<!--#include virtual="/nav.html" -->
file would have to be saved as .shtml or the server configured to parse html for ssi
I'm not sure if I am using the proper term when I refer to "dynamically. *
I want to have a simple, one level, menu displayed on all 80 pages of my site. The menu items will change periodically - new items added, some removed, etc... What is the best way to create this menu so I don't have to update all 80 pages? FYI: I'm not too knowledgeable in all the scripting languages. Thank you.**
The simplest way is to use PHP.
Name all your files so they end in php instead of html, and make a file called menu.php.
Copy your menu into menu.php, then no your other pages where you want the menu, type:
<? include("menu.php"); ?>
and the menu will appear like magic!
I would also suggest SSI, but they are often disabled on shared hosting in my experience.
Create a master page if your working in any one of the "major" web frameworks. You put a lonely HTML tag up there so I'm not sure if this NEEDS to be purely HTML and nothing else.
So I have a website and I'm using a basic menu located at the top right corner of the screen. It's links are as follows:
| Home | Blog | Results | Pictures | Our Location |
Form time to time I need to add a new link to the menu or change where one of the links points to. This means that on every page that the menu exist I must manually change the link. Surely there is some way to have a master menu that is just put on every page.
Or am I dreaming?
Put the menu in a separate file and include it on the server side, either using a full-blown scripting language like PHP (one line) or using SSI.
There are various ways to do this. It depends what you have access to on the server. Possibly the simplest mechanism is server-side includes. You would just have a file that contains the menu and include it on every page.
You can also do this with every programming language in more or less elegant ways.
EDIT: The SSI is quite simple. You can just make a /header.html file, then do:
<!--#include virtual="/header.html" -->
in the appropriate place.
use the PHP include on all your pages
<?php include 'includes/menu.php'; ?>
and have a separate menu.php within a folder named 'includes'. you'll need to save all oyur pages as .php
you can make your footer as an include too
I think this is the easiest way of doing it without a server side language. Use a javascript library like W3Data. All you need to do is add the w3-include-html attribute to your div. Done!
If your menu is in a file called menu.html you'd do something like this.
<div w3-include-html="menu.html"></div>
Have a server side program determine what menus and locations of the links need to be there.
Then use ajax to periodically poll the server side script to get the contents of the menu at the current time.
It'd be easy to have it send an xml data back like:
<menu>
<link name="Home" href="destinationhome.html"/>
...
<link name="Pictures" href="....html"/>
</menu>
Then build your links from that data.
You can generate pages from templates before uploading them: See Template Toolkit.