5490 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Ok I am creating some weird code, some may say I am nuts. But here goes.

The Concept

I have a ul / li list of items, that when clicked open respective pages. However I am creating a category page, that I want users to be able to refine their criteria on the fly.

Check this image ( very basic )

How I want it to work

My URL structure is like this. www.domain.com/pears/all/

which can be drilled down to…
  • www.domain.com/pears/uk/
  • www.domain.com/pears/usa/
  • www.domain.com/pears/china/
  • www.domain.com/pears/brazil/

etc etc.

What I want to do is, on page load. Show the ul li list of items, that they can select, with a select option / dropdown select box on the right, which is unusable until they make a selection.

When they make their selection, lets say pears the dropdown box becomes usable. With the options shown in the drop down image.

So the UX is like:

User Clicks Pears

Dropdown box, propagates with the options for PEARS ( drilldown ) the format is the same for every item.

URL path so far is www.domain.com/pears/

User then clicks on say USA

URL path is www.domain.com/pears/usa/ which onclick takes user to that page.

Any suggestions or anyone fancy attempting this. Prefer PHP with a smidgen of JS where required.

Ste

5490 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

To add, would prefer that the select option / dropdown portion is actually hidden until user makes a selection from the LIST.

1449 posts
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Had an item featured in an Envato Pack
+3 more
WebSmacker says

I threw this together, but may be more javascript than you are wanting. Check it out and if you like, I’ll finish it off by hiding the second dropdown and coding the onclick.

http://websmacker.com/testing.php
5490 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

I threw this together, but may be more javascript than you are wanting. Check it out and if you like, I’ll finish it off by hiding the second dropdown and coding the onclick. http://websmacker.com/testing.php

Yeah that is kind of it. The issue is, I can send you the url privately so you can see what I am trying to achieve. But the first selection needs to be a ul li list to propagate the select drop down ( drill ) , which then user can submit etc..

Cheers for that, we have used something similar ( dynamic selects ) on another site of ours, but I havent been able to nail it from a ul li list.

I will email you ( via your profile ) the site link.

Ste

1449 posts
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Had an item featured in an Envato Pack
+3 more
WebSmacker says

Ok, I updated it accordingly. http://websmacker.com/testing.php

5490 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

ust back, awesome thankyou :) I owe you one, will have a bash at your logo later to say thanks :)

1449 posts
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Had an item featured in an Envato Pack
+3 more
WebSmacker says

no problem! Glad I could help :)

by
by
by
by
by
by