Product Manager's boutique case: accordion menu

four thousand four hundred and sixty-nine Unauthorized reproduction is prohibited
product manager JDK8 Prototype design Axure Product prototype Interaction design user interface Element push and pull Dynamic Show Hide Interface layout
This video case mainly demonstrates how to create a menu with accordion effect, and realize dynamic display and hiding of content through user interaction. Through color modification and text editing of rectangular components, three different menu items are formed, and each menu corresponds to the corresponding content display. Through practical demonstration, the video guides the audience how to set the display status of each menu item, and how to use the push and pull function of components to realize dynamic changes of the interface when clicking. In addition, an interactive mode that only displays the menu when the page is loaded and launches the corresponding content after clicking is also discussed. This video is suitable for developers who are interested in user interface design and Jiaoyun interaction, especially those who want to improve the user experience and master the layout of dynamic interface effects.
discuss {{interaction.discussNum ? '(' + interaction.discussNum + ')' : ''}}
 ad
release
 head portrait

{{ item.user.nick_name }} {{ EROLE_NAME[item.user.identity] }}

Topping note
 Discussion Chart
{{ item.create_time }} reply
  • delete

    Are you sure to delete?

    confirm
    cancel
  • {{item. is_top==1? 'Cancel topping': 'topping'}}

    The discussion that has been set to the top, do you want to replace the existing one?

    confirm
    cancel
{{ tag.text}}
 head portrait
{{ subitem.user.nick_name }} {{ EROLE_NAME[subitem.user.identity] }}
{{ subitem.create_time }} reply
delete

Are you sure to delete?

confirm
cancel
release
{{pageType==='video '?' The discussion area grabs the sofa, and you can get double credits': 'The discussion area is empty, please say two sentences~'}}
release
{{tips.text}}
{{ noteHeaderTitle }} note {{hasMyNote? 'My notes':' Take notes'}}
{{hasMyNote? 'My notes':' Take notes'}}
Quality Notes
Updated on: {{$dayjs. format ('YYYY-MM-DD HH: mm: ss', item.last_uptime*1000) }}
 head portrait
{{ detail.username }}

Public notes are visible to others and have the opportunity to be rated as "high-quality notes" by the administrator

{{ noteEditor.content.length }}/2000

Public Notes
preservation
 Lecturer
TA's video
Next play:
Automatic continuous broadcast