December 2014
Intermediate to advanced
416 pages
5h 33m
Chinese
Content preview from Responsive Web Design 響應式網頁設計學習手冊
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
10. 導覽與標頭配置
|
325
不過，很多設計者質疑這種導覽的可用性，雖然它好像輕易地壓縮
導覽項目清單，但可能讓使用者感到有點迷惑，因為它使用了使用
者通常只會在表單中看到的表單元素。就我個人而言，我不建議這
種導覽方式，但許多網站都在使用這種導覽。
為了編程這種 select 選單瀏覽，你為網站的導覽選單建立兩組獨立
的 HTML — 建置下拉選單的
<select>
元素，以及針對較寬螢幕之
水平導覽的
<ul>
。網站利用媒體查詢，根據螢幕寬度隱藏其中一組
HTML。
這樣做的缺點是必須為導覽準備兩組獨立的 HTML，除了增加頁面
重量，這也表示，你總是得確認任何改變都必須被應用在這兩組程
式碼片段，不管使用者看見哪一種導覽，選單內容都必須是相同的。
在 select 選單與一般導覽之間作切換的另一種方式是利用
JavaScript。jQuery Responsive Menu Plugin（
https://github.com/
mattkersley/Responsive-Menu
）與 SelectNav.js（
http://lukaszfiszer.
github.io/selectnav.js/
）皆是利用 jQuery 將
<ul>
或
<ol>
改變成
<select>
的插件。
FLYOUT 導覽
Emeril's Restaurant 網站具有複雜的導覽，但是設計者處理得相當
不錯。
這個網站具有所謂的
yout
導覽
或
off-canvas
導覽
，如圖 10-34 所
示。當你點擊頂端的導覽圖示時，導覽從螢幕左邊突然跑出來（fly
out），並且把內容推向右邊。這種 flyout 導覽甚至包含子導覽項目，
你可以透過點擊箭頭而到達子導覽項目，子導覽項目將其他導覽項
目往下推 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.