Responsive Side Toggle Menu in some part of a window only.

**zlisiekci** · 12-17-2017, 01:59 PM

1) Script Title: Responsive Side Toggle Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...togglemenu.htm

3) Describe problem:

Hi, my webpage consists of three parts: head, main and footer, positioned with table, tr td head, tr td main and tr td footer /table .
I'd like the Responsive Side Toggle Menu to appear only in the mittle part "main" and to shift to the right only this middle part of the window.
How could I acomplish this. I guess one has to change the $body parameter:

$body = $('body'),

somehow, or to set the proper position in

$body.css({position: 'absolute'})

in the sidetogglemenu.js script. Could somebody help me, please ?

**molendijk** · 12-18-2017, 10:52 PM

I don't suppose you want something like this?

**zlisiekci** · 12-18-2017, 11:10 PM

No, I mainly want the left side menu won't overlap over my header picture

**Deadweight** · 12-24-2017, 11:02 PM

Do you have a link to your website?
I am assuming you want something like this: Example?

**molendijk** · 12-26-2017, 12:40 AM

This seems to do what you want:

Code:

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
    font-family: "aria"; font-size: 25px
}
</style>
<title>&nbsp;</title>
</head>
<body>

<div style="position: fixed; top:1px; right: 3px; font-size:30px;cursor:pointer; z-index: 100; font-family: arial; background: black; color: white; padding: 5px" onclick="toggleNav()">&#x02261; Menu</div>

<table style="position: absolute; left:0; top:0; width: 100vw; max-width: 100%; overflow: hidden">
<tr>
<td style="height: 20vh; vertical-align: top; background: red; position: relative; width: 100%">header</td>
</tr>
<tr>
<td style="height: 70vh; background: white; vertical-align: top; ">

<div id="sidenav" style="top: 20vh; height: calc(100% - 10vh); width: 0; position: fixed; z-index: 1; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; margin-top: 5px; color: white">

<div style="padding-left: 20px; padding-top: 30px; line-height: 30px">  
  <a href="#" style="color: white">About</a><br>
  <a href="#" style="color: white">Services</a><br>
  <a href="#" style="color: white">Clients</a><br>
  <a href="#" style="color: white">Contact</a>
</div>

</div>

<div id="content" style="transition: margin-left .5s; padding: 16px; ">
<h2>Content</h2>
<p>Click on the menu button above to open the side navigation menu, and push this content to the right.<br>Click on the button again to close the menu.</p>

<p>
 Lorem ipsum dolor sit amet, vivamus pellentesque tempus non id, veritatis elit. Tellus ut, nec scelerisque venenatis ut, eu leo nibh quis consectetuer lacinia. Odio nibh cras turpis facilisis. Sociis laoreet consequat vivamus sit id, egestas quia ligula laoreet tincidunt mattis dui, ac morbi dignissim. Amet nullam suspendisse pede turpis ipsum, wisi sagittis dapibus, vulputate exercitationem tristique.<br><br>

Dignissim et lectus eget faucibus, erat mauris proident, praesent pretium sem a pellentesque, aliquam eleifend commodo sapien tellus amet ac, eu wisi a congue phasellus. Venenatis id a ante vestibulum. Fusce et lacinia vestibulum pede lobortis rutrum. Magna ut nullam, aliquam dis orci semper a sit pede, aenean pharetra, pretium nunc tristique gravida est. Donec praesent. Commodo maecenas minima eu nunc eu nullam, donec quam porta leo consequat accumsan ullamcorper, nostrud turpis torquent, lacus vivamus nam mollis, mauris vestibulum parturient. Sit pulvinar, odit diam quis, leo consectetuer facere amet justo mattis eu, vitae in ipsum voluptatem id ut, imperdiet enim amet elit purus varius nibh.
</p>

<p>
 Lorem ipsum dolor sit amet, vivamus pellentesque tempus non id, veritatis elit. Tellus ut, nec scelerisque venenatis ut, eu leo nibh quis consectetuer lacinia. Odio nibh cras turpis facilisis. Sociis laoreet consequat vivamus sit id, egestas quia ligula laoreet tincidunt mattis dui, ac morbi dignissim. Amet nullam suspendisse pede turpis ipsum, wisi sagittis dapibus, vulputate exercitationem tristique.<br><br>

Dignissim et lectus eget faucibus, erat mauris proident, praesent pretium sem a pellentesque, aliquam eleifend commodo sapien tellus amet ac, eu wisi a congue phasellus. Venenatis id a ante vestibulum. Fusce et lacinia vestibulum pede lobortis rutrum. Magna ut nullam, aliquam dis orci semper a sit pede, aenean pharetra, pretium nunc tristique gravida est. Donec praesent. Commodo maecenas minima eu nunc eu nullam, donec quam porta leo consequat accumsan ullamcorper, nostrud turpis torquent, lacus vivamus nam mollis, mauris vestibulum parturient. Sit pulvinar, odit diam quis, leo consectetuer facere amet justo mattis eu, vitae in ipsum voluptatem id ut, imperdiet enim amet elit purus varius nibh.
</p>
  
