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

**Deadweight** · 12-29-2017, 03:21 PM

Sry for the delayed response, the code is actually completely free (i personally developed it). It uses a custom framework similar to JQuery. However, it seems like Molendijk is helping you, so I dont want to step on his toes.

**molendijk** · 12-29-2017, 11:54 PM

Hallo Zbyszek,
I removed errors from your code.
I'm not sure I understand all your questions. Here's what I can tell:
1. The accordion script I gave you can't have nested menus. I commented them. If you want them, we'll have to look for a more complex menu.
2. There's an easy way to make sure that the expanded menu does not overlap with the header AND the footer. These lines in the script do it:

Code:

document.getElementById('sidenav').style.top=document.getElementById('logo').clientHeight + 10 +'px';
document.getElementById('sidenav').style.height=window.innerHeight-document.getElementById('logo').clientHeight - document.getElementById('footer').clientHeight - 55 +'px'

You may have to slightly adapt the '+10' and / or the '-55'.
I put a demo on my server, see http://mesdomaines.nu/zbyszek/zbyszek.html.
Here's the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="language" content="pl">
<meta name="keywords" content="dekret warszawski, dekret Bieruta, grunty warszawskie, prawo, własność, własność prywatna, dekretem warszawskim, sprawy dekretowe, gruntów warszawskich, grunty warszawskie, odszkodowania, restytucja, rugi warszawskie, reprywatyzacja, dawni właściciele">
<meta name="description" content="Zrzeszenie Osob Dotkniętych Skutkami Dekretu Warszawskiego "Dekretowiec", dekret warszawski, dekret Bieruta, grunty warszawskie, prawo, własność, własność prywatna, dekretem warszawskim, sprawy dekretowe, gruntów warszawskich, grunty warszawskie, odszkodowania, restytucja, rugi warszawskie, reprywatyzacja, dawni właściciele">
<meta name="robots" content="nofollow">
<meta name="revisit-after" content="31 days">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Zrzeszenie Osob Dotkniętych Skutkami Dekretu Warszawskiego "Dekretowiec"</title>

<style type="text/css">

body {
font-family: "arial","DejaVu Sans","Free Sans","Lucida Sans",				 "Cursor","Nimbus Sans L","Helvetica",sans-serif;
font-size: 18px; font-weight: normal; overflow: auto; -webkit-overflow-scrolling: touch;
}

#menu_button {position: fixed; top:87px; left: 6px; font-size:18px; cursor:pointer; z-index: 901; font-family: arial; background: #F7F7ee; padding-left: 5px; padding-right: 5px
}

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

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

/* expandable submenus	*/
.panel {padding: 0 5px; background-image: url("http://dekretowiec.pl/images/tkanina002.jpg"); max-height: 0; overflow: hidden; font-size: 80%!important; transition: max-height 0.2s ease-out
}

table {cellspacing: 0px; cellpadding: 0px; border: 1px; position: absolute; left:0; top:-1px; height: calc(100vh + 0px);	width: 100%; max-width: 100%; overflow: hidden;
}

td {vertical-align: top; width: 100%
}

#logo {background-image: url("http://dekretowiec.pl/images/tkanina002.jpg"); width: 220px; height: 80px!important; padding: 15px
}

#title {background-image: url('http://dekretowiec.pl/images/panorama001_shadow.jpg'); padding: 20px; width: 100%
}

#footer {padding: 10px; vertical-align: middle; height: 70px; 
}

#sidenav {position: fixed; z-index: 900; left: 0; width: 0; background-color: #0222; background-image: url("http://dekretowiec.pl/images/tkanina001.jpg"); overflow-x: hidden; transition: 0.5s; margin-top: 38px; margin-bottom: 20px; border-right: 1px solid #ff573b; margin-right: 5px; box-shadow: 5px 0 5px rgba(174, 174, 174, .8)
}

#sidenav_content { padding-left: 20px; padding-top: 10px; padding-bottom: 10px;	line-height: 30px; width: 100%; position: relative; background-image: url("http://dekretowiec.pl/images/tkanina001.jpg"); border-right: 1px solid #ff573b; margin-right: 1px
}

.plus_minus {position: absolute; display: inline-block; font-family: arial; font-size: 18px; font-weight: bold; vertical-align: middle; 
}

#content {transition: margin-left 0.5s; transition: margin-left 0.5s; padding: 20px
}

