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.
Related
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";%>
My site uses both PHP and the JS AJAX so I'm fairly familiar with them both, and I don't want a solution that includes them. I have this page structure where all my users stay on just one landing php page, which then fetches the right content depending on the URL's p variable.
http://www.example.com/?p=about
http://www.example.com/?p=aMap-anothermap-evenAnothermap-lastelyTheFile
This page structure works great for me except that I don't know the right way to make a link that just removes the whole ?p=home. Because I want my home/start page to be variable free. I want it to be
http://www.example.com/
rather than
http://www.example.com/?p=home
Now I could just make the link
http://www.example.com/?
And then just remove the ? with the JS pushState(), but that would look pretty silly and would only work for JS users.
Let's say i would want to the do the above example with just the ? then I could create a link like this.
Link
<script src="SomeCoolPushStateScript"></script>
And I know from experience that this doesn't even work:
Link
So here comes the question: How do I remove the ?variable=something part of an URL when using an HTML href?
The path ./ should do the trick.
Link
If you want to preserve the main script name, like index.php, you will have to include that name.
Link
Alternately, you could dynamically generate domain-relative or absolute URL's with PHP.
You don't need to use querystrings.
Link
would go to example.com's root.
I don't recommend using "./". This would do what you want if the user is on a page that is in the root directory of your website (e.g. http://www.example.com/page.html). However, this would not work if they were on a page in a subdirectory. E.g. if the user's on http://www.example.com/hello/page.html, it would just link to http://www.example.com/hello/.
Using "/" makes sure the user goes to the root of your website.
Below is an example of what I'm trying to achieve in means of HTML code. I quickly wrote this up to give an example.
<body>
<div id="directory_container">
<a class="directory" href="/home">Home </a>/
<a class="directory" href="/home/marketplace">Marketplace </a>/
<a class="directory" href="/home/marketplace/major_products">Major Products</a>
</div>
</body>
A good example is a file directory let's say you're in the C:/ Drive and then navigate your way to the following directory.
C:\Program Files\Java\jre7\bin
As you can the see the computer understands where you are currently and the previous file url's you had to visit in order to get to this directory. I have the ability to click on any of those 5 locations and instantly relocate to that directory.
This is what I would like on my website, but I feel that manually doing this with the above example can prove tedious and unmanageable if the website is to grow and really increase with 500+ pages and that's a minor value. Which is why I'm asking if there is some automated way to provide this feature so I won't have to go through this if for some reason the URL's on the website change or the path files change etc.. I'm starting to believe this doesn't readily exist, but I could be wrong and is why I'm asking this.
I'm willing to do PHP, but would prefer only HTML/CSS which I'm going to assume is impossible since you would need the information from the server regardless. I also would like to stay away from JavaScript / Plugins.
I hope I've worded this better if there are any other concerns on what I'm requesting I can supply more information and possibly examples. A good example is GitHub and how you have an online navigation of your file storage. I basically want the same for a website only instead of it working exactly how the windows folders work. I want it to be more like each URL is linked to a given Name and I can perform a navigation based off that if possible.
Here's are much better examples of a website that uses the idea I'm wanting. So as you can see I'm looking at a better means of making this work instead of manually doing it all.
http://services.runescape.com/m=rswiki/en/Medium_Quests
https://github.com/git/git/tree/master/git_remote_helpers/git
You'll see that they both supply these navigation menus I'll try finding more if my question still isn't understandable.
If I understand you correctly you'd like to add a menu to all your pages and would like to easily be able to change this menu without updating 500+ files.
You can achieve this by using a PHP include. First create a file in your root directory and name it menu.html (you can use the PHP extension as well if you like) all the other files should be named like: index.php (PHP extension since we'll be using PHP in the other files)
In the menu.html file just build your menu like you want and in all the other files you should include the menu like this:
<?php include('/menu.html'); ?>
This will get the menu file and output it in the document where you place that tiny piece of code.
Tip: Most websites don't only have a recurring menu on each page but rather a recurring header and footer, maybe you could make files for those rather than for the menu. :)
Good luck! If you have any questions, feel free to ask.
Edit
What you are looking for are "Breadcrumb tails" so the user can easily go back to the previous directory. Unfortunately there isn't any HTML/CSS way to do this automatically for all your pages. With JavaScript and PHP however there are many ways to do this, google for "Automatic Breadcrumbs PHP" or "Automatic Breadcrumbs JavaScript".
This little script will give you a head start:
<?php
$page = $_SERVER['PHP_SELF'];
$currentpage = ucwords(str_replace("-"," ",(basename($page,".php"))));
$currentdir = ucwords(basename(dirname($page)));
$topdir = basename(dirname(dirname($page)));
?>
<div id=nav">
<ul><li>Bandersnatch Cutlery
<ul><li><?php echo ucwords($topdir); ?>
<ul><li><?php echo $currentdir; ?>
<ul><li><?php echo $currentpage; ?></li>
</ul>
</li></ul>
</li></ul>
</li></ul>
</div>
Source: http://demosthenes.info/blog/220/Breadcrumb-navigation-with-PHP (Edited the indents)
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.
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.