</div>
</td>
</tr>
<tr>
<td style="height: 10vh; vertical-align: top; background: navy; color: white">footer</td>
</tr>
</table>


<script>
function toggleNav() {
if(window.innerWidth >450)
{
document.getElementById("sidenav").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}

if(window.innerWidth <=450)
{
document.getElementById("sidenav").style.width = "100%";
document.getElementById("content").style.marginLeft = "100%";
}

if(document.getElementById("sidenav").clientWidth > 0)
{
document.getElementById("sidenav").style.width = 0;
document.getElementById("content").style.marginLeft = 0;
}

}

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

**zlisiekci** · 12-27-2017, 11:42 AM

Hi Deadweight, hi molendijk, thank you for the answere. Both examples are exactly what I need.
For the first one with on soloiestnetwork.000webhostapp.com : Where is the exact full code ?
And what about licence, is it free ? Could you post it to me by email if it's free ?

The second question is: I'd need a lot of submenus, consequentliy they must by expandable.
So I think an expandable menu from dynamicdrive, something like Flex Level Drop Down Menu
which is stick into a Deadweight or into a molendijk solution could work well here.
What do you think ?

Ideally there could be something which remains expanded or not in the state,
which the user has left it when he visited the website some time ago. I mean expanded submenus,
not the state of a whole menu, which shifts in from the left.

**zlisiekci** · 12-27-2017, 11:58 AM

I think molendijk's solution shows better a fundamental code, how it works without
any further complexity.
So now I need only expandable submenus, which fit into it.
I like these trees with + and - which expand down not to the right after clicking.
I'd avoid this lot of sub-, submenus to cover the main part.
Could you suggest one, please ?

**molendijk** · 12-27-2017, 08:43 PM

Try this:

Code:

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>&nbsp;</title>

<style>
body {font-family: "arial"; font-size: 20px; overflow: auto; -webkit-overflow-scrolling: touch}

#the_menu {
position: fixed; top:1px; right: 2px; font-size:30px;cursor:pointer; z-index: 901; font-family: arial; background: black; color: white; padding-left: 15px; padding-right: 15px
}

.accordion {
display: inline; color: white; cursor: pointer; width: 100%; text-align: left; font-size: 25px; transition: 0.4s;
}

.active, .accordion:hover {background-color: silver;
}

