小说改编的网页游戏,斗破苍穹续集,神武八荒一颗小说

在這篇文章中，我想和大家分享我是如何為 web 原型化一個(gè) Sidenav 組件的，這個(gè)組件是響應(yīng)式的，有狀態(tài)的，支持鍵盤(pán)導(dǎo)航，可以使用和不使用 Javascript，并且可以跨瀏覽器工作。

10年積累的網(wǎng)站制作、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有高陵免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

構(gòu)建一個(gè)響應(yīng)式導(dǎo)航系統(tǒng)是很困難的。有些用戶使用鍵盤(pán)，有些用戶使用強(qiáng)大的臺(tái)式機(jī)，還有一些用戶使用小型移動(dòng)設(shè)備訪問(wèn)。每個(gè)訪問(wèn)者都應(yīng)該能夠打開(kāi)和關(guān)閉菜單。

在這次組件探索中，我很高興地結(jié)合了一些關(guān)鍵的網(wǎng)絡(luò)平臺(tái)特性：

我的解決方案只有一個(gè)側(cè)邊欄，只有在“移動(dòng)”視口為540px 或更小時(shí)才能切換。540px 將是我們?cè)谝苿?dòng)交互式布局和靜態(tài)桌面布局之間切換的斷點(diǎn)。

點(diǎn)擊這些鏈接會(huì)改變我們網(wǎng)頁(yè) URL 的散列狀態(tài)，然后用一個(gè)偽類來(lái)顯示和隱藏 Sidenav：

在過(guò)去，我只使用絕對(duì)或固定位置 Sidenav 布局和組件。不過(guò)，使用網(wǎng)格區(qū)域語(yǔ)法，可以為同一行或列分配多個(gè)元素。

主要的布局元素 #sidenav-container 是一個(gè)網(wǎng)格，它創(chuàng)建了 1 行和 2 列，其中 1 列被命名為 stack。當(dāng)空間受到限制時(shí)，CSS 會(huì)將所有

元素的子元素賦給同一個(gè)網(wǎng)格名稱，將所有元素放在同一個(gè)空間中，創(chuàng)建一個(gè)堆棧。

 
 
 
 
  
  
  
  #sidenav-container { 
  
  
  
      display: grid; 
  
  
  
      grid: [stack] 1fr / min-content [stack] 1fr; 
  
  
  
      min-height: 100vh; 
  
  
  
  } 
  
  
  
   
  
  
  
  @media (max-width: 540px) { 
  
  
  
      #sidenav-container > * { 
  
  
  
          grid-area: stack; 
  
  
  
      } 
  
  
  
  }

菜單背景

新聞中心

其他資訊