I need help with creating a section of a webpage

It is a UL section containing 9 list item (primary) when mouseover to the highlighted area it changes
this site contain the said section i am working on It is a reference site
I am actually creating a replica of this site for my project

doubt 526x500](upload://8E2fNZnCOv0ceaNXF8LRTfux9Lh.jpeg) this is the primary section marked with highlights is the area which changes when mouseover it
doubt0172x500](upload://5IdME8Y4KzifKtflaVImI8UPMQQ.jpeg) the second image have the first list item when mouseover the - sign changes to + and an inner list dropdown
doubt01259x500](upload://wHOTRKHx5dxR2cSSt8ACi800FXw.jpeg)the last image also contain the same thing with the sign reversed

Only use :HTML,CSS JavaScript & (Bootstrap if needed) No Jquery or any other JS frameworks are not applicable
Please Help me out !!!Preformatted text

Please provide a link to your live project so we can see what you have so far.

you can ‘inspect’ the page in chrome and see its styles, namely the ul you speak about. The mouseover only applies on the little sign button, which swaps between ‘-’ and ‘+’, which i find a bit clunky, id rather make it apply for the whole label. The ul has a display of block when its shown and display: none when hidden. The short animation applies some inline styles for the ul, which gradually increase/decrese for the animation span, the main attributes being width, height and opacity. When the ul is hidden and you hover over the sign, it becomes block and its height and width slowly increase, until the animation is over(im not even sure its actual animation, it could be pure JS too) and it reaches its complete size. Its opacity also builds up. When you hover again on the sign to hide the ul, the same attributes decrease in reverse. Id rather make the hide effect when your mouse leaves the ul body.
PS: transition is good way to make attributes apply gradually. For example if you add width to the transition properties, when you change the element width, it will be done so over the given period of time and there are additional specifications you can work with

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.