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

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:

When you clicked on it:

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

mariusjopen

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

Kirin

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

Richard

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

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

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() " 🌝