The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Building a dynamic horizontal menu with a slideshow part

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #43705


    What I’m looking for with this post is some guidance to point me in the right direction since the problem I’m facing is quite complex. I will do my best to explain it.

    I’m building a website on Umbraco that deals with animals. It will have more and more species added to it over time (by the editors) and it needs to have a dynamic growing menu to access them all. This menu will have two parts: a horizontal list with the species’ names and bellow it a slide show that shows an image and a text corresponding to the currently selected species.

    Currently I get the contents of the menu by iterating through the nodes of the content tree and create a simple unordered list with the names of the species. I then iterate again and I get the corresponding image and text. I do both separate so I can get the list isolated. I have a codepen example here:

    In here we can see that the list is horizontal as wanted. Now I need to make all but the first image/highlight combo “disappear” and only show when the user clicks the appropriate list item. The image/highlight combos should be appearing from the sides of the one that is being shown much like a slide show.

    I’m thinking i will have to use JavaScript to do the linking between the list item clicked and the image/highlight combo that it corresponds to. Am I in the right track or could it be done purely with CSS?

    About hiding the image/highlight combos, shall I just use the hidden property on them and then make them appear? Or should I make the slider width limited and place them “off-screen”?

    Thank you.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.