I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery):
Specifically the points
How clicking on a category opens another to the right
How clicking on a category appends a variable like “#cat-10201” into the url (and vice versa)
How css lists are used instead of form select menus (making it easily styled)
How clicking on a deep subcategory automatically preselects all parent categories
I’m not looking for anyone to actually code it for me (that would be outrageous :p) but tips on how it’s actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don’t know plain javascript but I’m sure I can do most of it in jQuery
This probably wouldn’t need to be too complicated.
GumTree does something along these lines
Has a list of all the categories.
Has a list of all the sub categories
Has a list of all the sub sub categories (etc.)
All category links actually link to the list that contains the sub category, and the sub category links to the sub-sub category. (See markup below)
When someone clicks on the a (parent) category, it links through to the sub category, something you could target with javascript because you would know the href of the link that was clicked (and by extension the id of the category you are targeting).
With some CSS to show/hide different <ul>'s and some JS to toggle the hiding/showing you should be able to reproduce this fairly well.
The hashes are added to the URL if you are not preventing default events on links. Alternatively you could set them explicitly using window.location.hash when a category link is clicked.
To select all parents, it would be a simple matter of targeting the current item that is clicked, finding the parent list, and subsequently the link with the href of the current category (am I making sense, it gets a bit confusing when talking about parents and sub-sub children :P)