Drop down menu with sorting function

Hello!

I’m trying to make a drop down menu in my nav bar.
The only thing is that I wish to have a sorting function.
I’m making a portfolio to show my work, and I wish to have a function where I can sort different work, for example books, magazines, typography, illustrations and so on. And to be able to sort them into a flow. That I can mark “books” and “typography” for these works to show up in the feed.

I’m thinking a drop down menu with the name “Sort Work” that shows the “names” that you can click to put a mark into an empty marker next to the names. Does it make any sense??

Don’t know how you would make the works sort correctly, but maybe adding tags to give it the right reaction.

Does anyone have any tips for me?
Would be great!
Understand if it’s close to impossible, but it would be a great feature if it was added!
Can also say that I’m not that good with CSS/HTML, but I can manage.

Here is a mock-up from indesign i made earlier:

Kind regards,
Amanda

1 Like

nothing is impossible. only your own mind can create barriers between what can and can’t be done.

https://mixitup.kunkalabs.com/ - is this something you’re looking for?

Ah, I like that!
The only thing is that I want all those options in one drop down menu, and smaller, nog that big buttons.
And that it would be great if you could mark more options than one, if there would be a green, blue and red button, you could mark both red and blue.

if you want a filter like mixitup, you’ll need to have it custom coded.

if you’re not familiar with coding and need freelance help, there are a couple of freelancers on this forum who know the ins and outs of Webflow and front-end development. All you have to do is ask on this board: http://forum.webflow.com/category/freelance

GL HF =)

Awesome, thanks a lot! Will look into getting some help! Can imagine all kinds of talented geeks hanging there! Thanks for the tip :slight_smile:

1 Like

Hi @Amanda_Thomsson, I’m not sure that I follow everything you’re looking for, but look closely at mixitup, their sample page only shows some of what you can do with it. I have used it to set up explicit list of filtering criteria under one button (e.g., blue AND red stuff), and you can assign the function to any buttons you create on your site using css, whether those are in a dropdown or wherever.

Very simple to set up one button for “Red and Blue,” though it probably would take a little added scripting on your buttons themselves to make them operate like checkboxes (multiple selected at once) vs. radio buttons (selecting a button deselects all others).

Oh, thanks for your reply!
I see, it has more possibilities than meets the eye…
The problem is that I’m no good with writing code on my own, I guess if there was a sort of “for dummies”-guide to this function, I could do it myself!

Are you saying I could make it work on my own?
Considering my lack of coding experience.

Hard to say, but a jQuery plugin like mixit io might be a good experiment for you to dip your toe in the water, because it doesn’t actually require writing code, per se. I am hopeless at JavaScript but manage to fumble my way through adding plugins to my sites.

If you know what a CSS class is and what an ID is, and the difference between them, then you have a fair shot of being able to work through setting up a jQuery plugin if the documentation is written for newbies. (Many but not all are.)

If you don’t know the difference between those two things, or are just averse to looking at any level of code, probably best to hire out your coding for now, but I’d encourage you to learn how CSS works – it’s much simpler than JavaScript, and can be pretty fun. It will certainly help you build cleaner and more easily maintained and edited pages, even in Webflow, which does most of the CSS work for you.

If you’re already a little down with CSS, here’s a high-level overview in as plain English as I can muster:

There are two different kinds of “code” involved in a plug in:

  • JavaScript (JS), which does all the cool action-type stuff, and which you don’t really need to know 99% of to use a plug in, and
  • CSS, which you already use to specify how objects on you page look, by assigning them classes. You generally tell the JS what objects to act on by specifying a CSS class, or more commonly, an ID.

In a plug-in, someone has written all the JS code for you to make something cool happen. You need to be able to copy the plugin to a web server you have access to, and insert a line of code in your Custom Code area to point your site to the plugin. (If that’s all new stuff to you, it’s not hard but might point you back to a developer.)

The plugin developer will also provide a snippet of code that includes all the setting options for the plug in. That goes into your copy of the plugin so that when you edit the settings, it’s your own custom version of the plugin. Common options include:

  • The class or ID names that specify what objects are being controlled. For example, mixitup identifies groups of objects it will manipulate by recognizing a unique ID you have given them (in Webflow, that’s under Settings > General Settings). Then for the objects inside that, it looks for things with a given class (“mix” by default, but you can change that if you want).
  • Other plugin-specific settings to change things like timing duration, etc. For example, mixitup lets you assign a data-filter to specify sort order, etc. (Settings > Custom Attributes).

So, there may be some learning curve for you, but the whole idea of a jQuery plug in is to give the non-coder a ton of functionality with only a little bit of technical understanding needed to set it up and configure it. If you don’t take that on now because you don’t have time on your current project, I’d still encourage you to play around with them. Just Googling “jQuery plugins” will get you lots, or you could check out some sites that curate selections, like http://www.unheap.com/

Good luck!

1 Like

Wow, thanks @ramatsu!
Great that you explain it in plain english!
I’m gonna look into it, absolutely, and see if I can fix it on my own.
I think it’s not gonna be to hard, I’ve done some coding before, only not CSS.
I can manage to change the CSS code, but not write from scratch.
So I will read more about it first!

Sorry my reply took like a week, been crazy busy with everything here!
I loved that my website is up and running in 2 days of working!
Now I just need to adjust the details to make it perfect.

Thanks again for your “tutorial”!

You’re most welcome @Amanda_Thomsson. After writing that up, I started looking through the mixitup docs since they’ve completely rewritten it from the ground up since version 1.0. I have to say, it would probably be best to start by trying a little simpler plug-in. Mixitup has enough moving parts that are unique to it that it could confound someone doing setting up their first plugin.

Here’s a pretty easy and extremely useful plug in that might be nice to start with just to get your feet wet: http://www.xdsoft.net/jqplugins/datetimepicker/

Then after you get that successfully hooked up, maybe look around unheap.com for other ones that look like they would be fun to try on a test site or solve a current need, and check out the docs to see how complex they are to hook up. (When you hover over a plugin at unheap, you can see how many people have bookmarked it, which is a pretty good indicator of quality.)