Hello,
I have been trying to create a button menu system like the one in the site below. I cannot do it, wix chat couldn’t help so maybe it’s not possible without coding.
Could someone help please, so that I waste no more time?
It is the menu half way down the page with buttons that link to certain images - those images link to item details which incudes a buy option that links to the shop item.
To generate such a menu-system in wix, this will need a lot of code.
Wix do not provide such functionality out of the box.
You can use 2 REPEATERS and connect them by code to achieve your aim.
Also very important point will be the STRUCTURE of your DATABASE.
Thank you for the help.
Do any of the online drag and drop website creators have this functionality built in?
No, i do not know such providers, but you can build it on your own.
There are 2 ways of doing this…
- As mentioned already before → you use 2-REPEATERS connecting both by code.
- You generate a custom-element (html-component) to generate your wished specific menu.
Just for example a very simple written code by me for you…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#menu-container {
display: flex;
flex-direction: column;
height: 100vh;
}
#top-div {
height: 30%;
background-color: #3498db;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#sub-div {
height: 70%;
background-color: #2c3e50;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 10px;
box-sizing: border-box;
overflow-y: auto; /* Enable vertical scrollbar if needed */
}
.menu-button {
width: calc(20% - 20px);
margin: 10px;
padding: 15px;
background-color: #e74c3c;
color: #fff;
text-align: center;
text-decoration: none;
display: inline-block;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s;
}
.menu-button:hover {
background-color: #c0392b;
}
#image-container {
display: flex;
flex-wrap: wrap;
padding: 10px;
box-sizing: border-box;
}
.image {
width: 100px;
height: 100px;
margin: 5px;
border: 2px solid #fff;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="menu-container">
<div id="top-div">
<!-- Top div content (grid of 50 buttons) -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var topDiv = document.getElementById('top-div');
var subDiv = document.getElementById('sub-div');
var imageContainer = document.getElementById('image-container');
for (var i = 1; i <= 50; i++) {
var button = document.createElement('button');
button.className = 'menu-button';
button.textContent = 'Button ' + i;
// Associate each button with its corresponding image
button.addEventListener('click', function () {
var buttonNumber = parseInt(this.textContent.split(' ')[1]);
var image = document.createElement('div');
image.className = 'image';
image.textContent = 'Image ' + buttonNumber;
imageContainer.appendChild(image);
// Scroll to the added image
subDiv.scrollTop = imageContainer.scrollHeight;
});
topDiv.appendChild(button);
}
});
</script>
</div>
<div id="sub-div">
<!-- Sub div content (scrollable div) -->
<div id="image-container"></div>
</div>
</div>
</body>
</html>
- Add a → HTML-Component onto your page.
- Add the shown code into the new added HTML-Component.
- Save the settings.
- Either test it directly inside your Wix-Editor, or publish and test it.
This is just a simple example, which will have to be edited and expanded in it’S functionality, but as you can see, you are able to rebuild everything this way, even on a Wix-Website.
It do not show the absolute identical behaviour and is also not connected to a database (yet), but you could do al this by code.
Thank you very much.
I’m afraid I don’t code but I will definitely look into this to see how to use it.
From a drag and drop builder is it a massive learning curve to understand?
This is my site:
From a drag and drop builder is it a massive learning curve to understand?
Well, yes surely you can not start just right now coding and generate stunning and cool looking features, but without a little bit of coding-knowledge, you will never generate exactly the things you want. This is also your current issue. Your expectations onto your WEBSITE are higher than what you can do right now by your own. But you know what???
—> THIS IS ABSOLUTELY NORMAL ! Anyboddy was born as a DESIGN or PROGRAMMER-GOD.
But my recommendation would be to start learning some JS, HTML and CSS - CODING, if you really want to generate a great looking and working WEBSITE. Even if Wix is known as a DRAG-&-DROP-WEBSITE-BUILDER, in most cases, you will need CODE to get what you want (as you can see → you are not an exclusion).
However, let’s take a look onto your website…
Ok, all i see is a simple generated website-setup, using some wix-out-of-the-box stuf.
- Integrated (simple) wix-menu-bar in your header, navigating to different pages, to show some stuff (sound-banks).
- Integrated “Wix-Stores-APP” (ok, this is useful).
- Integrated “Wix-Blog-App” also surely useful.
- Very small footer (maybe too smal).
- The pages looks like a product-page with embeded Sound-Cloud-Player.
Improvement-Proposals:
-The design certainly needs improvement.
Why you are using green colors in combination with nature, although you have technical stuff on your page, that is a big question.
-I see that you are longing for better design and functionality, because —> this —>
—> is not the same like —>
So if i would be you, i would generate my website in more technical directed design and color-sheme.
By the way, here is an example of the menu, which i mentioned before (showing the code)…
And while generating you this answer, i have edited the menu a little bit and changed it’s bahaviour…
I would say there is a lot of work on your website infront of you.
Sorry, if my investigation is to direct, i am just reflecting/describing what i see.
Any pointers/ criticism hopefully will lead to a better site and are welcome.
My site design just developed from my green logo theme… I like green, it’s easy on the eyes and I like the natural vibe. I will rethink the technical look.
Thank you for all your input.
1 Like
Hey there, Michael!
Wix has a thing called Selection Tags that you can find under Input Elements. Using these, you can set it up to filter content in the CMS via a dataset - no code required!
Here’s an example site: https://www.wix.com/velo-examples/selection-tags
Also, nice website with that green theme!
Still not the same!
In your case → NO ONE-SELECTION-OPTION!
Try to select always just one selection-tag → you are able to do so without code?
And no, still green → not a technical color. 
But i know why, you love green
Agreed. But this is the closest it can get to what Michael wants to achieve, without code.
I’m sure that for a person like Michael who has little or no experience in coding, the selection tags will be a far better and a useful option rather than creating a completely custom element from scratch using HTML. 
Not really, my favourite color is blue. And I don’t think there are any specific technical colors that one should abide by. The website that was given as an example has lightning posters with the word dark written in the title itself. So the black theme seems to go well with it. As for Michael’s own website, his green theme does indeed match with his images and most importantly, his logo. Which is why it seems good to me.
Some would argue that the Google Doodle should not be multicoloured - it should have only one color. But I’m sure the majority would like it the way it is, and so does Google, and so do I! 
It’s curious that you seem to know exactly what kind of color would fit (if it comes to technical aspects) .
We know both that the design play a big role in webdesign!
Well known that his logo/icon is green → does not mean to concentrate only onto his icon-color.
I’m sure that for a person like Michael who has little or no experience in coding, the selection tags will be a far better and a useful option rather than creating a completely custom element from scratch using HTML.
Some people has to be pushed first, before they start to overthink.
But the most problematic answer i have read was …—>
My site design just developed from my green logo theme… I like green, it’s easy on the eyes and I like the natural vibe. I will rethink the technical look.
The same here…
...my favourite color is blue....
It’s not about what YOUR, or Michael’s color is the most liked, it’s about his website, what he represents on his website and how would the USERS judge his site, once they open it.
Yes → he likes green
You → like blue
But the users will see it different, they will try to connect your site’s-colors, your site’s outer-appearance, your-site’s everything withing seconds or even milliseconds and will take their descision to continue to visit your site, or directly leave it.
CONCLUSION:
-green color —> every 2 user will leave the site maybe immediately.
-taking a more suitable color → will improve the situation.
And it’s not just about color. We do not have to search long for the right answer, the answer is already given inside the rquest of the post-opener.
Colors, structure and design, should represents and spotlight the things you want to represent on your site.
And I don’t think there are any specific technical colors
In this case you are wrong.
If it would be like you say → then–>
-fire would be green
-water would be orange
and crocodiles would be blue
Why is → LACOSTE ← crocodile not blue ???
Absolutely!
As I mentioned, my fav is blue,
Mike’s likes green.
And while browsing Michael’s website, both of us are users.
And you gave him your ‘positive criticism’ from a user’s point of view - that green dosen’t look good.
I, again from a user’s point of view, gave him my feedback that I do like it.
So there’s no one right answer for this. Never did I tell him to make it blue, did I? 
It’s his website and he deserves the freedom to design it the way he wants.
Yes, but that’s how the Creator wanted to make it - so He made fire - orange, water - blue and crocodile - green! See? That’s exactly what I’m talking about - you just proved my point! 
correct i am the one who leaves and you who stays.
The 50%-rule i mentioned 
Thanks for the replies 
Green?.. my favourite colour is actually blue but green seemed better for my site, a bit like trees - they would look odd blue and I had a background forest image on some pages 
Some of the software synths have a green theme that I sell anyway. Think Arturia DX7V - https://www.arturia.com/products/software-instruments/dx7-v/overview
I’m trying blue at the moment but I think I may change it back again later as it doesn’t sit well with me. I’m a bit concerned about that 50% thing though 
Back to my question:
Could you explain how the CMS may work, or is that a no-goer as well?
I also tried anchors on the same page, but it was glitchy.
So I decided to add the buttons into my header, so that they stay on screen, are accessible and seem to do the job, even if not quite so slick. I just need to create a new page for each button today.
If this is your new site …
…then thumbs up ! Well done!
Then i would say, you turned your old…
…into a…
Ok, it is still not…
…but 400% better.
Back to your question…
Could you explain how the CMS may work, or is that a no-goer as well?
First of all some questions:
-do you know about → DATASETS?
-do you know about → REPEATERS?
-do you know about DYNAMIC-PAGES?
How do look like the structure of your database?
-do you use a database?
Before anybody can give you the right answer, you first should present the setup of your page/site.
No that wasn’t my site, just the synth made by arturia.
This is my sound bank:
As to your questions, it’s no but I’m learning.
I’ve finally managed to do it 
I used the WIX CMS. The only final issue is that when I click an image, it opens in a new window. When you go back it disappears and the original page shows. You’ll see what I mean.
The CMS is overriding the gallery image URL which is set to open in the same page.
The CMS where I needed to put the links does not have an option for how it opens and opens as it does in a new window.
Why are my posts being flagged and deleted?
They’re back again
Great job! I see you’ve used the selection tags very well! (:
Do you mean this?
If you don’t want the image to popup like this, you can just use a regular image component instead of a gallery and link it to the CMS via the dataset too!
And just in case you want to dive deeper into CMS, Wix has a complete website dedicated to it! Check it out here: Wix Content Manager Learning Center