31
Replies
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>
Right now, getting the internal lines back into the navIcon seems to be the most pressing issue. Have you any sufggestions as to what may be going on, there?
By @JoyceOdell
Without seeing your code I cant tell, no-one can. If you're prepared to upload your page and share a link I'm sure one of us can provide further suggestions.
So far, I'm finding this solution a bit fragile. I have my work page saved, and the (blank)icon does function, in that it makes the sidebar move in or go away on a click. But if I make any further change at all, even just the color of the sidebar text, and it stops functioning until I undo it. My last couple of attempts I've needed to just close the template and re-open it to get back to the beginning.
By @JoyceOdell
That's really nothing to do with the solution. You're most likely struggling to deploy it amongst your existing code and that unless you know what you are doing can bring some teething problems.
I tend to suspect that part of this may have to do with the import of the code that you posted. It produced a new .css page with no line breaks and no returns. Just a wall of text. Even though I copied the relevant parts of the code and put them into what appeared to be the proper areas of my base template's .css file as well as into the source code page with the main design elements included.
By @JoyceOdell
I have no idea what you are doing, it's a simple case of copying and pasting and that doesnt generate new css files. All this should be executed whilst in code view.
I suspect that I need to edit that weird .css sheet and reformat it into proper groups where you can find the different elements. It seems a bit premature to start flailing about things as they stand right now.
Which brings up a seperate question. Is there a limit to how many different .css sheets a page or template should be linked to? I know that it's not limited to one, since there are things like the fancybox plug-in which comes with its own .css style sheet, too. So attaching additional style sheets isn't necessesarily a problem in itself. But conflicts between style sheets may very well be.
By @JoyceOdell
No there is no limit to how many css files you can have attached to the page. Infact these days GEN Z says the more the merrier and in your case its probably wise to isolate the off-canvas navigation css which will avoid any potential copy and pasting issues.
Yes its true that when using sources acquired from ABC & D there could well be css conflicts. You just need to be aware and keep your eye on the ball.
2nd half of the question; is there a way to *detach* a .css style sheet from a page or a template? The Tools menu helps you attach a new one. But I don't see a command to allow you to get rid of one. Or does just saving one under a new name, and deleting the original get rid of the link?
By @JoyceOdell
Can you just not open the file in code view and comment out or delete the link to the css file? Its a long time since I last used the DW editor so I forget how it works in cases of template (.dwt) files if that is what you are using as I think it locks you out of non-editing regions, in some instances. Have a go at tackling it in code view to see if you have editing access to remove the link. If the link is not accessible in a child page of a template you can get rid of it from its parent .dwt file.
On the other hand, quite a bit of the mysterious other code in that .css file has to do with animations. So deleting it might disable the sidebar. But we'll see.
Q: is there any way to edit a post once posted, or do you just have to add corrections, like this?
By @JoyceOdell
No it won't disable the sidebar as the little bit of javascript at the end of the page and the css l provided is responsible for that working correctly.
The font awesome css is a linked file from a content delivery network CDN. You dont really need to open/view that file at all. The only item on the page that's linked to the font awesome css is the down angle alongside of the top level links in the sidebar. Removing the css will result in the down angles not appearing.
As for editing posts after they have been posted l believe you need to convince the forum management that you are a genuine nice person by posting frequently then l think you get to have certain privileges, like editing your posts. I'm not a moderator, they would have more accurate information about posting lm sure.
Well, the provisionary vertdict is that this is going to work. It turns out that the "breakable" behavior that I was concerned about only exists inside of Dreamweaver. The sidebare flashes but doesn't stay open, which makes editing its content a bit like flying blind. In a browser preview, however, everything works fine.
By @JoyceOdell
I imagined that might be the case. I forget how DW renders pages in design view, live view etc as I dont use it any longer - you should always test in a real browser to see the results.
A tip for you whilst editing: Change transform: translateX(-100%); to transform: translateX(0); That should make the div visible.
.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;
}
You should not really lose any font awesome icon if the library link is correctly attached to the page. If you can get that to work it has a hamburger icon you could use in place of those 3 lines in the navIcon <div>.
<i class="fa-solid fa-bars"></i>
However try this initially -
Add the class of 'bar' to the 3 divs inside the navIcon <div>:
<div class="navIcon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
Then add the below css to your stylesheet:
.navIcon .bar {
height: 1px;
margin: 3px 0;
background-color: #fff!important;
}
Obviously get rid of the original css which styles those bars:
.navIcon div {
height: 1px;
margin: 3px 0;
background-color: #fff;
}
See if that helps.
Thank you again for all of your help! I'll post again once the site goes up.
By @JoyceOdell
No problem. There is no reason why the sidebar should not be completely off canvas if you implement it correctly.
The main container which holds all the page content "floats" on a pattened bacground of the page 'body'. The sidebar when not deployed butts up against the edge of the container. Since the container is not at the edge of the screen there's a small gap where the sidebar's color is visible. Like I say, this is reminiscent of a design feature of the 2013 site, so I'm not complaining.
By @JoyceOdell
Right, the side bar should not really be inside the main container, it should sit outside of it in the <body> </body> container as its designed to work independently of everything else on the page by having a position of fixed.
If you want it to disappear completely and dont want to move the code then try amending the css to -120%:
.mainNav {
position: fixed;
height: 100%;
top: 0;
width: 30%;
padding: 100px 0;
background-color: #262626;
transform: translateX(-120%);
transition: transform 500ms ease-in-out;
overflow: auto;
}
AdChoices