Home > Developer > Web Develop
<! DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3 appearance Beautiful Fade tab menu Demo</title> <link rel="stylesheet" href="Css/style.css" Media= "Screen" type="Text/css" /> </head> <body> <div Style="Text-align:center;clear:both;" > <script src="/gg_bd_ad_720x90.js" type="Text/javascript"> </script> <script src="/follow.js" type="Text/javascript " ></script> </div> <article class="tabs"> <input checked id="One" name="tabs" type ="Radio"> <label for ="one">Tab One</label> <input id="Both" name= "tabs" type="Radio " Value="Both"> <label for ="both">Tab</label> <input id="three" name="tabs" type= "Radio"> <label for ="three">Tab Three</label> <input id="Four" name= "tabs" type="Radio" > <label for =' four '>Tab Four</label> <div class="Panels"> <div class="Panel"> <h2>This is Panel one</H2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. sed nec quam sit amet lorem volutpat ullamcorper ut Sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a DUI.</P> <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur ID nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</P> <p>Nam sodales, MI eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac Fringilla at, Malesuada in Eros.</P> </div> <div class="Panel"> <h2>This is a Panel of</H2> <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur ID nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</P> <p>Nam sodales, MI eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac Fringilla at, Malesuada in Eros.</P> </div> <div class="Panel"> <h2>This is Panel three</H2> <p>Nam sodales, MI eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac Fringilla at, Malesuada in Eros.</P> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. sed nec quam sit amet lorem volutpat ullamcorper ut Sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a DUI.</P> <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur ID nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</P> </div> <div class="Panel"> <h2>This is a Panel four</H2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. sed nec quam sit amet lorem volutpat ullamcorper ut Sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a DUI.</P> <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur ID nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</P> </div> </div> </Article> </body></html>Body { font-family: Cambria, Arial; background: #333; } . Tabs { width: %; max-width: px; Border: 1px solid black; margin: px Auto; } input { opacity: 1; } label { cursor: pointer ; background: Yellow ; color: Red ; Border-radius: 5px 5px 0 0 ; padding: 1.5% 3 ; float: Left; margin-right: 2px ; font: italic 1em Cambria ;} label: Hover { background: Blue; } input: Checked+label { background: palegreen; color: blueviolet; } . Tabs input: Nth-of-type (1): Checked~. Panels . Panel: First-child,. Tabs input: Nth-of-type (2): Checked~. Panels . Panel: Nth-child (2),. Tabs input: Nth-of-type (3): Checked~. Panels . Panel: Nth-child (3),. Tabs input: Nth-of-type (4): Checked~. Panels . Panel: Last-child { opacity: 1; -webkit-transition: . 9s; } . Panels { float: Left; Clear: both ; position: relative ; width: % ; background: #fff ; Border-radius: 0 px Ten px; min-height: 315px ;} . Panel { width: % ; opacity: 0 ; position: Absolute ; background: #fff ; Border-radius: 0 px Ten px; padding: 4 ; box-sizing: border-box ;} . Panel H2 { margin: 0; font-family: Arial; }The best pure CSS in history tab tab, Flash your dog eyes
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
