jQuery+CSS melaksanakan menu navigasi gelongsor sisi code

Rumah

hujung hadapan web

tutorial js

jQuery+CSS melaksanakan menu navigasi gelongsor sisi code_jquery

PHP中文网

May 16, 2016 am 09:00 AM

css jquery

Menu sampingan digunakan secara meluas dalam reka bentuk laman web, dan menu jenis ini boleh dilihat di banyak laman web. Ia boleh memaparkan maklumat penting, menjadikannya lebih mudah dibaca dan cantik serta memenuhi nilai pengalaman pengguna!

Hari ini saya akan menunjukkan kepada anda cara menggunakan jquery dan css untuk melaksanakan menu gelongsor sisi.

Paparan kesan Muat turun kod sumber

Untuk buat menu navigasi , mari kita lihat struktur html dahulu:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation Menu Demo</title>
<link rel="stylesheet" href=" 
<link href=&#39;https://fonts.googleapis.com/css?family=Montserrat&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>
<link rel="stylesheet" href=" 
<script src=" 
</script>
<script src="script.js">
</script>
<link rel="stylesheet" href="style.css">
</head><body>
<!-- Content goes here -->
</body>
</html>

Salin selepas log masuk

Pertama, kami merujuk normalize.css sebagai gaya lalai untuk memastikan bahawa menu kami dipaparkan pada setiap pelayar Peranti adalah sama. Kami menggunakan ikon fon fontawesome untuk memaparkan item menu ikon turun. Kami juga perlu merujuk jQuery untuk melaksanakan penukaran menu.

Butang Panel

Setiap butang navigasi panel tapak web adalah serupa. Ia selalunya fon ikon seperti fontawesome, tetapi dalam tutorial ini saya ingin menambah beberapa animasi, jadi kami melakukannya dengan garis mendatar. Pada asasnya, butang kami ialah rentang yang mengandungi tiga div yang dipaparkan sebagai garis mendatar. Gaya

<span class="toggle-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>

Salin selepas log masuk

kelihatan seperti ini:

.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}

Salin selepas log masuk

Butang mempunyai kedudukan tetap dan menatal halaman apabila tidak bergerak. Ia juga mempunyai indeks z :15 untuk memastikan ia sentiasa berada di atas elemen bertindih yang lain. Butang terdiri daripada tiga garisan mendatar. Setiap baris mendatar mempunyai gaya tersendiri dan kami menambah gaya .menu-bar padanya. Gaya kelas yang tinggal dialihkan ke fail gaya yang berasingan. Apabila animasi berlaku, kami menambah kelas .button-open. Kami memetik jQuery, yang boleh menjadi lebih mudah untuk dilaksanakan:

$(document).ready(function() {
var $toggleButton = $(&#39;.toggle-button&#39;);
$toggleButton.on(&#39;click&#39;, function() {
$(this).toggleClass(&#39;button-open&#39;);
});
});

Salin selepas log masuk

Pemula mungkin tidak biasa dengan jQuery, izinkan saya menerangkan perkara yang sedang berlaku. Mula-mula, kami memulakan pembolehubah yang dipanggil $togglebutton, yang mengandungi butang kami. Kami menyimpannya sebagai pembolehubah dan kemudian kami membuat monitor acara untuk mendengar klik butang. Setiap kali ia diklik, pendengar acara akan melaksanakan fungsi kaedah toggleclass() untuk togol .button-open.

.button-open Kita boleh menggunakannya untuk menukar cara elemen ini dipaparkan. Kami menggunakan fungsi CSS3 translate() dan rotate() untuk memutarkan garisan mendatar atas dan bawah 45 darjah, dan garisan mendatar tengah hilang secara beransur-ansur. Anda boleh klik butang dalam Demo untuk melihat kesannya.

Menu sampingan

Struktur html menu slaid sisi adalah seperti berikut:

<div class="menu-wrap">
<div class="menu-sidebar">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<li><a href="#">Alignment</a></li>
<li><a href="#">Markup</a></li>
<li><a href="#">Comments</a></li>
</ul>
</li>
<li><a href="#">Courses</a></li>
<li><a href="#">Get In Touch</a></li>
</ul> 
</div>
</div>

Salin selepas log masuk

Tidak dijelaskan dalam perincian di sini Untuk setiap gaya menu, mari lihat div .menu-wrap. Gayanya adalah seperti berikut:

.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}

