Rumah >hujung hadapan web >tutorial css >Cara membuat bar navigasi responsif dengan CSS3 dan Js
Cara membuat bar navigasi responsif dengan CSS3 dan Js
- PHP中文网ke hadapan
- 2016-05-16 12:03:252858semak imbas
Hari ini saya membuat bar navigasi responsif yang boleh menukar gaya bar navigasi secara automatik dengan resolusi skrin yang berbeza atau saiz tetingkap penyemak imbas Perkara utama yang digunakan di sini ialah Pertanyaan Media CSS3. Untuk butiran, anda boleh menyemak artikel A Brief Talk on Responsive Layout Saya tidak akan menghabiskan banyak ruang untuk memperkenalkannya di sini. Saya terutamanya melihat cara membuat bar navigasi ini.
Satu lagi perkara yang perlu dinyatakan ialah ie6-ie8 tidak menyokong Pertanyaan Media CSS3, jadi kami memerlukan layanan khas untuk ie6-ie8 dan biarkan mereka mengekalkan gaya lalai, yang kedua-duanya penting untuk reka letak dan gaya kira.
Pertama lihat susun atur, kod html adalah seperti berikut:
Kod adalah seperti berikut:
<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>Bahagian html juga mempunyai syarat komen, semasa menyemak imbas Apabila pelayan ialah ie6-8, lekapkan kelas "ie6-8" pada teg html, yang memudahkan pemprosesan dalam helaian gaya:
Kodnya adalah seperti berikut:
<!DOCTYPE html> <!--[if lt IE 9]><html class="ie6-8"><![endif]--> <html> ...
Berikut ialah kawalan gaya , mula-mula proses gaya keseluruhan dan ie6-ie8
Kodnya adalah seperti berikut:
* {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 akan digunakan di bawah.
Apabila lebar skrin lebih besar daripada 1000px:
Kodnya adalah seperti berikut:
@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;}
}Apabila lebar skrin antara 640px dan 1000px:
Kod adalah seperti berikut :
@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;}
}Apabila lebar skrin kurang daripada 640px:
Kod adalah seperti berikut:
@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, reka letak dan kawalan gaya selesai, dan kesannya ada dalam 3 keadaan berbeza adalah seperti berikut:
| ||
 |
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, bar navigasi responsif ini pada asasnya seperti ini. 【Tutorial berkaitan yang disyorkan】1 Tutorial video CSS2
Manual dalam talian CSS3 tutorial bootstrap