• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

High-ho it's another website rebuild. First, a question regarding sidebars

Participant ,
Mar 03, 2024 Mar 03, 2024

Copy link to clipboard

Copied

Okay, my site has developed a serious glitch which seems to be related to my using way too many dropdown menus. Or at any rate that's where things started glitching first. I knew that the site was a stop-gap when I uploaded it, so I'm not too surprised to be back at square #1 again. I'm not a web developer and don't especially enjoy it, but I've had the site for 20 years, and don't feel like giving it up. However, at present it's next to unusable.

 

It's a largish site with something on the order of a couple of hundred pages. So it needs a lot of navigation assistance. It is split up into a number of different collections and sub-collections, but a couple of those contain up to something like 80+ pages, and thats a lot of links.  

 

The current site uses dropdowns from a fixed-position header. But that doesn't seem to be working out at all. It wasn't *quite* as bad before I split the menus up into many more dropdowns to shorten the menus, keeping fully visible on a laptop screen. But it was already glitching.

 

The previous iteration of the site used a classic left sidebar with fly-out menus. That site was built in CS6 which included Spry assets and it worked very well for most of a decade. Couldn't handle small screens, because the fly-outs extended beyond what the screen would show, and they weren't exactly scrollable.

 

I'd really prefer not to have to build a permanent sidebar, since that takes up additional screen real estate. I have been browsing the W3 Schools site, and have seen a number of things that might be helpful, if they worked. Unfortunately, attempting to insert their W3 proprietary code into a test template hasn't been going well.

 

One example, which looked promising was a sidebar which could be invoked by clicking on a button, and which went away by clicking a 'close' button on the sidebar. I was not able to get it to work in my Dreamweaver CC2021 test site. This was one of the propritary W3.css examples. 

 

So. Does plain vanila .css, such as I know is used in a Dreamweaver site, do anything like that? Which is to say, invoke a panel, overlaying part of a page containing navigation buttons, and will go away by clicking a 'close' command?

 

It wouldn't necessarily have to be a sidebar. It could come in from any direction that's visible onscreen. But it shouldn't cover the whole page. At least part of the basic page should be visible, so it's obvious that we've not just moved to a different page. 

 

So, can anyone point me at some possibilities regarding sidebars? I'll be posting some other questions about some other navigation methods. But having been bitten by dropdown menus, I'm not especially eager to try another attempt at using those. Or, not unless they could be opened with a click, and *stay* open until clicked closed, so one could scroll down to see the whole thing. I do know that W3.css has some code for doing those. But, like I say, I'm not having a lt of luck in incorporating their code into my base pages.

 

Views

454

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 16, 2024 Mar 16, 2024

Copy link to clipboard

Copied

Joyce, after a fortnight of fart-arsing around, Why not try the 6 minute solution as shown in the video.

 

OK. I did use a different IDE, but exactky the same can be achieved using Dreamweaver. Copy the code below and paste it in a new HTML document.

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Offcanvas Navigation</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
    <div class="container">
        <header class="">
            <div class="container">
                <div class="row">
                    <div class="col ps-lg-0">
                        <nav class="navbar navbar-expand-lg">
                            <a class="navbar-brand" href="#">Offcanvas Navigation</a>
                            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavigation" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Offcanvas Navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <div class="row">
            <div class="col">
                <div class="offcanvas-start offcanvas-lg" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1" scroll="true">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title">Offcanvas title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="row">
                            <div class="col">
                                <nav class="navbar">
                                    <div class="navbar-nav">
                                        <a class="nav-item nav-link active" href="#">Home</a>
                                        <a class="nav-item nav-link" href="#">About</a>
                                        <a class="nav-item nav-link" href="#">Contact</a>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-9">
                <main>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <h1>Welcome to My Company</h1>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, officia? Tempore, expedita facilis omnis doloribus ad, quasi culpa consequatur iure voluptates optio labore veritatis. Commodi cumque debitis nemo culpa inventore.</p>
                                <p>Quidem atque facilis facere quas? Tempora temporibus molestias nam provident consequuntur aliquam ex expedita, et distinctio maxime vero doloremque voluptas facere totam ea pariatur, eos reprehenderit a dignissimos vitae. Laboriosam!</p>
                                <p>Velit, obcaecati commodi molestias officiis doloremque repellat quos. Animi sunt voluptatem est minima quis culpa optio deserunt aspernatur modi beatae porro officiis voluptate amet, vero nisi unde asperiores itaque iste.</p>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

 

Try this simple solution. For more, have a look here.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 17, 2024 Mar 17, 2024

Copy link to clipboard

Copied

Well, it turns out I was fleeing when none pursueth. I am close enough to completion that I uploaded a test site, inside my main site's domain folder, and from there, there was no problem loading the pages. Whatever the issue is, it seems to be limited to the live preview inside Dreamweaver. So it looks like it's a trouble that doesn't actually need shooting.

 

I intend to spend at least a couple of days checking things and trying to catch the obvious typos, and then clear out the borked site and re-upload the new one. 

 

Thank you everybody for helping me get this sorted!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 17, 2024 Mar 17, 2024

Copy link to clipboard

Copied

LATEST

You don't need Bootstrap to produce a simple off canvas menu  - that would only add complications given the OP is a rookie Bootstrapper and also add a load of unecessary bloat to boot.........the key here is always  test your code in a real browser environment.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 17, 2024 Mar 17, 2024

Copy link to clipboard

Copied

Problem appears to be limited to Live Preview inside of Dreamweaver.

Test site is up and can be found at:

www.redhen-publications.com/Test_new2024

I'm hoping to ge the links all checked and tested and make it public in a coule of days.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 17, 2024 Mar 17, 2024

Copy link to clipboard

Copied

The only reliable way to test is in a real browser, stop relying on some internal workflows that seem to have issues, according to a lot of posts in this forum. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 04, 2024 Mar 04, 2024

Copy link to clipboard

Copied

A couple hundred pages is too big to maintain without a CMS (content management system).

Going forward, you should use WordPress or similar dynamic site building platform with content stored in a database.

 

All WordPress Themes are mobile-friendly & responsive, so that's one less worry.  Just find a free or premium WP Theme you like.  You can always change themes later from the WP dashboard.

FREE Themes: https://wordpress.com/themes/free

PREMIUM Themes: https://themeforest.net/category/wordpress

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 04, 2024 Mar 04, 2024

Copy link to clipboard

Copied

Thank you for the suggestion. I know a lot of people use WordPress, but not everything I've heard is attractive. I will make a note of it, however.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines