รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

Cross Browser Pure CSS3 Vertical Accordion


สอน CSS
> Cross Browser Pure CSS3 Vertical Accordion


หลังจากที่แจก CSS3 Code ในแบบ Pure CSS3 Horizontal Accordion ไปแล้วในบทความก่อนหน้านี้ คราวนี้ก็มาแจกโค๊ด Accordion ในแบบแนวนอนบ้างหรือ Pure CSS3 Vertical Accordion ซึ่งก็มีลักษณะค้ลายๆ กันแต่ Horizontal Accordion นั้นจะเลื่อนแท็บไปด้านข้าง แต่ Vertical Accordion นัั้นจะเลื่อนแท็บลงด้านล้างนั้นเอง และก็เหมือนเดิมครับ เราสามารถนำโค๊ดนี้ไปใช้งานได้เลย โดยไม่ต้องเสียเวลามานั่งเขียน CSS3 เอง
Pure CSS3 Vertical Accordion

View Demo Now Download Files

Accordion Markup

  • Heading 1

    Content For Panel 1.
  • Heading 2

    Content For Panel 2
  • Heading 3

    Content For Panel 3.
  • Heading 4

    Content For Panel 4

    Styling Accordion Structure
    .verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    width: 500px;
    }
    .verticalaccordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    height:40px;
    width: 500px;
    /* Decorative CSS */
    background-color:#f0f0f0;
    }
    .verticalaccordion>ul>li>h3 {
    display:block;
    margin: 0;
    padding:10px;
    height:19px;
    /* Decorative CSS */
    border-top:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background: #cccccc;
    }
    .verticalaccordion>ul>li>div {
    margin:0;
    overflow: auto;
    padding:10px;
    height:220px;
    }

    ที่มา : http://www.w3avenue.com/2010/04/02/cross-browser-pure-css3-vertical-accordion/
    http://www.css3.in.th/2010/05/pure-css3-vertical-accordion/


    Short URL click!
    << กลับคืน : เข้าชม 3,687 ครั้ง : ขึ้นไปด้านบน

    รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
    สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/