CSS3: ตัวอย่างการ เปิด-ปิด [toggle] การแสดงผลโดยไม่ใช่ JQuery

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 26206
Joined: 31/03/2014 10:02 am
Contact:

CSS3: ตัวอย่างการ เปิด-ปิด [toggle] การแสดงผลโดยไม่ใช่ JQuery

Post by thatsawan »

2015-01-18_18-47-40.png
2015-01-18_18-47-40.png (94.69 KiB) Viewed 551 times
2015-01-18_18-48-13.png
2015-01-18_18-48-13.png (138.19 KiB) Viewed 551 times

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <style>
        * { // กำหนดคุณสมบัติของทั้งหมดในหน้าเพจ กำหนด font
          margin:0;
          padding:0;
          font-family:"Helvetica Neue", Helvetica, Sans-serif;
          word-spacing:-2px;
        }
        h1 {
          font-size:40px;
          font-weight:bold;
          color:#191919;
          -webkit-font-smoothing: antialiased;
        }
        h2 { 
          font-weight:normal;
          font-size:20px;
          color:#888;
          padding:5px 0;
        }
        .message { // คุณสมบัติของข้อความที่ซ่อน
        background:#181818;
        color:#FFF;
        position: absolute;
        top: -250px;
        left: 0;
        width: 100%;
        height: 250px;
        padding: 20px;
        transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
        overflow: hidden;
        box-sizing: border-box;

        }
        .message h1 { // สีตัวอักษรของข้อความที่ซ่อน
          color:#FFF;
        }
        #toggle { // ปิดการแสดง  checkbox
          position:absolute;
          appearance:none;
          cursor:pointer;
          left:-100%;
          top:-100%;
        }
        #toggle + label { // สร้างเมนู 
          position:absolute;
          cursor:pointer;
          padding:10px;
          background: #26ae90;
        width: 100px;
        border-radius: 3px;
        padding: 8px 10px;
        color: #FFF;
        line-height:20px;
        font-size:12px;
        text-align:center;
        -webkit-font-smoothing: antialiased;
        cursor: pointer;
          margin:20px 50px;
          transition:all 500ms ease;
        }
        #toggle + label:after {
          content:"Open" // ข้อความที่จะให้แสดงใน เมนู
        }
        .container { // เลื่อนข้อความ เพื่อแสดงข้อความที่ซ่อนอยู่
        transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
          padding:5em 3em;
        }
        #toggle:checked ~ .message { 
          top: 0;  // ตอนคลิกที่เมนู แสดงส่วน message  ตำแหน่ง top
        }
      #toggle:checked ~ .container {
          margin-top: 250px; // เมื่อคลิก ข้อความที่ปรากฏครั้งเเรก ให้มาเเสดงที่ตำแหน่งด้านล่าง
        }
        #toggle:checked + label {
          background:#dd6149; // เมื่อคลิก เมนูจะเปลี่ยนสี
        }
        #toggle:checked + label:after {
          content:"Close" //เมื่อคลิก ให้แสดงข้อความนี้ ที่เมนู
        }
        </style>   
    <input type="checkbox" name="toggle" id="toggle" />
    <label for="toggle"></label>
    <div class="container"> 
     <h1>การสร้างเมนู เปิด-ปิดการแสดงผล โดย CSS3</h1>
     <h2> เมื่อทำการคลิก เมนูจะทำการเปิดข้อความที่ซ่อนการแสดงผลอยู่</h2>
    </div>
    <div class="message"><h1>ข้อความนี้เป็นข้อความที่เราจะซ่อนการแสดงผล</h1>
    <h2>คลิกอีกครั้ง เพื่อปิดการแสดงผล</h2>
  </div>
    </body>
</html>
** เมนูที่คลิก จะใช้ type="checkbox"
2015-01-18_18-17-12.png
2015-01-18_18-17-12.png (42.01 KiB) Viewed 551 times
Attachments
2015-01-18_18-45-21.png
2015-01-18_18-45-21.png (30.54 KiB) Viewed 551 times

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests