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='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <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>
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>
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;
}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 = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});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>
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;
}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 = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});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;
}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>
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 = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});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;
}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%);
}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)!
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
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.
Artikel Panas
Alat panas
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
Dreamweaver Mac版
Alat pembangunan web visual
