Is there a better way? Full Page Menu

Ask the community
, ,
1

https://static.wixstatic.com/media/a27d24_46d8d8eca058407c826ee0aaa07819f3~mv2.png(image larger than 4 MB)

  1. So I needed a full page menu, wix so far does not provide a way of doing it, buut i managed to do it in code with a strip. It des look good, but it wrecked my code to text ratio…

  2. Would love if wix could develop this natively or i somebody can help me improve my code…

  3. The site is in www.simonabrahamworks.com i you want to see my work.

$w.onReady(function () {
//TODO: write your page related code here...
});
import wixLocation from 'wix-location';
export function HomeDecorButton_mouseIn(event) {
$w('#SculptureStrip').hide();
$w('#HomeDecorStrip').show();
$w('#GiftsStrip').hide();
$w('#OurWorldStrip').hide();
}
export function GiftsButton_mouseIn(event) {
$w('#SculptureStrip').hide();
$w('#HomeDecorStrip').hide();
$w('#GiftsStrip').show();
$w('#OurWorldStrip').hide();
}
export function OurWorld_mouseIn(event) {
$w('#SculptureStrip').hide();
$w('#HomeDecorStrip').hide();
$w('#GiftsStrip').hide();
$w('#OurWorldStrip').show();
}
export function OurWorldStrip_mouseOut(event) {
$w('#OurWorldStrip').hide();
}
export function SculptureStrip_mouseOut(event) {
$w('#SculptureStrip').hide();
}
export function HomeDecorStrip_mouseOut(event) {
$w('#HomeDecorStrip').hide();
}
export function GiftsStrip_mouseOut(event) {
$w('#GiftsStrip').hide();
}
export function DargentaLogo_mouseIn(event) {
$w('#SculptureStrip').hide();
$w('#HomeDecorStrip').hide();
$w('#GiftsStrip').hide();
$w('#OurWorldStrip').hide();
}
export function SculptureButton_mouseIn_1(event) {
$w('#SculptureStrip').show();
$w('#HomeDecorStrip').hide();
$w('#GiftsStrip').hide();
$w('#OurWorldStrip').hide();
}
export function SculptureButton_click(event) {
wixLocation.to("/home-decor-satue-collection");
$w('#SculptureStrip').hide();
}
export function HomeDecorButton_click(event) {
wixLocation.to("/home-decor");
$w('#HomeDecorStrip').hide();
}
export function GiftsButton_click(event) {
wixLocation.to("/gifts-for-everybody");
$w('#GiftsStrip').hide()
}
export function OurWorld_click(event) {
wixLocation.to("/our-world");
$w('#OurWorldStrip').hide();
}
export function BeautyCraftArtButton_click(event) {
wixLocation.to("/beauty-craft-art");
$w('#OurWorldStrip').hide();
}
export function DargentaCollectosButton_click(event) {
wixLocation.to("/dargenta-members-club");
$w('#OurWorldStrip').hide();
}
export function OurLegacyButton_click(event) {
wixLocation.to("/our-legacy-in-home-decor");
$w('#OurWorldStrip').hide();
}
export function OurSculptorsButton_click(event) {
wixLocation.to("/our-sculptors");
$w('#OurWorldStrip').hide();
}
export function AnimalArtButton_click(event) {
wixLocation.to("/animal-art");
$w('#SculptureStrip').hide();
}
export function SkyAnimalsButton_click(event) {
wixLocation.to("/bird-art-statue");
$w('#SculptureStrip').hide();
}
export function EarthAnimalButton_click(event) {
wixLocation.to("/earth-animal-art");
$w('#SculptureStrip').hide();
}
export function SeaAnimalButton_click(event) {
wixLocation.to("/sea-animal-art");
$w('#SculptureStrip').hide();
}
export function PlantArtButton_click(event) {
wixLocation.to("/plant-art");
$w('#SculptureStrip').hide();
}
export function HumanArtButton_click(event) {
wixLocation.to("/human-art");
$w('#SculptureStrip').hide();
}
export function DargentaEliteButton_click(event) {
wixLocation.to("/dargenta-elite-artists");
$w('#SculptureStrip').hide();
}
export function FridaKahloButton_click(event) {
wixLocation.to("/frida-kahlo-in-statue");
$w('#SculptureStrip').hide();
}
export function SalvadorDaliButton_click(event) {
wixLocation.to("/salvador-dali-art-sculpture");
$w('#SculptureStrip').hide();
}
export function RamirezVazquezButton_click(event) {
wixLocation.to("/pedro-ramirez-vazquez-statue");
$w('#SculptureStrip').hide();
}
export function WorldArtButton_click(event) {
wixLocation.to("/world-art-statue");
$w('#SculptureStrip').hide();
}
export function ReligionButton_mouseIn(event) {
wixLocation.to("/religious-art");
$w('#SculptureStrip').hide();
}
export function NewArrivalsButton_click(event) {
wixLocation.to("/new-arrivals-home-decor");
$w('#SculptureStrip').hide();
}
export function MostPopularButton_click(event)
{wixLocation.to("/most-popular-statues");
$w('#SculptureStrip').hide();
}
export function GiftConciergeButton_click(event) {
wixLocation.to("/gift-concierge");
$w('#SculptureStrip').hide();
}
export function DargentaMembersButtonSC_click(event) {
wixLocation.to("/dargenta-members-club");
$w('#SculptureStrip').hide();
}
export function VaseButton_click(event) {
wixLocation.to("/vase-for-home-decor");
$w('#HomeDecorStrip').hide();
}
export function BowlsButton_click(event) {
wixLocation.to("/bowls-for-home-decor");
$w('#HomeDecorStrip').hide();
}
export function MirrorsButton_click(event) {
wixLocation.to("/mirrors-home-decor");
$w('#HomeDecorStrip').hide();
}
export function PhotoFramesButton_click(event) {
wixLocation.to("/photo-frame-home-decor");
$w('#HomeDecorStrip').hide();
}
export function JewellryBoxButton_click(event) {
wixLocation.to("/jewellery-box-home-decor");
$w('#HomeDecorStrip').hide();
}
export function CandleHolderButton_click(event) {
wixLocation.to("/candle-holder-home-decor");
$w('#HomeDecorStrip').hide();
}
export function BookEndButton_click(event) {
wixLocation.to("/book-ends-home-decor");
$w('#HomeDecorStrip').hide();
}
export function FruitBowlButton_click(event) {
wixLocation.to("/fruit-bowls-home-decor");
$w('#HomeDecorStrip').hide();
}
export function FlowerPotButton_click(event) {
wixLocation.to("/flower-pot-home-decor");
$w('#HomeDecorStrip').hide();
}
export function BasketButton_click(event) {
wixLocation.to("/basket-for-home-decor");
$w('#HomeDecorStrip').hide();
}
export function ForTableButton_click(event) {
wixLocation.to("/table-decor");
$w('#HomeDecorStrip').hide();
}
export function ForWallButton_click(event) {
wixLocation.to("/table-decor");
$w('#HomeDecorStrip').hide();
}
export function ForFloorButton_click(event) {
wixLocation.to("/wall-decor");
$w('#HomeDecorStrip').hide();
}
export function ForHerButton_click(event) {
wixLocation.to("/gifts-for-her");
$w('#GiftsStrip').hide()
}
export function ForHimButton_click(event) {
wixLocation.to("/gifts-for-him");
$w('#GiftsStrip').hide()
}
export function TheCoupleButton_click(event) {
wixLocation.to("/wedding-gifts");
$w('#GiftsStrip').hide()
}
export function TheHomeButton_click(event) {
wixLocation.to("/home-decor");
$w('#GiftsStrip').hide()
}
export function AnimalLoversButton_click(event) {
wixLocation.to("/animal-art");
$w('#GiftsStrip').hide()
}
export function MostPopoularGiftsButton_click(event) {
wixLocation.to("/popular-gifts");
$w('#GiftsStrip').hide()
}
export function Gifts500Button_click(event) {
wixLocation.to("/gifts-under-500");
$w('#GiftsStrip').hide()
}
export function Gift1000Button_click(event) {
wixLocation.to("/gifts-under-1000");
$w('#GiftsStrip').hide()
}
export function PersonalizedGiftButton_click(event) {
wixLocation.to("/bespoke-services");
$w('#GiftsStrip').hide()
}
2 Likes
2

