Web Analytics Made Easy -
StatCounter Creating a sliding callapsible menu - CodingForum

Announcement

Collapse
No announcement yet.

Creating a sliding callapsible menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Creating a sliding callapsible menu

    I have my ul and li all set up, now i want to make it all collapsible using the main topics as the trigger. So i know all i need to do for that is just create a hidden input checkbox, give it a label and then use css to hide and show the section of menu onclick. That part is not so bad to put together.

    However i dont want it to just appear like a popup. I would like it to slide down the page when it opens in a graceful way.. What method do i use for that effect?

    Click image for larger version  Name:	menusample.jpg Views:	0 Size:	59.8 KB ID:	2424689
    If a php file only has php code within it you do not need to use the closing php tag
    A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
    durangod is short for durango dave

  • #2
    Hi. I usually do something like the following:

    Code:
    input#toggle~ul{
    max-height: 0;
    overflow: hidden;
    transition: 0.5s max-height;
    }
    input#toggle:checked~ul{
    max-height: 20em; /* by trial and error - this height should hold about 24 items */
    }

    Comment


    • #3
      Thanks hdewantara ill test it out tonight...
      If a php file only has php code within it you do not need to use the closing php tag
      A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
      durangod is short for durango dave

      Comment


      • #4
        Still not exactly what i am looking for, the collapse and uncollapse works fine, but the transition really does nothing, it still opens up very fast. I understand this is just a doc section of the project but still think it can use alittle eyecandy once in a while.

        Is there a different kind of transition i might try that might look good onclick.

        I do have it set in css to make the font just a bit bigger on hover so thats a nice look but the drop down effect im just looking for something alittle tweaky if that makes sense.

        Here is what i have so far.. .


        Code:
        /*
        ********************************************
        * E X P A N D AND C O L A P S E M E N U
        ********************************************
        */
        
        
        /* isolate the label */
        label[for=started_dropmenu] {
        display: block;
        cursor: pointer;
        }
        
        /* hide checkbox */
        input#started_dropmenu,
        input#started_dropmenu ~ #dropcontent{
        display:none;
        }
        
        /* display menu items on checked */
        input#started_dropmenu:checked ~ #dropcontent{
        display: block;
        max-height: fit-content;
        transition: 0.5s max-height;
        }
        the span class subsection is just the color green

        HTML Code:
        <!-- here there is a unseen div and a ul -->
        <li>
            <div id="dropmenu">
              <input type="checkbox" id="started_dropmenu" checked>
              <label for="started_dropmenu"><span class="subsection">Getting Started</span></label>
                 <div id="dropcontent">
                   <ul>
                       <li><a href="https://example.com/docs/required.php">Requirements</a></li>
                       <li><a href="https://example.com/docs/installation.php">Installation</a></li>
                       <li><a href="https://example.com/docs/afterinstall.php">After Installation</a></li>
                    </ul>
                  </div> <!-- dropcontent -->
            </div> <!-- dropmenu -->
        </li>
        
        <!-- then we close the unseen div and ul
        If a php file only has php code within it you do not need to use the closing php tag
        A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
        durangod is short for durango dave

        Comment


        • #5
          ok so im done with installing the menu, however i have two small issues.

          One is that if close a main topic and the sub topics are open, then when i reopen the main topic the sub topics are still open, but i guess thats the way it should be so thats not too bad..

          The other issue is that on the main menu i set full menu as unchecked on page load. So that means that on page load i get a clean dir listing (collapsed) and that is fine on first page load.

          But lets say i open the users guide section and i am reading stuff in that subtopic, and i want to go to a new page. As soon as i click on the link for the new page the menu us reset to all closed, that means i could have lost my place in the menu as a user..

          So i wonder if there is a way in css (this is prob more js than css), to tell the browser - hey on pageload, whatever menus have been opened then leave them open? Unless the page is home page.

          One other thing is that i have 5 sets of the css and html code i posted above, 1 for each UL section and im only changing a word in each one to make it unique.. so there should be a way to dynamically feed the data so i only have to post the css 1 time.
          Last edited by durangod; Jul 1, 2020, 01:18 AM.
          If a php file only has php code within it you do not need to use the closing php tag
          A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
          durangod is short for durango dave

          Comment


          • #6
            maybe ill have to use js afterall...
            Last edited by durangod; Jul 1, 2020, 03:47 AM.
            If a php file only has php code within it you do not need to use the closing php tag
            A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
            durangod is short for durango dave

            Comment


            • #7
              Yes, you will have to use JS to set a cookie or load the content asynchronously for the menu to stay open. And as to the expanding and collapsing with smooth transition: the CSS method with max-height isn’t the most ideal either. This article at CSS Tricks has some good info on that. You will need the help of JS; not for the transition itself but for the calculation of the default height of elements, so that CSS can transition most smoothly.
              Stop solving problems you don’t yet have!

              Comment


              • #8
                Thanks for the link, i love the look of the transform effect... Its just that little tweak that makes it less dull
                If a php file only has php code within it you do not need to use the closing php tag
                A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                durangod is short for durango dave

                Comment


                • #9
                  VIPStephan that transition transform is Exactly the effect i was looking for but i just could not explain it... perfect thanks

                  Here is the new CSS..

                  Code:
                  /* getting started */
                  
                  /* isolate the label */
                  label[for=started_dropmenu] {
                  display: block;
                  cursor: pointer;
                  }
                  
                  /* hide checkbox */
                  input#started_dropmenu {
                  display: none;
                  }
                  
                  /* collapse unchecked  */
                  input#started_dropmenu ~ #dropcontent{
                  transform:scaleY(0);
                  height: 0;
                  }
                  
                  /* show menu items when checked */
                  input#started_dropmenu:checked ~ #dropcontent{
                  display: block;
                  transition: transform 0.3s ease-out;
                  height: auto;
                  transform: scaleY(1);
                  transform-origin:top;
                  }
                  Last edited by durangod; Jul 1, 2020, 11:39 AM.
                  If a php file only has php code within it you do not need to use the closing php tag
                  A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                  durangod is short for durango dave

                  Comment


                  • #10
                    I have made one correction to the css... as it was without the height in the collapsed view, it left a huge hole in the list, so by setting height 0 for collapsed, it removes that hole and move the list up when closed.

                    so i changed this part adding height - ill correct the code in post as well..

                    Code:
                    /* collapse unchecked */
                    input#started_dropmenu ~ #dropcontent{
                    transform:scaleY(0);
                    height: 0;
                    }

                    Now as far as the js goes, I am thinking maybe i dont need it. The objective was to have a short clean list on first page load, then let the user choose what they wanted and while they were browsing pages, leave those sections open that they visited.

                    However opening the list with all the inputs checked to begin with does all that, the only down side is that it does not start shot and clean. But im willing to give up the initial look if the rest is done just by having them all checked...

                    One thing i might add in the future is a open all icon and a close all icon. But for now it looks and works great... thanks
                    Last edited by durangod; Jul 1, 2020, 11:44 AM.
                    If a php file only has php code within it you do not need to use the closing php tag
                    A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                    durangod is short for durango dave

                    Comment


                    • #11
                      and finally here is the code for the open all and close all js and html

                      js
                      Code:
                      function openall()
                      {
                         var checkboxes = document.getElementsByTagName('input');
                      
                         for(var i=0, n=checkboxes.length;i<n;i++)
                         {
                         checkboxes[i].checked = 1;
                         }
                      }
                      
                      function closeall()
                      {
                          var checkboxes = document.getElementsByTagName('input');
                      
                           for(var i=0, n=checkboxes.length;i<n;i++)
                           {
                             checkboxes[i].checked = '';
                            }
                      }
                      and html

                      HTML Code:
                      <a href="#" onClick="openall();"><i class="fa fa-expand" aria-hidden="true"></i></a> &nbsp;
                      <a href="#" onClick="closeall();"><i class="fa fa-compress" aria-hidden="true"></i></a>
                      If a php file only has php code within it you do not need to use the closing php tag
                      A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                      durangod is short for durango dave

                      Comment


                      • #12
                        Another improvement, no reason to have both icons showing at the same time. When clicking closeall then the closeall icon should go away and leave the openall icon in place, and vice versa.

                        So i just added a id to the anchor tag for the icons and then added the call to a new function at the end of the open and close functions like so

                        after the close for loop for both functions i added the following depending on which function it was.
                        Code:
                        hideIconAll('open');
                        or
                        hideIconAll('closed');

                        and then added the new function

                        Code:
                        function hideIconAll(value)
                        {
                        
                           var req = value;
                        
                           if(req == 'open')
                           {
                             document.getElementById('allopen').style.display = 'none';
                             document.getElementById('allclosed').style.display = 'inline-block';
                            }
                        
                             if(req == 'closed')
                             {
                               document.getElementById('allclosed').style.display = 'none';
                               document.getElementById('allopen').style.display = 'inline-block';
                              }
                        
                        }//close function hideIconAll
                        The inline-block prevents them from being stacked.

                        I also added a title tag to the anchor for mouseover text view.

                        Now i think im happy with it



                        Last edited by durangod; Jul 1, 2020, 07:37 PM.
                        If a php file only has php code within it you do not need to use the closing php tag
                        A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                        durangod is short for durango dave

                        Comment


                        • #13
                          The trick is to NO use style.display, or to use ONLY JavaScript. Your initial markup in post 4 was fine. All you need to do is HOOK the input for onchange, and set the height (you need height to animate it) to 0 or the height of an inner container. The only big difference being the need for TWO wrappers.

                          Done properly it will pop on/off without javascript, and animate with. Since it's a checkbox just store it's state on change in localStorage, and onload if it's set in localstorage make sure it's checked and then timeout to adjust the height.

                          I'm a bit busy at the moment -- just on short break -- but i'll try to toss together a quick demo before bed.

                          All that hide/open style.display junk? Toss that in the trash.
                          I'll kill you and your dreams tonight, begin new life.
                          Bleed your death upon me, let your bloodline feed my youth.
                          https://cutcodedown.com

                          Comment


                          • #14
                            Czech this out:

                            https://cutcodedown.com/for_others/durangod/toggleMenu/

                            Since apparently I can't post code here anymore without it getting utterly banjaxed... It's the same general principle, just with a "noscript" class since if we set height:auto scripting doesn't like to override that with animation. The CSS and HTML are pretty much normal for a input toggle trigger, whilst the scripting:

                            https://cutcodedown.com/for_others/d.../toggleMenu.js

                            1) grab the elements we need to work on and store them permanently in our IIFE. I do this for .toggleMenu in a way that allows you to have multiple such toggles on page if need be. It can also be applied to non-menu items as the script doesn't care what the child wrapper is.

                            2) strips all instances of .noScript

                            3) hooks the change listener to all input inside .toggleMenu, sets the check based off localStorage, adjusts the heights.

                            4) The routine to set the height is its own function since it is used multiple times

                            5) we then have a routine to set the height of all of them, as we need that twice.

                            7) The callback handler for onchange sets the height and the localstorage state when/if called.

                            8) The window resize and window load both reset all. If we don't do that for the load the initial sizes will be wrong. With the resize we do it as how tall things end up could change based on screen width / wrapping behavior, so we NEED to recalc those whenever the screen size changes.

                            About what you're looking to do? The only real "problem" is that you can't nest them... It could be done but it's ... flaky and wouldn't look that great. Actually you could do it really well using requestAnimationFrame, but I advise against it due to CPU load issues.

                            Best part? Scripting off all you lose is the animation and the state tracking.
                            I'll kill you and your dreams tonight, begin new life.
                            Bleed your death upon me, let your bloodline feed my youth.
                            https://cutcodedown.com

                            Comment


                            • #15
                              Ok thanks so much ill have a look , i cant send you a pm but its at the old website at wssdocs/userdocs/all/userlogin_doc.php

                              that way you can see exactly mine it works.. since being able to view something sometimes makes all the dif... ill post your code to to view the difference. And i have the mobile version template done as well.
                              Last edited by durangod; Jul 2, 2020, 02:02 AM.
                              If a php file only has php code within it you do not need to use the closing php tag
                              A good way to remember objects from arrays is you shoot objects with arrows Example: $name->id; then Arrays are $name['id'];
                              durangod is short for durango dave

                              Comment

                              Working...
                              X