Description:
In the previous version of the LSX Tour Operator plugin, the single post pages (e.g., Single Tour, Single Accommodation, Single Destination, etc.) featured an anchored secondary menu. This menu allowed users to navigate through different sections of the page (e.g., itinerary, reviews, details) via anchor links.
We want to improve the mobile experience by transforming the anchored secondary menu into collapsible sections. This will optimize the UI for mobile devices, ensuring that users can easily access the content without excessive scrolling.
Expected Behavior:
- Desktop/Tablet: The secondary menu remains as a fixed, anchored menu on the page, allowing users to click on links to jump to various sections.
- Mobile:
- The anchored menu is hidden or transformed into collapsible sections.
- Each section of the page (e.g., Itinerary, Reviews, Details) will be enclosed in a collapsible panel.
- Collapsible sections should be closed by default. When a user taps on a section header, the section expands to reveal the content. If another section is opened, the previous section should collapse.
- Smooth scrolling and animations should be used to improve the overall user experience.
Pages Affected:
- Single Tour (e.g.,
/tour/{tour-slug})
- Single Accommodation (e.g.,
/accommodation/{accommodation-slug})
- Single Destination (e.g.,
/destination/{destination-slug})
- Single Review (e.g.,
/review/{review-slug})
- Single Team (e.g.,
/team/{team-slug})
- Single Special (e.g.,
/special/{special-slug})
Mobile View Design Considerations:
- The design should prioritize ease of use and minimize the need for scrolling on mobile.
- The header of each collapsible section should be clearly visible and large enough for easy tapping on mobile.
- Ensure accessibility compliance (e.g., WCAG 2.1 standards) by adding focus states and ensuring all interactive elements are reachable via keyboard.
Visual Example:
An example can be found on the old demo site:
References
Core Plugin:
Extensions:
Designs
Reference Links
Design Screenshots
Description:
In the previous version of the LSX Tour Operator plugin, the single post pages (e.g., Single Tour, Single Accommodation, Single Destination, etc.) featured an anchored secondary menu. This menu allowed users to navigate through different sections of the page (e.g., itinerary, reviews, details) via anchor links.
We want to improve the mobile experience by transforming the anchored secondary menu into collapsible sections. This will optimize the UI for mobile devices, ensuring that users can easily access the content without excessive scrolling.
Expected Behavior:
Pages Affected:
/tour/{tour-slug})/accommodation/{accommodation-slug})/destination/{destination-slug})/review/{review-slug})/team/{team-slug})/special/{special-slug})Mobile View Design Considerations:
Visual Example:
An example can be found on the old demo site:
References
Core Plugin:
Extensions:
Designs
Reference Links
Single Tour Stick Bar and Mobile Designs
Single Accommodation Sticky Bar with Mobile Designs
Design Screenshots