Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产综合亚洲精品一区,色偷偷亚洲偷自拍,久久精品国产精品青草色艺 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          用HTML、CSS 和 JS 構建一個響應式導航欄菜單-教程
          
        
           
          
	
	
          
		
                        
          5自適應是現在主流的技術，導航欄菜單是最常見的一種，今天我們一起來學習一下它是如何使用HTML，CSS和JavaScript來構建響應式導航欄和漢堡菜單的。
          這就是它的樣子，是不是很熟悉呢？
          H5導航菜單
          好的，那就先從HTML開始：
          <header class=”header”>
<nav class=”navbar”>
<a href=”#” class=”nav-logo”>WebDev.</a>
<ul class=”nav-menu”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Services</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Blog</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>About</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Contact</a>
</li>
</ul>
<div class=”hamburger”>
<span class=”bar”></span>
<span class=”bar”></span>
<span class=”bar”></span>
</div>
</nav>
</header>
          通過這些代碼，我們實現了：
          • 給header標簽指定名為header的CSS類的，可以作為導航菜單的容器。
          • 給nav標簽指定名為navbar的CSS類。
          • 具有nav-logo類的鏈接
          • 具有nav-menu類的ul
          • 在ul內部，我們有4個具有nav-item類的li
          • 在每個nav-item中，都有一個包含nav-link類的鏈接
          • 至于漢堡菜單，我已在代碼中添加了一個具有hamburger類的div，且此div中有3個帶bar類的span
          以上就是我們需要的HTML代碼。
          現在讓我們添加CSS樣式重置代碼
          （此外，我們將導入所需的字體，并添加一些基本的CSS來重置所有的默認樣式。）
          @import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 62.5%;
font-family: ‘Roboto’, sans-serif;
}

li {
list-style: none;
}

a {
text-decoration: none;
}
          現在讓我們給每個元素逐個添加樣式：
          header和navbar：
          .header{
border-bottom: 1px solid #E2E8F0;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}

          hamburger樣式：
          .hamburger {
display: none;
}

.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}

          其他元素的基本樣式：
          .nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-item {
margin-left: 5rem;
}

.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}

.nav-link:hover{
color: #482ff7;
}

.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}
          完成這些之后，看起來應該是這樣的：
          但是它不是響應式的，所以我們還需要添加媒體查詢css代碼。
          @media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}

.nav-menu.active {
left: 0;
}

.nav-item {
margin: 2.5rem 0;
}

.hamburger {
display: block;
cursor: pointer;
}

}

          這里媒體查詢就是通過設置position: fixed; left: -100%;來隱藏nav-menu。
          此外，我們將hamburger設置為display: block;，所以現在可見。
          我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設置left: 0;。現在，到了添加javascript的時候了，以便在我們單擊漢堡菜單時，會在nav-menu上添加此active類。
          添加JavaScript
          const hamburger = document.querySelector(“.hamburger”);
const navMenu = document.querySelector(“.nav-menu”);

hamburger.addEventListener(“click”, mobileMenu);

function mobileMenu() {
hamburger.classList.toggle(“active”);
navMenu.classList.toggle(“active”);
}

          此處的函數mobileMenu()在hamburger和nav-menu上也添加了一個active類，從而打開mobile menu。單擊hamburger時，我們可以使用hamburger上的active類來創建X動畫。現在就開始做吧。
          // Inside the Media Query.

