PDA

View Full Version : 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/dynamicindex1/sidetogglemenu.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 (http://mesdomaines.nu/eendracht/menu_side_toggle3/centered_toggle_menu.html)?

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? (https://soloiestnetwork.000webhostapp.com/)

molendijk
12-26-2017, 12:40 AM
This seems to do what you want:
<!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:
<!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.

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:

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:


<!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
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).

Deadweight
01-02-2018, 02:23 PM
Yes, tables would make that extremely difficult, I would suggest moving to divs >.<