如何用CSS3和Js製作響應式導航條
今天製作了一個響應式導航條，能夠自動隨著不同的螢幕解析度或瀏覽器視窗大小的不同而改變導航條的樣式，這裡主要用到的就是css3的media query。具體可以查看淺談響應式版面這篇文章，這裡就不花費大量的篇幅介紹了，主要看一下這個導航條該怎麼做。
另外需要提到的是，ie6-ie8是不支援css3的media query的，因此對於ie6-ie8我們需要特殊處理，就讓他們保持預設樣式，這對於佈局及樣式上都要考慮到這一點。
首先看一下佈局這一塊，html程式碼如下：
程式碼如下:
<p class="navbar"> <p class="nav"> <ul id="menu"> <li class="current"><a href="#">首页</a></li> <li><a href="#">电影</a></li> <li><a href="#">电视剧</a></li> <li><a href="#">动漫</a></li> <li><a href="#">综艺</a></li> <li><a href="#">纪录片</a></li> <li><a href="#">公开课</a></li> </ul> <p class="hot"> <a href="#">钢铁侠3</a> <a href="#">中国合伙人</a> <a href="#">盛夏晚晴天</a> <a href="#">陆贞传奇</a> </p> <!--判断浏览器是否是ie9,ie10或者是非ie浏览器--> <!--[if (gt ie 8) | !(ie)]><!--> <h1 class="title" id="title"> <a href="#">风驰网</a> <span class="btn" id="btn"></span> </h1> <!--<![endif]--> </p> </p>
html部分另外還要有一個條件註解,當瀏覽器是ie6-8時給html標籤掛載個類別"ie6-8"，這樣方便樣式表裡的處理：
程式碼如下:
<!doctype html> <!--[if lt ie 9]><html class="ie6-8"><![endif]--> <html> ...
下面就是樣式控制了，先對整體樣式及ie6-ie8進行處理
代碼如下:
* {margin: 0; padding: 0;}
body {font: 14px/22px "宋体", arial, serif;}
.navbar {margin-top: 80px; width: 100%; height: 38px; background: #333;}
.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}
.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*ie6 hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}
.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}
.ie6-8 .nav .title {display: none;}ok，下面就用到media query了。
當螢幕寬度大於1000px時：
代碼如下:
@media screen and (min-width: 1000px) {
.nav {width: 1000px; height: 38px;}
.nav ul li {float: left; width: auto;}
.nav ul li a {padding: 0 30px 0 30px;}
.nav ul li.current {background: #f60;}
.nav ul li:hover a {color: #f60;}
.nav ul li.current:hover a {color: #fff;}
.nav .hot {margin-left: 20px; padding-top: 8px;}
.nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.nav .hot a:hover {color: #f60; text-decoration: underline;}
.nav .title {display: none;}
}當螢幕寬度在640px到1000px之間： p>
代碼如下:
@media screen and (min-width: 640px) and (max-width: 1000px) {
.nav {width: auto; height: 38px;}
.nav ul li {float: left; width: 14%; min-width: 50px;}
.nav ul li.current {background: #f60;}
.nav ul li:hover a {color: #f60;}
.nav ul li.current:hover a {color: #fff;}
.nav .hot {display:none;}
.nav .title {display: none;}
}當螢幕寬度小於640px時：
代碼如下:
@media screen and (max-width: 640px) {
.navbar {margin-top: 0; height: auto; background: #444;}
.nav {width: auto; height: auto;}
.nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}
.nav ul li a:active {background: #f60;}
.nav .hot {display:none;}
.nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "microsoft yahei", arial, serif; letter-spacing: 2px;}
.nav .title a {color: #f60; text-decoration: none;}
.nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}ok，對於佈局及樣式控制就完成了，效果也有了，3中不同狀態下的效果如下圖：
 |
但對於第三幅圖來說，我們還想要一個效果，那就是點擊右下角的圖示時選單可以收起，那麼這該怎麼做呢？這可以用js實現，當選單在收起狀態時，點擊圖片選單可以展開；當選單在展開狀態時，點擊圖示選單可以收起，而且還要有動畫效果。 ok，下面來看一下js，但js這一塊就不細說了，貼一下核心程式碼吧：
這部分程式碼用來產生動畫效果：
代碼如下:
var move = function (obj, target) {
var timer;
clearInterval(timer);
timer = setInterval(function () {
var speed = (target - obj.offsetTop)/3;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (Math.abs(obj.offsetTop - target) < 4) {
clearInterval(timer);
obj.style.marginTop = target + "px";
} else {
obj.style.marginTop = obj.offsetTop + speed + "px";
}
}, 30);
}ok，這個響應式導航條基本上就這樣了。
【相關教學推薦】
1. css影片教學
2. css線上手冊
3. bootstrap教學
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何使用JS和百度地圖實現地圖平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟
Dec 17, 2023 pm 06:55 PM
股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的
如何使用PHP和JS創建股票蠟燭圖
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3
如何使用JS和百度地圖實現地圖熱力圖功能
Nov 21, 2023 am 09:33 AM
如何使用JS和百度地圖實現地圖熱力圖功能簡介：隨著互聯網和行動裝置的快速發展，地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式，能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能，並提供具體的程式碼範例。準備工作：在開始之前，你需要準備以下事項：一個百度開發者帳號，並建立一個應用，取得到對應的AP
如何使用JS和百度地圖實現地圖點擊事件處理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地圖實現地圖點擊事件處理功能概述：在網路開發中，經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能，並給出具體的程式碼範例。步驟：匯入百度地圖的API檔案首先，要在HTML檔案中匯入百度地圖API的文件，可以透過以下程式碼實現：
PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法
Dec 18, 2023 pm 03:39 PM
隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人
如何使用JS和百度地圖實現地圖多邊形繪製功能
Nov 21, 2023 am 10:53 AM
如何使用JS和百度地圖實現地圖多邊形繪製功能在現代網頁開發中，地圖應用程式已成為常見的功能之一。而地圖上繪製多邊形，可以幫助我們將特定區域標記，方便使用者進行檢視和分析。本文將介紹如何使用JS和百度地圖API實現地圖多邊形繪製功能，並提供具體的程式碼範例。首先，我們需要引入百度地圖API。可以利用以下程式碼在HTML檔案中導入百度地圖API的JavaScript
