Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Button to display Menu in a similar way as a dropdown does

    General Discussion
    4
    6
    162
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Crossbow92 last edited by Crossbow92

      Hi there :)

      I am trying to do something and wondered if I could get a bit of help on this 🙏🏽. I want to make a button which is a "+" symbol that when you click on it, it displays the menu (the links to categories "Work" and "About") right beside it.

      I dont know if that requires a tons of code but I just wanted to try it, here I show you some images

      normal state:
      0_1570010523431_1.jpg

      When you clicked on it:
      0_1570010536048_2.jpg

      Here is my web danielballesta.com

      I know some htmI & css, but I hope it is not too difficult, I tried to code it but didn't figure out how to do it.

      Thanks in advance :)

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @Crossbow92
        you could do that with not a ton of code in Javascript and jQuery.

        I suppose that you make an CUSTOM HTML element wich is the +. You place with with position fixed up there.
        Then when you click it you toggle a class on the navigation to make it visible.

        Have a basic ready into jQuery on Codeacademy :-)

        Not difficult.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • K
          Kirin last edited by

          Hello there,

          Has anyone found a solution for this in the meantime?
          The thread creator has not integrated it on his site, at least.

          Is there perhaps a plugin that offers something like this?

          It's somehow similar to a responsive view on the desktop, but also the archived threads here that deal with this don't come to a solution like the one shown above.

          Would be very happy about a hint!

          Best,
          Kirin

          1 Reply Last reply Reply Quote 0
          • Richard
            Richard Global Moderator last edited by

            Dear @Kirin

            Based on the Image above, the button toggles a Class to be either visible or invisible. This can be easily coded with many helpful tutorials online - Hope these help in the right direction:

            https://www.w3schools.com/jquery/html_toggleclass.asp

            https://www.w3schools.com/cssref/pr_class_visibility.asp

            https://laytheme.com/documentation.html#custom-javascript


            Best wishes 🌝
            Richard
            K 1 Reply Last reply Reply Quote 0
            • K
              Kirin @Richard last edited by Kirin

              Dear @Richard

              Thank you for the links!

              I have now put together the following from this:

              Custom CSS for Desktop Version:

              nav.navoffstart {
                  opacity: 0 !important;
                 visibility:hidden !important; 
              }
              
              .navoff{
                  visibility:hidden !important;
                  opacity: 0 !important;
                  transition: all 600ms ease !important;
                  -webkit-transition: all 600ms ease !important;
              }
              
              .navon{
                  visibility:visible !important;
                  opacity: 1 !important;
                  transition: all 600ms ease !important;
                  -webkit-transition: all 600ms ease !important;
              }
              

              Custom <head> content

              <script>
              
              window.laytheme.on("newpageshown", function(){
                
                  jQuery('nav').addClass("navoffstart");
              
              });
              
              </script>
              

              Custom HTML at top

              <script>
              
              window.laytheme.on("newpageshown", function(){
                  jQuery("button").click(function(){
                  jQuery('nav').removeClass("navoffstart");
                  jQuery('nav').toggleClass("navon navoff");
                  });
                });
              
              </script>
              
              <button>B</button>
              

              Alternatively, I also tried

              <script>
              
              jQuery(document).on("click", "button", function(event) {
                  jQuery('nav').removeClass("navoffstart");
              	 jQuery("nav").toggleClass("navon navoff");
              });
              
              </script>
              
              <button>B</button>
              

              What I am trying to achieve is:

              Hide the menu on page load.

              Fade in the menu when the button is clicked.
              Fade out the menu again when the button is clicked again.
              I.e. switch between the states smoothly.

              Therefore I used toggleClass with two classes.

              However, the menu is only shown once when the button is clicked, but it is not hidden again when the button is clicked again.

              ToggleClass with only one class works, but not with two classes.

              Also, the menu appears for a blink of an eye on page load before it becomes invisible. To solve this problem, I tried to make the menu invisible right at the beginning, with

              nav.primary {
              visibility:hidden;
              }
              

              But then, unfortunately, it never appears again. My button then doesn't work at all.

              I feel like I'm pretty close to the solution, but unfortunately I'm stuck here.
              Have I misunderstood something?
              Or does Laytheme maybe have a problem with toggleClass("one two"), two classes to switch between?
              Is there any workaround maybe?

              I would be very grateful for your help.

              Have a nice weekend!
              Kirin

              1 Reply Last reply Reply Quote 0
              • Richard
                Richard Global Moderator last edited by Richard

                Dear @Kirin

                Apologies that i cannot help with personal customisation at this point.
                Please refer to the Documentation page for JS related Functions:

                https://laytheme.com/documentation.html#custom-javascript

                Lay Theme won't have any trouble with " toggleClass() " 🌝


                Best wishes
                Richard
                1 Reply Last reply Reply Quote 0
                • First post
                  Last post
                Post a link to where the problem is
                I don't answer or check forum DMs, please just post on the forum.
                Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                Before you post:

                Use the Search Feature. Maybe there is already a solution to your issue.

                1. Update Lay Theme and all Lay Theme Addons
                2. Disable all Plugins
                3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                4. Now see if your problem solved itself
                5. Go here, see if your problem is listed here:
                Troubleshooting

                When you post:
                1. Post a link to where the problem is
                2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                Thanks!

                Online Users

                K
                S

                Recent Topics

                • T

                  scroll element transitions mobile

                • L

                  HTML

                • M

                  Burger menu in desktop and tablet view

                • M

                  WPForms Lite not working with new theme update (5.5.5)

                laytheme.com