Cara membuat bar navigasi responsif dengan CSS3 dan Js-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Cara membuat bar navigasi responsif dengan CSS3 dan Js

PHP中文网

May 16, 2016 pm 12:03 PM

css3js

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:

Cara membuat bar navigasi responsif dengan CSS3 dan Js

Tetapi untuk gambar ketiga, Kami juga mahukan kesan, iaitu menu boleh runtuh apabila mengklik ikon di sudut kanan bawah, jadi bagaimana untuk melakukan ini? Ini boleh dicapai dengan js Apabila menu dalam keadaan runtuh, klik menu gambar untuk mengembangkannya apabila menu dalam keadaan dikembangkan, klik menu ikon untuk meruntuhkannya, dan ia juga memerlukan kesan animasi. ok, mari kita lihat js, tetapi saya tidak akan pergi ke butiran tentang js Mari siarkan kod teras:

Bahagian kod ini digunakan untuk menghasilkan kesan animasi:

Kodnya 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】

Tutorial video CSS2
Manual dalam talian CSS3 tutorial bootstrap

Kenyataan

Artikel ini dikembalikan pada:博客园. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Biarkan ' s membuat loader halaman mewah, tetapi tidak rumitApr 15, 2025 am 09:33 AM

Adalah biasa untuk melihat keadaan pemuatan di laman web hari ini, terutamanya sebagai aplikasi web progresif dan tapak reaktif semakin meningkat. Ini satu cara untuk

Landskap pembangunan aplikasi silang platformApr 15, 2025 am 09:29 AM

Saya tidak mengesan perkara ini dengan baik, tetapi saya dapat. Sekiranya anda mahukan aplikasi asli untuk Android dan iOS, pasti akan hanya perlu menulisnya

Elemen teks teletype hidup ... sekurang -kurangnya di laman web iniApr 15, 2025 am 09:28 AM

Ini:

Menggunakan Fusebox sebagai alternatif penggabungan untuk webpack untuk ReactApr 15, 2025 am 09:26 AM

Jika anda mencari bundler alternatif ke webpack, anda mungkin mahu melihat Fusebox. Ia membina apa yang ditawarkan Webpack-pemisahan kod, panas

Apa yang saya suka tentang menulis gaya dengan svelteApr 15, 2025 am 09:25 AM

Terdapat banyak gembar-gembur yang layak di sekitar Svelte baru-baru ini, dengan projek itu mengumpul lebih daripada 24,000 bintang GitHub. Boleh dikatakan sebagai javascript yang paling mudah

Berita Platform Mingguan: CSS Column-Span Property, ADA Berlaku ke Laman Web, Penerangan Imej Auto yang DihasilkanApr 15, 2025 am 09:23 AM

Pada minggu ini, susun atur multi-kolumn mendapat sokongan luas, ADA bermaksud lebih banyak a11y untuk peruncit, dan Google melakukan sesuatu tentang semua imej kosong

Negeri Styling semasa memilih pada tahun 2019Apr 15, 2025 am 09:18 AM

Terbaik yang saya tahu dari kali terakhir saya menyusun ciri-ciri CSS yang paling diharapkan, kawalan bentuk gaya adalah pertanyaan utama. Top 5, i ' d katakan. Dan orang asli

Menjadi tuan depan pada tahun 2020 dengan 10 idea projek iniApr 15, 2025 am 09:17 AM

Ini adalah sedikit terkini yang dikemas kini dari artikel cepat yang saya tulis di Dev. Saya ' m penerbitan di sini ' cuz i ' m semua indieweb seperti itu.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Dreamweaver CS6

Alat pembangunan web visual

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.