เว็บไซต์สไตล์เรียบง่ายแบบ FULLSCREEN ด้วย jQuery ปลั๊กอิน BookBlock


ก่อนหน้านี้ที่เราเคยเอาปลั๊กอิน BookBlock ของ jQuery โดยการสร้างเว็บให้มีการเปิดหน้าต่างพลิกไปมาคล้ายกับสมุดรูปแบบนี้จะเน้นที่ส่วนของ content ที่อยู่ภายในส่วนที่น่าสนใจคือมีการเพิ่มรูเมนูที่สามารถเลื่อนไลน์ออกมาจากทางด้านข้างของจอที่น่าสนใจและรูปแบบในการอกกแบบที่ง่ายๆไม่ซับซ้อนมากมายจึงทำให้ดูน่าสนใจใครที่ต้องการทำเว็บแนวใหม่ที่น่าสนใจและแน้น content เป็นจุดสำคัญนั้นเอง แต่น่าเสียดายที่จะแสดงผลใน IE ได้ไม่สมบูรณ์


ตัวอย่างโค้ด html ส่วนของการเพิ่มเมนูและ content ภายในเว็บ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="container" class="container">    
     <div class="menu-panel">
        <h3>Table of Contents</h3>
        <ul id="menu-toc" class="menu-toc">
            <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li>
            <li><a href="#item2">Why we die</a></li>
            <li><a href="#item3">The honeymoon</a></li>
            <li><a href="#item4">A drawing joke</a></li>
            <li><a href="#item5">Commencing practice</a></li>
        </ul>
    </div>
     <div class="bb-custom-wrapper">
         <div id="bb-bookblock" class="bb-bookblock">
             <div class="bb-item" id="item1">
                <div class="content">
                    <div class="scroller">
                        <h2>Self-destruction</h2>
                        <p>...</p>
                    </div>
                </div><!-- /content -->
            </div><!-- /bb-item -->
             <div class="bb-item" id="item2"><!-- ... --></div>
             <div class="bb-item" id="item3"><!-- ... --></div>
             <div class="bb-item" id="item4"><!-- ... --></div>
             <div class="bb-item" id="item5"><!-- ... --></div>
         </div><!-- /bb-bookblock -->
                 <nav>
            <a id="bb-nav-prev" href="#"></a>
            <a id="bb-nav-next" href="#"></a>
        </nav>
         <span id="tblcontents" class="menu-button">Table of Contents</span>
     </div><!-- /bb-custom-wrapper -->
 </div><!-- /container -->


โค้ดการเรียกใช้ font มาตรฐานของ google

1
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);


โค้ดการกำหนดค่าความสูงที่ 100% ในการแสดงผลของหน้าจอ

1
2
3
html {
    height: 100%;
}


โค้ดการกำหนดค่าความสูงความกว้าง โดยการใช้ padding

1
2
3
4
5
6
7
8
9
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก tympanus

Comments

comments

Powered by Facebook Comments