Can images be used to form menus ?

Ask the community
,
1

In wix, I want to know if images can be used in menus like instagram. Please refer to the figure below. The homepage and the search page are all small pictures on the bottom of the screen.

960×2079 284 KB

I made my website in mobile mode. It looks like the following. The menu can only be clicked on the upper right corner. want to help thank you.

960×2079 160 KB

2

Hi Jack,

I don’t see any code,
What did you try already?
Do you want the 3 dashes to open a menu with images or do you want that there are always the images.

Kind regards,
Kristof.

3

I want that there are always the images like instagram. Thank you.

4

@laizhihong
You can create such an menu easily by yourself.

  1. Your CLOSED-MENU…


2) Your OPENED-MENU…

  1. Add a MULTI_STATE_BOX onto your page.
  2. Create 2x states (state-1 / state-2)
  3. Put first image into —> state1.
  4. Pur 5x separated image-icons into state-2.
  5. Give every ELEMENT (image) a unique ID in the EDITOR-PROPERTY-PANEL.
  6. Activate DEV-MODE in your Wix-Editor.
  7. CODING…(put the following code into the code-section of your page)

FIRSTelement = CLOSE-MENU-IMAGE
SECONDelement = First Image-Icon in —> OPEN-MENU ( HOME )
THIRDDelement = Second Image-Icon in —> OPEN-MENU ( SEARCH )
FOUTHelement = Third Image-Icon in —> OPEN-MENU ( VIDEO )

$w.onReady(()=>{
   $w('#FIRSTelementID').onClick(()=>{    
          $w('#YourMultistateboxIDhere').changeState("state2");
   });  
   $w('#SECONDelementID').onClick(()=>{    
          //write code here what should happen when HOME-ICON is clicked...
   });  
   $w('#THIRDelementID').onClick(()=>{    
          //write code here what should happen when SEARCH-ICON is clicked...
   });  
   $w('#FOUTHelementID').onClick(()=>{    
          //write code here what should happen when VIDEO-ICON is clicked...
   }); 
//.....and so on ...... 
});

Create the same way a → BACK-Button on the second-state of the multistate-box, to navigate back to first state.

Continue…:wink:

5

@russian-dima inspired by your thoughts. I put four small images into a box. Then link each image to the related page. Place the box in the menu area of the page. It is at the top of the page. At this point, the menu has been made. In order to make this menu available on mobile phones. Open the phone editor, adjust the position and size of pictures, pages, … In the end I got the following

714×1128 319 KB

It works well and its interface is very similar to Instagram.com . Thank you for your patience and important remind.

6

Well done!
There are many ways, how to construct a custom menu. That was just an example and you made it.

You also could use for example …
-NORMAL BOXES (not best solution)
-REPEATER
-HTML-Component(working with css)
-Custom Element (upgraded HTML-Component) creating your own elements.

To expand and upgrade the functionality of your menu, you could for example even connect it with a DATABASE. That was, your menu becomes more dynamic and not static.

There are so many upgrade-possibilities.
Just some further thoughts and ideas for you.

7

Thanks for your advice.
I have another question here. That is, at the top of the screen, there is an advertisement of wix, “Join us on the wix app” . Can this advertisement be removed?

960×2079 257 KB

8

Normaly just when you have a premium site.
But i have heard it is also possible without premium …