Salin selepas log masuk

Kedudukannya tetap, jadi menu sentiasa tatal di tempat yang sama. Ketinggian ditetapkan kepada 100%. Ambil perhatian bahawa jidar kiri ditetapkan kepada nombor negatif, menyebabkan menu hilang daripada paparan. Untuk memberikan kesan penampilan, kami menggunakan jquery untuk memanggil kelas lain untuk memaparkan dan menutupnya. Kod JavaScript adalah seperti berikut:

$(document).ready(function() {
var $toggleButton = $(&#39;.toggle-button&#39;),
$menuWrap = $(&#39;.menu-wrap&#39;);
$toggleButton.on(&#39;click&#39;, function() {
$(this).toggleClass(&#39;button-open&#39;);
$menuWrap.toggleClass(&#39;menu-show&#39;);
});
});

Salin selepas log masuk

Kami menambah $menuwrap pembolehubah yang mengandungi semua item menu dan menggunakan acara yang sama untuk mencipta butang. Rancangan .menu ini mempunyai jidar kiri 0 dan menambahkan beberapa kesan bayangan kotak.

.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}

Salin selepas log masuk

Submenu dan Pautan

Anda mungkin perasan bahawa item senarai mempunyai kelas .menu-item-has-children. Mengandungi submenu. Pada masa yang sama, selepas pautan, terdapat kelas .sidebar-menu-anak panah.

<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<!-- List items -->
</ul>
</li>

Salin selepas log masuk

span mempunyai pakej unsur pseudo ::selepas yang melaksanakan anak panah hebat. Secara lalai, submenu disembunyikan dan hanya muncul apabila mengklik pada menu induk:

$(document).ready(function() {
var $sidebarArrow = $(&#39;.sidebar-menu-arrow&#39;);
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});

Salin selepas log masuk

Apabila kita mengklik pada anak panah, fungsi dipanggil selepas elemen seterusnya rentang sasarannya dan menjadikannya kelihatan. Kami menggunakan slidetoggle jquery. Ia menjadikan kesan gelongsor elemen muncul atau hilang Fungsi mempunyai parameter masa animasi.

Akhir sekali, item menu demo kami mempunyai kesan hover. Ia menggunakan ::selepas unsur pseudo. Kodnya adalah seperti berikut:

.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}

Salin selepas log masuk

Ini ::after pseudo-element mengandungi elemen aras blok yang diletakkan secara mutlak di bawah setiap pautan, dengan ketinggian dan lebar 0.15em. Kami bukan sahaja menggunakan warna latar belakang pada baris, kami menggunakan fungsi linear-gradient() pada imej latar belakang. Walaupun tujuan fungsi ini adalah untuk membuat kecerunan warna, kita boleh membuat perubahan warna kecerunan dengan menyatakan peratusan.

.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}

Salin selepas log masuk

Separuh garisan di sini lutsinar dan separuh lagi berwarna kuning. Pas saiz latar belakang kepada 200% lebar supaya bahagian lutsinar mengambil lebar semua pautan.

Bahagian lutsinar boleh menggunakan warna lain. Ini akan mencipta ilusi garisan yang dipenuhi dengan warna lain, tetapi pada hakikatnya ia hanyalah garisan dua warna.

Di atas ialah kandungan jQuery+CSS untuk melaksanakan menu navigasi gelongsor sisi code_jquery Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

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

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7671

Tutorial CakePHP

1393

Tutorial C#

1206

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Tunjukkan Lagi

Related knowledge

Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

See all articles