</style>

</head>

<body style="background-image: url('http://dekretowiec.pl/images/tkanina002.jpg');" >



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

<table id="maintable" border="1" >
<tr >
<td id="logo" style="background-image: url('http://dekretowiec.pl/images/tkanina003.jpg'); height: 80px" >
<a href="index.php?lang=pl&amp;o=">
<img src="http://dekretowiec.pl/images/logo06.gif" width="150px" alt="">  </a>
</td>
<td style="background-image: url('http://dekretowiec.pl/images/tkanina003.jpg'); vertical-align: middle">
<h2 style="width: 100%; text-align: center">Zrzeszenie Osob Dotkniętych Skutkami Dekretu Warszawskiego "Dekretowiec"</h2>
</td>
</tr>
<tr> 
<td colspan="2" style="height: 35px; vertical-align: middle">
<div id="sidenav" >
<div id="sidenav_content" > 
<div>
<a href="javascript: void(0)" style="color: black; font-size: 18px; text-decoration: none">Strona główna</a>
</div>

<div class="accordion" > Nasza aktywność <div class="plus_minus" >+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Statut</a><br>
<a href="javascript: void(0)" style="color: black">Nasze tezy</a><br>
<a href="javascript: void(0)" style="color: black">Biała Księga Absurdów</a><br>
<a href="javascript: void(0)" style="color: black">Listy</a><br>
<a href="javascript: void(0)" style="color: black">Komunikaty 2006/2007 r</a><br>
<a href="javascript: void(0)" style="color: black">Ustawa i prace nad nią</a><br>
<a href="javascript: void(0)" style="color: black">Sukcesy</a><br>
<a href="javascript: void(0)" style="color: black">Konferencja prasowa <br> 26.11.2008</a><br>
<!--<div class="accordion" >Konferencja prasowa <br> 21.01.2013 <div class="plus_minus">+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Wystąpienie <br>Prezesa Grabińskiego you</a><br>
<a href="javascript: void(0)" style="color: black">zdjęcia</a><br>
</div>-->
<a href="javascript: void(0)" style="color: black">Nasze <br> Spotkania</a><br>
</div>

<div class="accordion" >Urząd Miasta <div class="plus_minus" >+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Biuro Spraw Dekretowych</a><br>
<a href="javascript: void(0)" style="color: black">Biała Księga<br> Reprywatyzacji</a><br>
<a href="javascript: void(0)" style="color: black">Decyzje Reprywatyzacyjne 2016</a><br>
<a href="javascript: void(0)" style="color: black">Decyzje Reprywatyzacyjne 2017</a><br>
<a href="javascript: void(0)" style="color: black">Odszkodowania</a><br>
<a href="javascript: void(0)" style="color: black">Zasiedzenia</a><br>
<a href="javascript: void(0)" style="color: black">Rada Warszawy</a><br>
</div>

<div class="accordion" > Prawo <div class="plus_minus">+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Konstytucja RP</a><br>
<a href="javascript: void(0)" style="color: black">Dekret Bieruta</a><br>
<a href="javascript: void(0)" style="color: black">Ustawa o gospodarce <br> nieruchomościami</a><br>
<a href="javascript: void(0)" style="color: black">Kodeks Postępowania <br> Administracyjnego</a><br>
<a href="javascript: void(0)" style="color: black">Ustawa o Ustroju M.st. <br> Warszawy</a><br>
<a href="javascript: void(0)" style="color: black">Ustawa o Samorządzie <br> Gminnym</a><br>
<a href="javascript: void(0)" style="color: black">inne przepisy</a><br>
<a href="javascript: void(0)" style="color: black">Rozporządzenia Wykonawcze<br>do Dekretu</a><br>
</div>

<div class="accordion" > Sądy <div class="plus_minus">+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Sąd Najwyższy</a><br>
<a href="javascript: void(0)" style="color: black">Naczelny Sąd <br> Administracyjny</a><br>
<a href="javascript: void(0)" style="color: black">Wojewódzkie Sądy <br> Administracyjne</a><br>
<a href="javascript: void(0)" style="color: black">Strasburg</a><br>
</div>

