Rumah > Artikel > hujung hadapan web > jQuery+CSS melaksanakan menu navigasi gelongsor sisi code_jquery

jQuery+CSS melaksanakan menu navigasi gelongsor sisi code_jquery

PHP中文网asal: 2016-05-16 09:00:312263semak imbas

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>

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 = $(&#39;.toggle-button&#39;);
$toggleButton.on(&#39;click&#39;, function() {
$(this).toggleClass(&#39;button-open&#39;);
});
});

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 = $(&#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;);
});
});

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 = $(&#39;.sidebar-menu-arrow&#39;);
$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)!

Kenyataan：

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

Artikel sebelumnya：Kod jQuery untuk melaksanakan menu_jquery tiga peringkatArtikel seterusnya：Kod jQuery untuk melaksanakan menu_jquery tiga peringkat

Artikel berkaitan

Lihat lagi