Advice needed for a multiple page (non-frame) menu Options

[scooble]

Many years ago, in the old days of HTML 4.0, I would construct a menu with frames.

However, as is this tag is becoming obsolete, I would still like to construct a static menu that lives in the left column that links to lots of pages.
I have previously created a small 'single page' site using menu's.

However, this time, because I have so many pages to construct, I don't want it to be one single page with multiple sections as it will take way too long to load.
Neither do I want to replicate the same menu code on every one of the pages in my site.

Is it possible to have a content page that consists of just one main section only, and have the contents of that section 'loaded in' (previous content overwritten) when I click on one of the multiple links in the left hand column?

[Christian J]

Is it possible to have a content page that consists of just one main section only, and have the contents of that section 'loaded in' (previous content overwritten) when I click on one of the multiple links in the left hand column?

Yes, but you should change the page's TITLE and headings as well.

An easier approach is to include a global menu file on every content page, using a server-side language like PHP. See Example 2 here: https://www.w3schools.com/PHP/php_includes.asp (but in general, https://www.php.net/manual/en/index.php is a better reference about PHP).

[lovebug]

I did exactly this recently when I was making my home page

I have a single index.php file that loads the css, navigation menu and then the required page ie /?page=news using php $_GET['page'] although I must admit I never worked out how to change the page title

my website is here https://lovebug.ml and if you would like a copy of it for experimenting youre welcome, ive just zipped the lot which you can download here https://drive.google.com/file/d/1-pUN-crkNI...iew?usp=sharing

I hope it is of some use

----- edit -----

sorry just fixed the download link, all good now

This post has been edited by lovebug: Feb 1 2021, 11:29 AM

[Christian J]

I have a single index.php file that loads the css, navigation menu and then the required page ie /?page=news using php $_GET['page'] although I must admit I never worked out how to change the page title

That works too, but is a little more complicated.

You should absolutely use a proper title, in particular search engines give much weight to it, but it also helps the user when e.g. bookmarking a page. Use a PHP variable for the TITLE element in the index file, and then define different variable values for it in each external PHP content file.

[lovebug]

@Christian J thanks for that , i'll give it a try

[lovebug]

ok I couldnt get the variable $title to persist between page loads (im just a beginner) but I did manage to change the page title after index.php loads just before loading the page content by inserting some javascript !, theres probably a way to do this in php alone but I couldnt work it out so inserting some javascript did the job and it works

heres the section of the index.php where I added the change

CODE

        <!-- page content -->
        <?php

            switch($_GET['page'])
            {
                case 'test':
                    $page = 'test';
                    $title = 'Test';
                    break;
                    
                case 'servers':
                    $page = 'servers';
                    $title = 'Servers';
                    break;

                case 'projects':
                    $page = 'projects';
                    $title = 'Projects';
                    break;
                    
                case 'project-z80-disassembler':
                    $page = 'project-z80-disassembler';
                    $title = 'Project Z80 Disassembler';
                    break;
                    
                case 'project-ladybug':
                    $page = 'project-ladybug';
                    $title = 'Project Lady Bug';
                    break;
                    
                case 'websites':
                    $page = 'websites';
                    $title = 'Websites';
                    break;
                    
                case '400':
                    $page = '400';
                    $title = '400';
                    break;
                    
                case '401':
                    $page = '401';
                    $title = '401';
                    break;
                    
                case '403':
                    $page = '403';
                    $title = '403';
                    break;
                    
                case '404':
                    $page = '404';
                    $title = '404';
                    break;
                    
                case '500':
                    $page = '500';
                    $title = '500';
                    break;
                    
                default:
                    $page = 'news';
                    $title = 'News';
            }

            // set the page title
            echo '<script>document.title = "LoveBug - ' . $title . '";</script>';

            // get the required page
            include $_SERVER['DOCUMENT_ROOT'] . '/' . $page . '.php';
            
        ?>
        <!-- end page content -->

This post has been edited by lovebug: Feb 1 2021, 02:30 PM

[lovebug]

I figured it out, by moving the page select and title code to before the actual html I was able to set the <title> tag before it was loaded and no javascript needed

heres the new complete index.php if ya need it

CODE

<?php
    // redirect browser to secure site http://lovebug.ml if trying to browse insecure site http://lovebug.epizy.com
    if(strpos($_SERVER['SERVER_NAME'], 'lovebug.epizy.com') !== false)
    {
        header('Location: https://lovebug.ml/', true, 301);
        exit();
    }
?>

<?php
    // check for valid pages and select page and title
    switch($_GET['page'])
    {
        case 'test':
            $page = 'test';
            $title = 'Test';
            break;
            
        case 'servers':
            $page = 'servers';
            $title = 'Servers';
            break;

        case 'projects':
            $page = 'projects';
            $title = 'Projects';
            break;
            
        case 'project-z80-disassembler':
            $page = 'project-z80-disassembler';
            $title = 'Project Z80 Disassembler';
            break;
            
        case 'project-ladybug':
            $page = 'project-ladybug';
            $title = 'Project Lady Bug';
            break;
            
        case 'websites':
            $page = 'websites';
            $title = 'Websites';
            break;
            
        case '400':
            $page = '400';
            $title = '400';
            break;
            
        case '401':
            $page = '401';
            $title = '401';
            break;
            
        case '403':
            $page = '403';
            $title = '403';
            break;
            
        case '404':
            $page = '404';
            $title = '404';
            break;
            
        case '500':
            $page = '500';
            $title = '500';
            break;
            
        default:
            $page = 'news';
            $title = 'News';
    }

?>
    
<!DOCTYPE html>

<html lang='en'>

    <head>

        <meta charset='UTF-8'>
        <title>LoveBug - <?php echo $title; ?></title>
        <link rel='icon' type='image/png' href='/images/favicon-mushroom-48.png' />
        <link rel='stylesheet' href='/lovebug.css' />

    </head>

    <body>

        <!-- navigation menu -->
        <?php include $_SERVER['DOCUMENT_ROOT'] . '/navigation.php'; ?>
        <!-- end navigation menu -->

        <!-- page content -->
        <!-- include the required page -->
        <?php include $_SERVER['DOCUMENT_ROOT'] . '/' . $page . '.php'; ?>
        <!-- end page content -->

    </body>

</html>

This post has been edited by lovebug: Feb 1 2021, 03:24 PM

[Christian J]

The PHP version looks good (if you'd create TITLE text with javascript, search engines may view it as manipulation).

It's also good that you're using a whitelist of allowed pages (otherwise malicious users might be able to inject arbitrary code into the web page through a malformed URL).

[scooble]

thanks for all of the replies, its certainly food for thought.
Many thanks Lovebug for submitting your code, however, when I type your URL into my address bar, my malware tool tells me it looks a bit dodgy.
I suspect that the code is Ok, and I could replicate the same mechanism myself, but I don't want to put off visitors if they too get warnings from their malware tools.
It seems to me that the best way forward is to somehow dynamically inject a menu into every web page and so far, php seems to be the most used option.
I must admit I know practically nothing about php, but I do know a bit of javascript (just enough for basic DOM manipulation).
Does anyone have any good links to tutorials that would show me how to dynamically inject a menu into my web pages with php or javascript?