.panel {
padding: 0 18px;
background-color: black;
color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

table {position: absolute; left:0; top:-2px; height: calc(100vh + 0px); width: 100vw; max-width: 100%; overflow: hidden;}
td {vertical-align: top; width: 100%}

#header {background: red; color: white; padding: 20px}

#footer {background: navy; color: white; padding: 20px}

#sidenav {position: fixed; z-index: 900; left: 0; width: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; margin-top: 0px; color: white;}

#sidenav_content {padding-left: 20px; padding-top: 30px; line-height: 40px; width: 100%; position: relative; }

.plus_minus {position: absolute; display: inline-block; font-family: arial; font-size: 25px; font-weight: bold; left: calc(90% - 20px); vertical-align: middle; }

#content {transition: margin-left 0.5s;  transition: margin-left 0.5s; padding: 20px; }
</style>

</head>

<body >

<div id="the_menu" onclick="toggleNav()">&#x02261; Menu</div>

<table>
<tr>
<td id="header">header<br>header<br>header</td>
</tr>

<tr>
<td>

<div id="sidenav" >

<div id="sidenav_content" >  

<div style="position: absolute; top: 0; left: 0; color: white; cursor: pointer; padding: 5px; font-weight: bold; font-size: 30px" onclick="document.getElementById('sidenav').style.width = 0; document.getElementById('content').style.marginLeft = 0">X</div>

<br><div class="accordion" >About <div class="plus_minus" >+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: white">Me</a><br>
<a href="javascript: void(0)" style="color: white">My wife</a><br>
<a href="javascript: void(0)" style="color: white">My music</a><br>
</div>

<div ><a href="javascript: void(0)" style="color: white; font-size: 25px; text-decoration: none">Clients</a></div>

<div class="accordion" > Services <div class="plus_minus">+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: white">Repairing you</a><br>
<a href="javascript: void(0)" style="color: white">Repairing your wife</a><br>
<a href="javascript: void(0)" style="color: white">Repairing your music</a><br>
</div>

<div ><a href="javascript: void(0)" style="color: white; font-size: 25px; text-decoration: none">Contact</a></div>


</div>

</div>

</td>

</tr>

<tr>

<td >

<div id="content" >
<h2>Content</h2>
<p>Click on the menu button above to open the side navigation menu, and push this content to the right.<br>Click on the button again to close the menu.</p>

<p>
 Lorem ipsum dolor sit amet, vivamus pellentesque tempus non id, veritatis elit. Tellus ut, nec scelerisque venenatis ut, eu leo nibh quis consectetuer lacinia. Odio nibh cras turpis facilisis. Sociis laoreet consequat vivamus sit id, egestas quia ligula laoreet tincidunt mattis dui, ac morbi dignissim. Amet nullam suspendisse pede turpis ipsum, wisi sagittis dapibus, vulputate exercitationem tristique.<br><br>

Dignissim et lectus eget faucibus, erat mauris proident, praesent pretium sem a pellentesque, aliquam eleifend commodo sapien tellus amet ac, eu wisi a congue phasellus. Venenatis id a ante vestibulum. Fusce et lacinia vestibulum pede lobortis rutrum. Magna ut nullam, aliquam dis orci semper a sit pede, aenean pharetra, pretium nunc tristique gravida est. Donec praesent. Commodo maecenas minima eu nunc eu nullam, donec quam porta leo consequat accumsan ullamcorper, nostrud turpis torquent, lacus vivamus nam mollis, mauris vestibulum parturient. Sit pulvinar, odit diam quis, leo consectetuer facere amet justo mattis eu, vitae in ipsum voluptatem id ut, imperdiet enim amet elit purus varius nibh.
</p>

<p>
 Lorem ipsum dolor sit amet, vivamus pellentesque tempus non id, veritatis elit. Tellus ut, nec scelerisque venenatis ut, eu leo nibh quis consectetuer lacinia. Odio nibh cras turpis facilisis. Sociis laoreet consequat vivamus sit id, egestas quia ligula laoreet tincidunt mattis dui, ac morbi dignissim. Amet nullam suspendisse pede turpis ipsum, wisi sagittis dapibus, vulputate exercitationem tristique.<br><br>

Dignissim et lectus eget faucibus, erat mauris proident, praesent pretium sem a pellentesque, aliquam eleifend commodo sapien tellus amet ac, eu wisi a congue phasellus. Venenatis id a ante vestibulum. Fusce et lacinia vestibulum pede lobortis rutrum. Magna ut nullam, aliquam dis orci semper a sit pede, aenean pharetra, pretium nunc tristique gravida est. Donec praesent. Commodo maecenas minima eu nunc eu nullam, donec quam porta leo consequat accumsan ullamcorper, nostrud turpis torquent, lacus vivamus nam mollis, mauris vestibulum parturient. Sit pulvinar, odit diam quis, leo consectetuer facere amet justo mattis eu, vitae in ipsum voluptatem id ut, imperdiet enim amet elit purus varius nibh.
</p>
  
</div>

</td>

</tr>

<tr>
<td id="footer">footer<br>footer<br>footer</td>
</tr>

</table>

<script>
function toggleNav() {
document.getElementById('sidenav').style.top=document.getElementById('header').clientHeight-0+'px';
document.getElementById('sidenav').style.height=window.innerHeight-document.getElementById('header').clientHeight+'px'
if(window.innerWidth >450)
{
document.getElementById("sidenav").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}

if(window.innerWidth <=450)
{
document.getElementById("sidenav").style.width = "100%";
document.getElementById("content").style.marginLeft = "100%";
}

if(document.getElementById("sidenav").clientWidth > 0)
{
document.getElementById("sidenav").style.width = 0;
document.getElementById("content").style.marginLeft = 0;
}

}

</script>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){

panel.style.maxHeight = null;
this.childNodes[1].innerHTML='+';
} else 
{this.childNodes[1].innerHTML='-';
panel.style.maxHeight = panel.scrollHeight + "px";
} 
});
}
</script>
     
</body>

</html>

**zlisiekci** · 12-27-2017, 10:09 PM

Very nice molendijk. I am very thankfull. Now I hope to study your code and to learn something.
I think this will be the final solution for me - at least it looks like the one.
Once more - thank you very much.

**zlisiekci** · 12-29-2017, 01:13 PM

Hi Molendijk, could you take a look on the result constructed on you code ?
This can be seen at http://dekretowiec.pl/t7.php . I hope it'll be much better then this http://dekretowiec.pl very, very complicated construction.
Yet still four questions:

1. How could I put the content in the main tab depending on the menu point chosen ?
2. What is wrong with sub-submenu ? Just have a loot at Media -> Filmy
3. How could I put the footer as a part of a main tab, so that it won't be overlaped by the menu when it expands ?
4. The gray area of expanded navigation reaches too high or not depending on the browser used. What is the proper solution ?

I'll pass a my code by email to you.
Thank you in advance,
Zbyszek

ps. Unfortunately you do not receive private messages, as I see.