Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

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

  1. #11
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    509
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    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.
    Last edited by Deadweight; 12-29-2017 at 03:31 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    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>
    Last edited by molendijk; 12-30-2017 at 01:13 AM.

  3. #13
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Quote Originally Posted by Deadweight View Post
    I dont want to step on his toes.
    Deadweight, my toes are very short, and I don't mind someone stepping on them.

  4. #14
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

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

  5. #15
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    509
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    Yes, tables would make that extremely difficult, I would suggest moving to divs >.<
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. Responsive Side Toggle Menu
    By jdadwilson in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 12-16-2015, 06:45 PM
  2. Responsive Side Toggle Menu reversal
    By green in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-03-2015, 07:33 PM
  3. Responsive Side Toggle Menu - CSS Glitch
    By Beverleyh in forum Bug reports
    Replies: 0
    Last Post: 11-15-2015, 11:34 AM
  4. Responsive Side Toggle Menu
    By Thin Lizzy in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 11-07-2015, 01:41 PM
  5. DOM errors in Responsive Side Toggle Menu?
    By chas in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-04-2015, 04:08 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •