Hi There,
Is it possible to create a sticky menu bar like what you can see in the following link?
https://demo.accesspressthemes.com/wordpress-plugins/wp-floating-menu-pro/sticky-menu-demo/
I know in Wix we can pin a menu but as you can see in the link when we hover over on each menu its name appears .
Thanks
Yes, it is possible. I made this: https://gusitepreview.wixsite.com/stickymenubar
This is the code and you will need buttons and container boxes.
function toggleFoldStikyMenu(index) {
let $FoldStikyMenu = $w('#StickyNavBarMenu' + index);
// Switch between menus
if ($FoldStikyMenu.collapsed) {
$FoldStikyMenu.expand();
} else {
$FoldStikyMenu.collapse();
}
// Close the other menus
[1, 2, 3]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#StickyNavBarMenu' + idx).collapse();
})
}
export function Menu1_mouseIn(event) {
toggleFoldStikyMenu(1);
}
export function StickyNavBarMenu1_mouseOut(event) {
toggleFoldStikyMenu(1);
}
export function Menu2_mouseIn(event) {
toggleFoldStikyMenu(2);
}
export function StickyNavBarMenu2_mouseOut(event) {
toggleFoldStikyMenu(2);
}
export function Menu3_mouseIn(event) {
toggleFoldStikyMenu(3);
}
export function StickyNavBarMenu3_mouseOut(event) {
toggleFoldStikyMenu(3);
}
Use MouseIn on the button that will call the coiner box.
export function Menu1_mouseIn(event) {
toggleFoldStikyMenu(1);
}
Use MouseOut on the container box that will be hidden after the mouser exits.
export function StickyNavBarMenu1_mouseOut(event) {
toggleFoldStikyMenu(1);
}
You have to name the container boxes the same name + the thigh number. For example, if you have 3 container boxes, you will name the “Box Name” + “Its Number”. In this case, I used it like this: StickyNavBarMenu1; StickyNavBarMenu2; StickyNavBarMenu3.
Replace “StickyNavBarMenu”, with the name of your container box.
$w('#StickyNavBarMenu'
If you have more container boxes, you should put their number in this part of the code.
[1, 2, 3]
Thank you Gu for the code and your explain please see the screenshots I created 3 buttons and name them Menu1 Menu2 Menu3 and 3 container and name them StickyNavBarMenu1 StickyNavBarMenu2 and StickyNavBarMenu3 But unfortunately it’s not working! something might be wrong Could you kindly let me know where please?You know how can I add an effect to the container when they appear like the link below?
https://demo.accesspressthemes.com/wordpress-plugins/wp-floating-menu-pro/sticky-menu-demo/
Depending on what you want to do, you could use another button in place of the container box. With animation, the code looks something like this:
import { timeline } from 'wix-animations';
function toggleFoldStikyMenu(index) {
let $FoldStikyMenu = $w('#StickyNavBarMenu' + index);
let $FoldMenu = $w('#Menu' + index);
// Switch between menus
if ($FoldStikyMenu.collapsed, $FoldMenu.expand) {
$FoldStikyMenu.expand();
$FoldMenu.collapse();
NavbarAnimationExpand(index)
} else {
$FoldStikyMenu.collapse();
$FoldMenu.expand();
NavbarAnimationCollapsed(index)
MenuAnimation(index)
}
// Close the other menus
[1, 2, 3]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#StickyNavBarMenu' + idx).collapse();
$w('#Menu' + idx).expand();
NavbarAnimationCollapsed(index)
MenuAnimation(index)
})
$w('#StickyNavBarMenu' + index).onMouseOut(() => {
$w('#StickyNavBarMenu' + index).collapse();
$w('#Menu' + index).expand();
NavbarAnimationCollapsed(index)
})
}
function MenuAnimation(index) {
const target = $w('#Menu' + index);
timeline()
.add(target, { y: 0, x: 80, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarAnimationExpand(index) {
const target = $w('#StickyNavBarMenu' + index);
timeline()
.add(target, { y: 0, x: 140, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarAnimationCollapsed(index) {
const target1 = $w('#StickyNavBarMenu' + index);
const target = $w('#Menu' + index);
const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutElastic' };
timeline()
.add(target1, reset)
.add(target, reset)
.play();
}
export function Menu1_mouseIn(event) {
toggleFoldStikyMenu(1);
}
export function Menu2_mouseIn(event) {
toggleFoldStikyMenu(2);
}
export function Menu3_mouseIn(event) {
toggleFoldStikyMenu(3);
}
But I’m not a programming expert, so I don’t know if this way is correct. On my site it worked. The animations settings are just a demonstration. You can change them later.
As for the error on your site, which one is appearing?
Thanks for the code I need to fix the issue as for the problem when I see the site on preview nothing happens the button and container just show !
I had forgotten to hide the button. I already updated the code in my comment above. See if it works now.
Remember to leave the container box in collapse and not hidden, on page load.
I pasted the code in homepage and masterPage.js and if you see the screenshot the letter m is not Capital I changed into capital and collapsed the container but it’s not working!
In your first image, you have two toggleFoldStikyMenu ( index ) functions on the same page. Use this code in components that are always on the same page. The code in masterPage.JS and in the page will not work because when you leave that page and go to another, the code in masterPage.JS will not find the elements because they are not in view on all pages. For the one that is separated in its header, use this code below.
export function MenuTopBar_mouseIn(event) {
$w('#StickyNavBarMenuTopBar').expand();
$w('#MenuTopBar').collapse();
MenuTopAnimation();
NavbarTopAnimationExpand();
NavbarTopAnimationCollapsed()
}
export function StickyNavBarMenuTopBar_mouseOut(event) {
$w('#StickyNavBarMenuTopBar').collapse();
$w('#MenuTopBar').expand();
NavbarTopAnimationCollapsed();
}
function MenuTopAnimation() {
const target = $w('#MenuTopBar');
timeline()
.add(target, { y: 0, x: 40, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarTopAnimationExpand() {
const target = $w('#StickyNavBarMenuTopBar');
timeline()
.add(target, { y: 0, x: 8, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarTopAnimationCollapsed() {
const target1 = $w('#StickyNavBarMenuTopBar');
const target = $w('#MenuTopBar');
const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutElastic' };
timeline()
.add(target1, reset)
.add(target, reset)
.play();
}
In your last image, put all as “Menu” + the number. the lowercase letter was a typo. In the code, only those with the first letter in capitals will be used.
In my home I have the following code:
import { timeline } from ‘wix-animations’ ;
function toggleFoldStikyMenu ( index ) {
let $FoldStikyMenu = $w ( ‘#StickyNavBarMenu’ + index );
let $FoldMenu = $w ( ‘#Menu’ + index );
// Switch between menus
if ( $FoldStikyMenu . collapsed , $FoldMenu . expand ) {
$FoldStikyMenu . expand ();
$FoldMenu . collapse ();
NavbarAnimationExpand ( index )
} **else** {
$FoldStikyMenu . collapse ();
$FoldMenu . expand ();
NavbarAnimationCollapsed ( index )
MenuAnimation ( index )
}
// Close the other menus
[ 1 , 2 , 3 ]
. filter ( idx => idx !== index )
. forEach ( idx => {
$w ( '#StickyNavBarMenu' + idx ). collapse ();
$w ( '#Menu' + idx ). expand ();
NavbarAnimationCollapsed ( index )
MenuAnimation ( index )
})
$w ( '#StickyNavBarMenu' + index ). onMouseOut (() => {
$w ( '#StickyNavBarMenu' + index ). collapse ();
$w ( '#Menu' + index ). expand ();
NavbarAnimationCollapsed ( index )
})
}
function MenuAnimation ( index ) {
const target = $w ( ‘#Menu’ + index );
timeline ()
. add ( target , { y : 0 , x : 80 , scale : 1 , duration : 600 , easing : ‘easeOutElastic’ })
. play ();
}
function NavbarAnimationExpand ( index ) {
const target = $w ( ‘#StickyNavBarMenu’ + index );
timeline ()
. add ( target , { y : 0 , x : 140 , scale : 1 , duration : 600 , easing : ‘easeOutElastic’ })
. play ();
}
function NavbarAnimationCollapsed ( index ) {
const target1 = $w ( ‘#StickyNavBarMenu’ + index );
const target = $w ( ‘#Menu’ + index );
const reset = { y : 0 , x : 0 , scale : 1 , duration : 600 , easing : ‘easeOutElastic’ };
timeline ()
. add ( target1 , reset )
. add ( target , reset )
. play ();
}
export function Menu1_mouseIn ( event ) {
toggleFoldStikyMenu ( 1 );
}
export function Menu2_mouseIn ( event ) {
toggleFoldStikyMenu ( 2 );
}
export function Menu3_mouseIn ( event ) {
toggleFoldStikyMenu ( 3 );
}
/**
/**
You can also define an event handler using the Properties and Events panel.
Read more
/**
You can also define an event handler using the Properties and Events panel.
Read more
/**
You can also define an event handler using the Properties and Events panel.
Read more
as you can see all is Menu but it is still not working!something might be wrong!
or the place of the code that I pasted is not correct?
Replace your code with this one:
import { timeline } from 'wix-animations';
function toggleFoldStikyMenu(index) {
let $FoldStikyMenu = $w('#StickyNavBarMenu' + index);
let $FoldMenu = $w('#Menu' + index);
// Switch between menus
if ($FoldStikyMenu.collapsed, $FoldMenu.expand) {
$FoldStikyMenu.expand();
$FoldMenu.collapse();
NavbarAnimationExpand(index)
} else {
$FoldStikyMenu.collapse();
$FoldMenu.expand();
NavbarAnimationCollapsed(index)
MenuAnimation(index)
}
// Close the other menus
[1, 2, 3]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#StickyNavBarMenu' + idx).collapse();
$w('#Menu' + idx).expand();
NavbarAnimationCollapsed(index)
MenuAnimation(index)
})
$w('#StickyNavBarMenu' + index).onMouseOut(() => {
$w('#StickyNavBarMenu' + index).collapse();
$w('#Menu' + index).expand();
NavbarAnimationCollapsed(index)
})
}
function MenuAnimation(index) {
const target = $w('#Menu' + index);
timeline()
.add(target, { y: 0, x: 80, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarAnimationExpand(index) {
const target = $w('#StickyNavBarMenu' + index);
timeline()
.add(target, { y: 0, x: 140, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarAnimationCollapsed(index) {
const target1 = $w('#StickyNavBarMenu' + index);
const target = $w('#Menu' + index);
const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutElastic' };
timeline()
.add(target1, reset)
.add(target, reset)
.play();
}
export function Menu1_mouseIn(event) {
toggleFoldStikyMenu(1);
}
export function Menu2_mouseIn(event) {
toggleFoldStikyMenu(2);
}
export function Menu3_mouseIn(event) {
toggleFoldStikyMenu(3);
}
In the new function update, do not use this part of the code anymore:
export function StickyNavBarMenu1_mouseOut(event) {
toggleFoldStikyMenu(1);
}
export function StickyNavBarMenu2_mouseOut(event) {
toggleFoldStikyMenu(2);
}
export function StickyNavBarMenu3_mouseOut(event) {
toggleFoldStikyMenu(3);
}
The container box shrinkage is already built into the code. This snippet here will be responsible for shrinking the container box when the mouse leaves it. This snippet is already integrated into the code.
$w('#StickyNavBarMenu' + index).onMouseOut(() => {
$w('#StickyNavBarMenu' + index).collapse();
$w('#Menu' + index).expand();
NavbarAnimationCollapsed(index)
})
These are the settings for the buttons and the container boxes:
You have not indicated what should happen when the function is called.
export function StickyNavBarMenu1_mouseOut_2(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
example:
export function StickyNavBarMenu1_mouseOut(event) {
toggleFoldStikyMenu(1);
}
You can delete that part, too:
**
* Adds an event handler that runs when the mouse pointer is moved
onto the element.
You can also [define an event handler using the Properties and Events panel](https://support.wix.com/en/article/velo-reacting-to-user-actions-using-events).
[Read more](https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn)
* @param {$w.MouseEvent} event
*/
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
Thanks Gu for the code and explain please click on the following link:
https://danmaxwix.wixsite.com/website-6 and hover over on the Instagram and Mail icons which are pinned on the left side you will see on each icon when you hover over a container box with slide effect shows the code is so short.Please see the code!
export function insta_mouseIn ( event ) {
let slideOptions = {
“duration” : 300 ,
“delay” : 50
};
$w ( ‘#box1’ ). show ( “slide” , slideOptions );
}
export function insta_mouseOut ( event ) {
let slideOptions = {
“duration” : 300 ,
“delay” : 50
};
$w ( ‘#box1’ ). hide ( “slide” , slideOptions );
}
the code is working well on my side.
It doesn’t seem to have any errors. On your published site is working perfectly!
Yeah~~~Thanks for your time Gu^^