ทำเมนูเว็บไซต์แบบรองรับการทำงานสำหรับมือถือ

Published on: Jul 30 2013 by soraya
GoogleNexusWebsiteMenu


ในยุคของ Smart Device ที่มาแรกในตอนนี้เราคงหลีกเลี่ยงมันไม่ได้อย่างแน่นอนและเราคงได้เห็นหลายเว็บไซต์ดังๆต่างๆเริ่มมีการที่จะมีการพัฒนาเว็บไซต์ให้สามารถเข้าใช้งานได้ทุก Smart Device โดยเฉพาะ Smart Phone ที่มีหน้าจอขนาดที่จำกัดอย่างมากแต่นักพัฒนาจะต้องคำนึงถึงว่าเราจะนำเสนอเว็บไซต์ของเราอย่างไรให้ดูน่าสนใจและใช้งานที่ง่ายกับหน้าจอที่จำกัด วันนี้ผมเลยเอาเรื่องของการพัฒนาเว็บไซต์ที่ลองรับการใช้งานในแบบ Mobile

photo (2)
จากที่เห็นตัวอย่างในส่วนของ DEMO ถ้าเราลองเข้าไปใช้งานในรูปแบบ Mobile เราจะเห็นว่ามีการปรับเมนูไปอยู่ด้านข้างให้ง่ายต่อการใช้งานเมื่อไม่ใช้งานก็สามารถเก็บไปได้นี้เป็นอีกรูปแบบที่เว็บไซต์แบบ Mobile ได้นำมาใช้งานกันอย่างมากมายนั้นเอง หรือถ้าใครเคยเข้าเว็บไซต์ของ Nexus ก็จะคุ้นกันดีนั้นเอง


โค้ด nav CSS

1
2
3
4
5
6
7
8
9
10
11
<ul id="gn-menu" class="gn-menu-main">
    <li class="gn-trigger">
        <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
        <nav class="gn-menu-wrapper">
            <!-- ... -->
        </nav>
    </li>
    <li><a href="http://tympanus.net/codrops">Codrops</a></li>
    <li><!-- ... --></li>
    <!-- ... -->
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="gn-scroller">
    <ul class="gn-menu">
        <li class="gn-search-item">
            <input placeholder="Search" type="search" class="gn-search"/>
            <a class="gn-icon gn-icon-search"><span>Search</span></a>
        </li>
        <li>
            <a class="gn-icon gn-icon-download">Downloads</a>
            <ul class="gn-submenu">
                <li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
                <li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
            </ul>
        </li>
        <li><a class="gn-icon gn-icon-cog">Settings</a></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /gn-scroller -->

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

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



Comments

comments

Powered by Facebook Comments

Filed under: CSS, HTML, jQuery
Tags: , , ,