.hamburger.active .bar:nth-child(2) {
opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
          現在看起來應該是這樣的：
          但是有一個問題，當我們單擊鏈接時，漢堡菜單不會關閉。現在讓我們解決一下這個問題。
          const navLink = document.querySelectorAll(“.nav-link”);

navLink.forEach(n => n.addEventListener(“click”, closeMenu));

function closeMenu() {
hamburger.classList.remove(“active”);
navMenu.classList.remove(“active”);
}
          closeMenu()函數從nav-menu和hamburger中刪除active類，從而關閉mobile menu。
          H5導航菜單就是這樣，實現了用HTML，CSS和javascript構建一個響應式的導航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。
           更多干貨等著你~ 點贊、分享，關注哦
          輯導語：Web后臺的菜單欄通常用來展示產品的整體功能導航，是最常用的Web組件之一，PM一定要了解并學會它的原型畫法。本文仔細介紹了用Axure畫出Web后臺產品的菜單欄組件的步驟與注意要點，希望對你有所啟發。
          我們先來看下Web菜單欄的原型交互效果，詳見下圖或者訪問原型https://kgnha1.axshare.com
          由于菜單欄比較常用并且畫起來比較麻煩，建議產品經理根據本文的原型步驟制作一份菜單欄rp源文件，方便后續多個項目使用。
          仔細查看上圖原型，會發現包含以下這些交互用例，接下來作者會詳細講解每一步如何通過Axure RP 9畫出來。
          1. 默認展開左側菜單的二級頁面
          2. 處于某一頁面的時候，對應菜單項都會處于選中狀態并呈現不同的樣式。
          3. 點擊一級分類即可收起對應的二級頁面，再次點擊即可展開。
          4. 默認進入首頁，同時首頁對應的菜單處于選中狀態。此時所有菜單處于展開狀態。
          菜單欄通常有2級結構，第一級菜單是分類，第二級菜單是頁面。一般位于頁面左側，并且是每個頁面都有它。
          01 畫出無交互原型
          1、先畫首頁文字。從默認元件庫中拖動“矩形1”到工作區合適位置，修改尺寸為(160,40)，雙擊輸入文字表示首頁，字號修改為16px，左側對齊然后左側邊距修改為40px。
          2、再畫首頁圖標。從默認元件庫中拖動“圖片”到矩形中合適位置，尺寸修改為(20,20)，樣式點擊“調整顏色”圖標，勾選調整顏色，飽和度拖動到最左邊變成0。
          3、再畫首頁文字的選中樣式。右鍵點擊交互樣式，切換到選中狀態，然后勾選字色然后輸入藍色#0000FF，點擊“確定”按鈕。
          4、再畫首頁圖標的選中樣式。右鍵點擊交互樣式，切換到選中狀態，然后勾選圖像濾波，點擊“確定”按鈕。
          5、再畫一級分類。方法同上述4步。
          6、再畫二級頁面。方法步驟同1和3，除了字號保持默認。根據需要復制多份二級頁面。
          7、復制多份一級分類和二級頁面。
          8、在左側頁面區域，添加文件夾來作為一級分類，添加頁面來作為二級頁面。然后右鍵分類名稱-重復-分支來快速復制。
          9、同時選擇所有的菜單欄元件和頂部導航組件，然后右鍵點擊“轉換為母版”，然后命名為“菜單欄”。
          10、在左側母版區域，右鍵母版“菜單欄”，點擊“添加到頁面中…”然后點擊“全選”，勾選“置于底層”，最后點擊確定。
          11、生成原型HTML并查看原型效果。
          02 畫出有交互原型
          12、先畫進入首頁的交互。雙擊母版“菜單欄”進入，選擇首頁，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“打開鏈接”，鏈接到“首頁”，點擊“確定”按鈕。(需要提前選擇首頁文字&首頁圖標并右鍵設為組合并命名為首頁)
          13、再畫每個頁面的交互。右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“打開鏈接”，鏈接到“對應的頁面”，點擊“確定”按鈕。
          14、再畫一級分類的交互。同時選擇分類名稱&分類圖標并右鍵設為組合并命名為一級分類；同時選擇多個頁面名稱并右鍵設為組合并命名為二級頁面。
          然后點擊組合“一級分類”，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“顯示/隱藏”，目標選擇組合“二級頁面”，操作選擇“切換”，點擊更多選項然后設置“展開收起”，點擊“確定”按鈕。(同理設置其他一級分類的交互。注意組合需要單獨命名，方便選擇目標)
          15、設置首頁載入的交互。進入頁面“首頁”，點擊空白區域，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“頁面載入時”，添加動作“設置選中”，目標選擇組合“首頁”，點擊“完成”按鈕。
          16、設置頁面載入的交互。進入頁面“頁面名稱”，點擊空白區域，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“頁面載入時”，添加動作“設置選中”，目標選擇“頁面名稱”，點擊“完成”按鈕(注意需要提前命名頁面名稱來方便選擇目標)
          17、生成原型HTML并查看原型效果。
          總結
          如果頁面特別多，可以采用三級菜單欄，即第一級菜單是分類，第二級菜單是分類，第三級菜單是頁面。
          另外Axure左側頁面結構中也需要以相應的分類名稱頁面名稱進行使用，方便開發和測試理解。
          #相關閱讀#
          Axure教程：制作APP折疊面板
          APP下導航如何用Axure畫出來
          #專欄作家#
          浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于Axure原型設計和產品規范。
          本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。
          題圖來自Unsplash，基于CC0協議。
          果圖
          html部分：先寫用div畫好六個導航的卡片，再利用css添加響應效果
          <div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-01'>
                <span class='card-content'>item #1</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-02'>
                <span class='card-content'>long menu item #2</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-06'>
                <span class='card-content'>long menu item #1</span>
            </div>
        </a>
    </div>
</div>
          css部分：通過hover選擇器和transition屬性實現導航響應式操作，即可實現如圖效果
          a:link,
a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}
.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}
.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}
//添加導航的響應式效果
.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  transition: all 0.3s ease-in-out;
}
.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }
          然后就能實現我們這個實用又美觀的側邊導航欄啦
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲乱码一区二区三区在线观看|
四虎在线观看一区二区|
亚洲福利一区二区三区|
国产日韩精品一区二区在线观看|
国产主播一区二区|
人妻少妇精品一区二区三区|
欧美日韩一区二区成人午夜电影
|
国内精品一区二区三区最新|
久久久无码一区二区三区
|
国产av一区最新精品|
亚洲国产精品一区二区久久hs|
日韩视频在线观看一区二区|
精品无码人妻一区二区三区18|
日韩中文字幕精品免费一区|
亚洲美女一区二区三区|
一本AV高清一区二区三区|
国产在线观看一区二区三区精品|
日本一区二区三区四区视频|
国产精品无码一区二区三区在|
无码少妇一区二区浪潮免费|
精品少妇ay一区二区三区|
亚洲国产精品综合一区在线
|
四虎精品亚洲一区二区三区|
偷拍精品视频一区二区三区|
波多野结衣一区在线观看|
性盈盈影院免费视频观看在线一区|
午夜福利无码一区二区|
成人免费视频一区二区三区
|
日韩综合无码一区二区|
国精品无码一区二区三区在线蜜臀|
国产成人精品一区在线|
成人免费一区二区三区|
国产精品一区二区av|
亚洲不卡av不卡一区二区|
亚洲美女视频一区|
国产精品亚洲综合一区在线观看
|
一区二区三区在线看|
91麻豆精品国产自产在线观看一区
|
亚洲欧美一区二区三区日产|
国产精品av一区二区三区不卡蜜|
国产日韩精品一区二区三区|