Nice work there!!

3

You can make the code much shorter, by using repeaters.
One repeater for the top menu + a repeater for each strip.
I can’t tell how it’ll affect the performance.

4

Thank you J.D. As you can see, its my first time coding, I’m reading now the documentation on the repeaters, could you write an example of how it would have to look?

I will post before and after performance tests so you know in the future if this works.

5

@simon8144 actually it can be a little bit complicated to do it with repeaters as use have different formats.
But even without a repeater, you can make the code shorter. Something like:

import wixLocation from "wix-location";
const  topMenu = [
    {buttonId:  "sculpture", strip: "sulptureStrip"},
    {buttonId: "homeDecor", strip: "homeDecorStrip"},
    //etc
];
const secondaryMenuButtons = [
    {buttonId: "SkyAnimalsButton", destination: "/bird-art-statue"};
    {buttonId: "EarthAnimalButton", destination: "/earth-animal-art"};
//etc. For all the button of the strips
];
$w.onReady(() => {
const topMenuSelector = topMenu.reduce((a,c) => a + `#${c.buttonId},`, "");
    $w(topMenuSelector).onViewportEnter(event => {
        topMenu.forEach(e => $w(e.strip).collapse));
        let selectedItem = topMenu.find(e => e.buttonId === event.target.id);
        $w("#" + selectedItem.strip).expand();
    })
//do something similar for viewportLeave
    const secondaryMenuSelector = secondaryMenuButtons.reduce((a,c) => a + `#${c.buttonId},`, "");
    $w(secondaryMenuSelector).onClick(event => {
        let selectedItem = secondaryMenuButtons.find(e => e.buttonId === event.target.id);
        wixLocation.to(selectedItem.destination);
    })
});

P.S. the performance should be quite similar to what you already have, so if you feel it’s too complicated then stick to your code.