<div class="accordion" > Porady <div class="plus_minus">+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Ograniczenie prawne</a><br>
<a href="javascript: void(0)" style="color: black">Często zadawane pytania</a><br>
<a href="javascript: void(0)" style="color: black">Prawnicy</a><br>
<a href="javascript: void(0)" style="color: black">Twoje uprawnienia</a><br>
<a href="javascript: void(0)" style="color: black">Rekomendacje Wyborcze</a><br>
</div>

<div >
<a href="javascript: void(0)" style="color: black; font-size: 18px; text-decoration: none">Informacja Publiczna</a>
</div>

<div >
<a href="javascript: void(0)" style="color: black; font-size: 18px; text-decoration: none">Rugi Warszawskie</a>
</div>

<div class="accordion" > Media <div class="plus_minus">+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Wydarzenia Medialne</a><br>
<a href="javascript: void(0)" style="color: black">OBOP 2004</a><br>
<a href="javascript: void(0)" style="color: black">Mała sonda</a><br>
<a href="javascript: void(0)" style="color: black">Nowości</a><br>
<a href="javascript: void(0)" style="color: black">Z Internetu</a><br>
<!--<div class="accordion" > Filmy <div class="plus_minus">+</div></div>
<div class="panel" >
<a href="javascript: void(0)" style="color: black">Bellerowie 1</a><br>
<a href="javascript: void(0)" style="color: black">Bellerowie 2</a><br>
<a href="javascript: void(0)" style="color: black">Rugi Warszawskie 1</a><br>
<a href="javascript: void(0)" style="color: black">Rugi Warszawskie 2</a><br>
<a href="javascript: void(0)" style="color: black">Królikarnia</a><br>
</div>-->
</div>

<div >
<a href="javascript: void(0)" style="color: black; font-size: 18px; text-decoration: none">Inne Linki</a>
</div>

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

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

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

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

<div style="text-align: right"> languages </div>
</td> 
</tr>

<tr>
<td colspan="2" >
<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, <br><br>Dignissim et lectus eget faucibus,</p>
<p>Lorem ipsum dolor sit amet, vivamus<br><br>Dignissim et lectus eget faucibus, erat mauris proident</p>
</div>
</td>
</tr>

<tr>
<td id="footer" colspan="2" >
<div style="text-align: center; width: 100%">footer
<div style="font-size: 80%">
Copyright &copy; dekretowiec.pl, 2016 Właśc icielem domeny dekretowiec.pl jest od 2007 r.	Juliusz Bennich-Zalewski, który ponosi koszty jej utrzymania. Stroną administruje Zrzeszeszenie Dekretowiec, którego właściciel domeny jest współzałożycielem.
</div>
</div>
</td>
</tr>

</table>

<script type="text/javascript">
var j; 
function toggleNav() {
document.getElementById('sidenav').style.top=document.getElementById('logo').clientHeight +10 +'px';
document.getElementById('sidenav').style.height=window.innerHeight-document.getElementById('logo').clientHeight - document.getElementById('footer').clientHeight -55 +'px'
        
if(window.innerWidth >450)
{
document.getElementById("sidenav").style.width = "220px";
document.getElementById("content").style.marginLeft = "220px";
for (j = 0; j < document.getElementsByClassName("plus_minus").length; j++) {
document.getElementsByClassName('plus_minus')[j].style.left='185px'}
}

if(window.innerWidth <=450)
{
document.getElementById("sidenav").style.width = "100%";
document.getElementById("content").style.marginLeft = "100%";
for (j = 0; j < document.getElementsByClassName("plus_minus").length; j++) {
document.getElementsByClassName('plus_minus')[j].style.left='calc(100% - 20px)'}
}

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

}

</script>

<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length+100; 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>

**molendijk** · 12-29-2017, 11:58 PM

Originally Posted by Deadweight

I dont want to step on his toes.

Deadweight, my toes are very short, and I don't mind someone stepping on them.

**molendijk** · 12-30-2017, 08:29 PM

Hallo Zbyszek again,
I just noticed that there were still errors in the code (mine too). I removed them. Go to http://mesdomaines.nu/zbyszek/zbyszek.html and view / copy / paste the source (refresh the page if needed).

I put the menu button at the very top, because otherwise it would uglily float somewhere on long scrollable pages.

Until now the page was not responsive. It's responsive now. The price you have to pay is that the header text to the right of the logo will not be displayed if the width of the window is less than 450px. Other solutions turned out to be very hard to find out (possibly because you are using tables).