Overlay Menu help required. (Creating Submenus) Options

[Midwinter]

Hi there.

New user, so thank you in advance for any assistance that you may be able to give me.

I am in the process of creating a website. I've used (copy/pasted) some code for an overlay menu - which works perfectly. However, I would like to add a submenu to some of the categories. I've checked on the W3C site and performed a loose search on how to do this, but I'm unable to find any hints/tips that tell you how to add submenus to an overlay - only a normal navigation menu.

The site is theadventurers.agency

and here's the code before I customised it.

...THE HTML...

CODE

<!-- Menu Overlay -->
<div id="taaNav" class="overlay">

    <!-- Close Button -->
    <a href="java script:void(0)" class="closebtn" onclick="closeNav() "><u>Close Menu</u></a>

    <!-- Overlay Menu Content -->
    <div class="overlay-content">
        <a href="index.html" class="glass">Home</a>
        <a href="https://theadventurers.agency/content/biographies/biographies.html" class="glass">Biographies</a>
        <a href="https://theadventurers.agency/content/reference/reference.html" class="glass" target="_blank">Reference Section</a>
        <a href="#" class="glass" target="_blank">The Journals</a>
        <a href="#" class="glass">Submissions</a>
        <a href="#" class="glass" target="_blank">The Midwinter Mapworks</a>
        <a href="#" class="glass" target="_blank">Forums</a>
        <a href="https://theadventurers.agency/shop/index.php" class="glass" target="_blank">Merchandising</a>
        <a href="https://theadventurers.agency/content/faqs/faqs.html" class="glass">FAQ's</a>
        <a href="#" class="glass">Subscribe & Donate</a>
        <a href="#" class="glass" target="_blank">Artist Galleries & Links</a>
        <a href="#" class="glass">Get In Touch</a>
    </div>

</div>

<!-- The Menu Button -->
<span onclick="openNav() "><h1><u>MENU</u></h1></span>
<br>

...AND THE CSS...

CODE

/* OVERLAY MENU STYLING */
/* -------------------- */

/* The Overlay */
.overlay {
    /* Overlay Height */
    height: 0%;
    /* Overlay Width */
    width: 100%;
    /* Overlay Position */
    position: fixed;
    /* Z Index Keeps Overlay On Top */
    z-index: 1;
    top: 0;
    left: 0;
    /* Overlay Fallback Color */
    background-color: rgb(0,0,0);
    /* Overlay Color With Transparency/Opacity */
    background-color: rgba(0,0,0, 0.9);
    /* Disables Horizontal Scroll (Original Hidden - Changed To Auto)*/
    overflow-y: auto;
    /* Transition Effect Delay */
    transition: 0.5s;
}
/* Overlay Content Positioning */
.overlay-content {
    position: relative;
    /* Position Content 25% From The Top Of The Screen */
    top: 25%;
    /* Menu Width 100% */
    width: 100%;
    /* Center The Text */
    text-align: center;
    /* Add A 30px Top Margin To Avoid Conflict With The Close
    Button On Smaller Screens */
    margin-top: 30px;
}
/* Overlay Navigation Links */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: cyan;
    /* Display Block Instead Of Inline */
    display: block;
    /* Transition Effect On Hover */
    transition: 0.3s;
}
/* Overlay Color Change On Hover */
.overlay a:hover, .overlay a:focus {
    color:purple
}
/* Position Close Button In Top Right Corner */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 30px;
}
/* When The Height Of The Screen Is Less Than 450px,
Change The Font Size Of The Links And Reposition The Close Button
So That They Don't Overlap */
@media screen and (max-height: 450px) {
    .overlay {overflow-y: auto;}
    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
}

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li a {
            display: block;
            width: 200px;
            background-color: #3a3b3c;
            text-align: center;
        }

/* BUTTON STYLING */
/* -------------- */

        .glass{
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    background-color: black;
    background-image: linear-gradient(#3a3b3c,black);

    text-decoration: none;
    color: cyan;
    font-size: 25px;
    font-family: "Fondamento-Regular", 'Times New Roman', Times, serif;
    font-weight: 100;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
}

.glass:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255,255,255,0.8)), (rgba(255,255,255,0.2));
}

.glass:hover{
    background: linear-gradient(rgb(74, 80, 167),rgb(44, 3, 110));
}
/* Horizontal Line With Rounded Border */
.rounded {
    border-top: 5px solid #d4af37;
    border-radius: 5px;
}

My knowledge of html and css was once "quite" good, but as with everything, without constant practice, one's memory wavers, so I've forgotten most of what I've ever learned, so please bear this in mind when assisting.

Once again, thank you in advance.

Best Wishes,

Chris.

[Midwinter]

Thank you again for the work that you've put into the above.

When I first saw the explanations above, I have to admit that I was a bit daunted by it, but after reading and re-reading it, it's beginning to make more and more sense.

I've started at the foundations and I'm working my way up from there, so I have a quick question about directories.

You've mentioned that you prefer to put all of your .html files into the root directory.

Does it matter how many are in there? I mean, is there a limit that shouldn't really be exceeded?

I'm likely to have many thousands of .html pages over the next few years and I'm just wondering if that amount is going to slow things down in the future, if they are all in one directory.

[Christian J]

Does it matter how many are in there? I mean, is there a limit that shouldn't really be exceeded?

I'm likely to have many thousands of .html pages over the next few years and I'm just wondering if that amount is going to slow things down in the future, if they are all in one directory.

I don't think it matters to the server, but thousands of pages in the same directory might be hard to overview for yourself, so for that reason alone you might use multiple directories. Here's an old but still good page on organizing a website: https://webtips.dan.info/subdir.html

You may also want to come up with a practical naming scheme for all the future HTML files. If you'd use obscure filenames (say for brevity) it may become very hard to find a particular page in the directory listing once the number of pages grows. It's also best to avoid spaces in filenames, at least Google seems to prefer words in a URL to be separated by hyphens: https://developers.google.com/search/docs/c...g/url-structure

If the pages share any common content (like headers, footers or nav menus) it will soon become very tedious to edit all of them if necessary. For that reason it might be a good idea to use some kind of server-side includes (like Jason mentioned above), where you'd use a single, global file for all the pages' headers, footers and menus, respectively; the content of these global files are then inserted seamlessly into the web page on the server (by e.g. PHP's include expression) before being sent to the site visitor's browser. Whenever you need to make changes in the header, footer or menu you then only need to edit a single file, not thousands (a bit similar to using an external CSS or javascript file, except that it's done on the server, not by the browser).

It's also possible (but much more advanced) to store each page's unique content in a database; and generate each web page using a single HTML template, which is populated by content pulled from the database. That's how this forum works; all forum post content etc is stored in the database, and the same web page (index.php) is filled with a different forum post/thread depending on the query string parameters (the part after the "?" in the URL).