Home > Developer > Web Develop
Today on Weibo to see the code shared by others, to save themselves.
The code works as follows:
Here is the source code:
Index.html
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Cool practical CSS3 3D Vertical Accordion Menu Demo Demo</title> <Linkrel= "stylesheet"href= "Css/style.css"></Head><Body><Divclass= "Content"><Divstyle= "Text-align:center;clear:both"></Div>< Section> <ulclass= "Container anim-label-4 anim-art"> <Li><inputtype= "Radio"ID= "Ac-1"name= "Ac-3d"checked= "Checked"/><label for= "Ac-1"onclick=""title= "What is Accordion">What is Accordion</label><article><P>The Accordion is a Web control, allows, provide multiple panes and display them one at a time. It is the like have several collapsiblepanels where only one can being expanded at a time.</P></article></Li> <Li><inputtype= "Radio"ID= "Ac-2"name= "Ac-3d" /><label for= "Ac-2"onclick=""title= "Your Panel">Your Panel</label><article><P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu A. Ut enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi Ut aliquip ex ea commodo consequat. Duis aute irure dolor in Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur Sint Occaecat Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim ID est laborum.</P></article></Li> <Li><inputtype= "Radio"ID= "Ac-3"name= "Ac-3d" /><label for= "Ac-3"onclick=""title= "Who made this?">Who made this?</label><article><P>This is a example to create a accordion that have its 3rd panel.</P></article></Li> <Li><inputtype= "Radio"ID= "Ac-4"name= "Ac-3d" /><label for= "Ac-4"onclick=""title= "Overview">Overview</label><article><P>This script was created by Roodper. You can always follow me on<ahref= "Https://twitter.com/#!/roodper">Twitter</a>Or<ahref= "Https://www.facebook.com/Roodper">Facebook</a>.</P></article></Li> <Li><inputtype= "Radio"ID= "Ac-5"name= "Ac-3d" /><label for= "Ac-5"onclick=""title= "Notes">Notes</label><article><P>Remember This was just an example. There is more option and features is available in full version.</P><P>Check out video embedding inside accordion panel.</P><P><iframewidth= "100%"Height= "315"src= "HTTPS://WWW.YOUTUBE.COM/EMBED/K3L7PWRE-TW"frameborder= "0"allowFullScreen></iframe></P></article></Li> <Li><inputtype= "Radio"ID= "Ac-6"name= "Ac-3d" /><label for= "Ac-6"onclick=""title= "Notes">Notes</label><article><P>Remember This was just an example. There is more option and features is available in full version.</P><P>Check out video embedding inside accordion panel.</P><P><iframewidth= "100%"Height= "315"src= "HTTPS://WWW.YOUTUBE.COM/EMBED/K3L7PWRE-TW"frameborder= "0"allowFullScreen></iframe></P></article></Li> </ul></ Section></Div></Body></HTML>
Here is the style file:
Cool and practical CSS3 code vertical accordion Menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
