Page 1 of 2 12 LastLast
Results 1 to 10 of 15

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

  1. #1
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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 ?

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

  3. #3
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

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

    Default

    Do you have a link to your website?
    I am assuming you want something like this: Example?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

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

    Default

    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>

  6. #6
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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 ?
    Last edited by zlisiekci; 12-27-2017 at 01:52 PM.

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

    Default

    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>

  9. The Following User Says Thank You to molendijk For This Useful Post:

    zlisiekci (12-29-2017)

  10. #9
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  11. #10
    Join Date
    Dec 2016
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by zlisiekci; 12-29-2017 at 01:17 PM. Reason: ps

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
  •