Skip to main content
J
JoyceOdell
Inspiring
March 4, 2024
Question

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

  • March 4, 2024
  • 2 replies
  • 2170 views

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.

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 4, 2024

    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
      J
      JoyceOdellAuthor
      Inspiring
      March 4, 2024

      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.

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      March 4, 2024

      With Boostrap v 5.3, you can create a responsive sidebar.

       

      I have created a video using a different IDE to Dreamweaver.

       

       

       

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        J
        JoyceOdellAuthor
        Inspiring
        March 4, 2024

        Okay, this moves the discussion into one of my other potential inqueries (not posted yet). At present, the site is static. Not responsive at all. Dealing with bootstrap was just one too many when I needed to move the site into a version of the code that I would be able to edit if I needed to replace a computer. Otherwise I'd happily sstill be using CS6.

         

        Given that nothing in any of the templates that came with the program came close to looked anything like what I wanted the site to look like, I ended up taking the simplest of the page templates and stripping pretty much everything out, and starting over from a blank page. It's a hobby site, not commercial at all. It mainly consists of pages of essays,  or graphics to show off, or .pdfs to either display or download. It has no need for most of the commercially-oriented elements that the templates come loaded with.

         

        I am comfortable enough with working with the current version of the program to consider putting the responsiveness back. Dreamweaver does definitely support Bootstrap. But I'm not at all looking forward to it. (Still, it can't be worse than working in GoLive where everything on a page was in a table cel. Tables, inside of tables, inside of tables, ack!)

         

        So, back to the original question. I am to assume that there is no way that plain .css will enable me to create an openable and closable sidebar? (Thank you for the video. At the tiny size I wasn't really able to see what you were doing, but it did confirm that the procedure is doable.)

        O
        osgood_
        Legend
        March 4, 2024
        quote

         

        So, back to the original question. I am to assume that there is no way that plain .css will enable me to create an openable and closable sidebar?


        By @JoyceOdell

         

        Wrong - sort of. I expect it can be done with plain css but usually it's done with a bit of javascript too!

        Might not be exactly what you want but copy the code below and insert it into a new Dreamweaver document, view in a browser, click onto the burger icon then 'Link 4' - its scrollable, however many links you include:

         

         

        <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Off Canvas Sidebar Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
}
header {
display: flex;
background-color: #000;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
position: fixed;
width: 100%;
top: 0;
}
.siteName h2 {
margin: 0;
padding: 0;
color: #fff;
}
.navIcon {
display: flex;
flex-direction: column;
border: 1px solid #fff;
border-radius: 6px;
width: 40px;
padding: 5px 8px;
cursor: pointer;
}
.navIcon div {
height: 1px;
margin: 3px 0;
background-color: #fff;
}

.mainNav {
position: fixed;
height: 100%;
top: 0;
width: 30%;
padding: 100px 0;
background-color: #262626;
transform: translateX(-100%);
transition: transform 500ms ease-in-out;
overflow: auto;
}
.mainNav h3 {
font-size: 30px;
margin: 0 0 25px 100px;
padding: 0;
color: #fff;
}
.mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainNav li {
list-style: none;
margin: 15px 0;
padding: 0;
}
.mainNav.slideInOut {
transform: translateX(0)
}
.mainNav > ul {
background-color: #262626;
padding: 0 50px 0 100px;
}
.mainNav a {
text-decoration: none;
color: #fff;
font-size: 20px;
margin: 0;
padding: 0;
}
.mainNav a:hover {
color: #737373;
}
.topLevelLink {
display: flex;
justify-content: space-between;
}
.subLevelLinks {
margin: 0 0 0 20px!important;
padding: 0;
display: none;
}
.currentLink {
color: #e68a00!important;
}
.mainContent {
width: 90%;
margin: 100px auto 0 auto;
}
.fa-arrow-right {
color: #fff!important;
}
</style>
</head>
<body>

<header>
<div class="siteName"><h2>SomeSite</h2></div>
<div class="navIcon">
<div></div>
<div></div>
<div></div>
</div>
</header>

<nav class="mainNav">
<h3>Contents</h3>
<ul>
<li><a href="#" class="topLevelLink"><span>Link 1</span><i class="fa-solid fa-angle-down"></i></a>

<ul class="subLevelLinks">
<li><a href="#"> SubLink 1.1</a><li>
<li><a href="#"> SubLink 1.2</a><li>
<li><a href="#"> SubLink 1.3</a><li>
<li><a href="#"> SubLink 1.4</a><li>
<li><a href="#"> SubLink 1.5</a><li>
</ul>

</li>

<li><a href="#" class="topLevelLink"><span>Link 2</span><i class="fa-solid fa-angle-down"></i></a>

<ul class="subLevelLinks">
<li><a href="#"> SubLink 2.1</a><li>
<li><a href="#"> SubLink 2.2</a><li>
<li><a href="#"> SubLink 2.3</a><li>
<li><a href="#"> SubLink 2.4</a><li>
<li><a href="#"> SubLink 2.5</a><li>
</ul>

</li>
<li><a href="#" class="topLevelLink"><span>Link 3</span><i class="fa-solid fa-angle-down"></i></a>
<ul class="subLevelLinks">
<li><a href="#"> SubLink 3.1</a><li>
<li><a href="#"> SubLink 3.2</a><li>
<li><a href="#"> SubLink 3.3</a><li>
<li><a href="#"> SubLink 3.4</a><li>
<li><a href="#"> SubLink 3.5</a><li>
</ul>

</li>
<li><a href="#" class="topLevelLink"><span>Link 4</span><i class="fa-solid fa-angle-down"></i></a>

<ul class="subLevelLinks">
<li><a href="#"> SubLink 4.1</a><li>
<li><a href="#"> SubLink 4.2</a><li>
<li><a href="#"> SubLink 4.3</a><li>
<li><a href="#"> SubLink 4.4</a><li>
<li><a href="#"> SubLink 4.5</a><li>
<li><a href="#"> SubLink 4.6</a><li>
<li><a href="#"> SubLink 4.7</a><li>
<li><a href="#"> SubLink 4.8</a><li>
<li><a href="#"> SubLink 4.9</a><li>
<li><a href="#"> SubLink 4.10</a><li>
<li><a href="#"> SubLink 4.11</a><li>
<li><a href="#"> SubLink 4.12</a><li>
<li><a href="#"> SubLink 4.13</a><li>
<li><a href="#"> SubLink 4.14</a><li>
<li><a href="#"> SubLink 4.15</a><li>
<li><a href="#"> SubLink 4.16</a><li>
<li><a href="#"> SubLink 4.17</a><li>
<li><a href="#"> SubLink 4.18</a><li>
<li><a href="#"> SubLink 4.19</a><li>
<li><a href="#"> SubLink 4.20</a><li>
<li><a href="#"> SubLink 4.21</a><li>
<li><a href="#"> SubLink 4.22</a><li>
<li><a href="#"> SubLink 4.23</a><li>
<li><a href="#"> SubLink 4.24</a><li>
<li><a href="#"> SubLink 4.25</a><li>
</ul>

</li>
<li><a href="#" class="topLevelLink"><span>Link 5</span><i class="fa-solid fa-angle-down"></i></a>

<ul class="subLevelLinks">
<li><a href="#"> SubLink 5.1</a><li>
<li><a href="#"> SubLink 5.2</a><li>
<li><a href="#"> SubLink 5.3</a><li>
<li><a href="#"> SubLink 5.4</a><li>
<li><a href="#"> SubLink 5.5</a><li>
</ul>

</li>


<li><a href="#" class="topLevelLink"><span>Link 6</span><i class="fa-solid fa-angle-down"></i></a>

<ul class="subLevelLinks">
<li><a href="#"> SubLink 6.1</a><li>
<li><a href="#"> SubLink 6.2</a><li>
<li><a href="#"> SubLink 6.3</a><li>
<li><a href="#"> SubLink 6.4</a><li>
<li><a href="#"> SubLink 6.5</a><li>
</ul>

</li>


<li><a href="#" class="topLevelLink"><span>Link 7</span><i class="fa-solid fa-angle-down"></i></a>

<ul class="subLevelLinks">
<li><a href="#"> SubLink 7.1</a><li>
<li><a href="#"> SubLink 7.2</a><li>
<li><a href="#"> SubLink 7.3</a><li>
<li><a href="#"> SubLink 7.4</a><li>
<li><a href="#"> SubLink 7.5</a><li>
</ul>

</li>

</ul>

</nav>


<main class="mainContent">
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
</main>


<script>
const mainNav = document.querySelector('.mainNav');
const navIcon = document.querySelector('.navIcon');
navIcon.onclick = function() {
mainNav.classList.toggle('slideInOut')
}

let topLevelLink = document.querySelectorAll('.topLevelLink');

const subLevelLinks = document.querySelectorAll('.subLevelLinks');

topLevelLink.forEach(function(topLevelLink, index) {
topLevelLink.onclick = function() {
topLevelLink = document.querySelectorAll('.topLevelLink');
topLevelLink.forEach(function(topLevelLink) {
topLevelLink.classList.remove('currentLink')
})
this.classList.add('currentLink')

if(subLevelLinks[index]) {
subLevelLinks.forEach(function(subLevelLink) {
subLevelLink.style.display = "none";
})
subLevelLinks[index].style.display = "block";
}
}
})

</script>
</body>
</html>

         

         

         

         

         

         

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices