pop up side panel with select dropdown listbox

Hi there,

I'm not sure I fully visualize the idea (Looks, animation, general behavior, etc).

Do you have any sites having this feature so we could have a better idea of what to replicate? Let us know.

Figma or Adobe XD mockups would help as well.

Let us know.

Hi Elvin, Can't send anything at the moment.
Guess I'm asking how to create a pop out side panel and how to populate it with html elements.
Can you point me to any examples?
Thanks for your help

Hi there,

will this be required on Desktop and Mobile ?

Hi David,
Ideally I'd like it to work on both desktop and mobile, but I'm happy with a desktop only solution if that's simpler (baby steps first) and maybe use a different solution for mobile.
Thanks for your help

For desktop only you can enable the Off Canvas Panel:

https://docs.generatepress.com/article/off-canvas-panel-overview/

It has its own Widget area so you can add anything you want using Widgets.

Thanks David, I'll give it a try.
See in the link you sent it says:

You can choose to activate your off canvas panel on mobile, desktop, both or disable it completely.

Is this correct?

Thanks

Hi, need a little help with this.
I want to add the following content to the pop out side panel:

  	<div class="select-name">
      <h1 class="sub-ttl">
         Search Plants by:
      </h1> 
       <label for="wpv-botanical-name">Botanical Name</label>
         <select required id="bot" onchange="window.location.href=this.value" name="wpv-botanical-name">
         <option value="" disabled selected hidden>Click, then select plant from list</option>
                 [xyz-ihs snippet="select-options-botanical-name"]
        </select>
       <label for="wpv-english-name">English Name</label>
         <select required onchange="window.location.href=this.value" name="wpv-english-name">
           <option value="" disabled selected hidden>Click, then select plant from list</option><br/>
      [xyz-ihs snippet="select-options-english-name"]
      </select> 
       <label for="wpv-arabic-name">Arabic Name</label>
         <select class="rtl-lan" required onchange="window.location.href=this.value" name="wpv-arabic-name">
           <option value="" disabled selected hidden>Click, then select plant from list</option><br/>

         [xyz-ihs snippet="select-options-arabic-name"]
      </select>  
       <label for="wpv-hebrew-name">Hebrew Name</label>
         <select class="rtl-lan" required onchange="window.location.href=this.value" name="wpv-hebrew-name">
           <option value="" disabled selected hidden>Click, then select plant from list</option><br/>
        [xyz-ihs snippet="select-options-hebrew-name"]
      </select> 
    </div>

This is 4 dropdown select boxes that also appear on the left side of the home page
https://florapalaestina-ethnobotany.org/
How would I do that? Newbee need detailed instructions
Thanks

ok added code to custom html widget for off canvas panel.
Is it possible to see magnifying glass icon on left of specific page where I want the side panel instead of the hamburger icon site wide on main menu? - don't want this on every page!

Thanks

Can you link us to the page in question?

Hi Leo,
Here it is: https://florapalaestina-ethnobotany.org/?plant=Allium-ampeloprasum/
Sorry, I need to spend more time on the documentation - sure it's all explained there.
Appreciate your help

Are you referring to the navigation search?

I checked a few pages and don't see it.

I'm referring to the hamburger icon on the right in the main menu:
on this page https://florapalaestina-ethnobotany.org/ and every other page.
The popup panel is ok but it's a search panel so I'd like a magnifier icon and the panel just needs to open on the plant page: https://florapalaestina-ethnobotany.org/?plant=Alhagi-graecorum/

Thanks for your help

Ok just to confirm, the requirements here are:

- Switch the hamburger icon to the search icon.

- Hide the search icon on all pages except that one plant page:
https://florapalaestina-ethnobotany.org/?plant=Alhagi-graecorum/

How would this work on mobile?

Hi Leo,
Thanks for your reply.

Yes I'd like the search icon instead of hamburger, and preferably positioned on the left of the page, rather than in the main menu.

I need it on all plant custom post pages - as the panel contains search lists of plant names.

Don't need this to work on mobile.

Thanks