Tagged: Accordion
-
AuthorPosts
-
October 4, 2019 at 6:56 am #1144886
We have a dictionary on our page and I would like to improve the navigation and view. I was thinking about changing to one accordion module for each letter in the dictionary. In addition, I would like to have a navigation option that makes it faster to scroll to the letter you are looking for, for instance “S”. For instance something that gives similar functionality as in the contacts in my cellphone, where I have the letters in the right of the screen. Do you have any advice for how to implement a suitable navigation in the dictionary? I see that you have sortable accordion, maybe that would be the best? Alternatively, on desktop I think I could use a fullwidth sub-menu, which is handy because it is fixed at the top. But what on cellphone, would you recommend any navigation within the dictionary in additional to scrolling?
October 5, 2019 at 3:38 pm #1145289Hey guttogjente,
You might want to consult with the UX designer on the matter, I am not sure even that the accordion will do the job for you.
Best regards,
VictoriaOctober 7, 2019 at 3:56 am #1145602Thanks for the reply, Victoria! A UX designer would be great, but because we are an NGO with limited budget I try to do most of the work myself as an volunteer.
I noticed that the navigation arrows to next and previous item is missing on my iPhone, but is present at computer for our glossary (see example). Do you know why?
Why don’t use the sortable accordion? In my opinion the benefit would be to reduce the number of times the user need to load a new page, since most users are on cellphone.
As alternativesI found a plugin called CM Tooltip Glossary (see example), which might be an option. I am also considering to change to the Divi theme and make the dictionary in Divi, who has a design option for his with dotted navigation in the side that can be changed to letters.
October 11, 2019 at 8:05 pm #1147230Hi guttogjente,
The arrows are hidden by design. Here is how you can have them back:
@media only screen and (max-width: 767px) { .responsive #top .avia-post-nav { display: block; } }
Well, you can try the sortable accordion and see how it works for you.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.