hujung hadapan web
tutorial js
JS CSS melaksanakan kemahiran effect_javascript menu navigasi lungsur sekunder yang mudah
JS CSS melaksanakan kemahiran effect_javascript menu navigasi lungsur sekunder yang mudah
Contoh dalam artikel ini menerangkan cara melaksanakan kesan menu navigasi lungsur turun sederhana menggunakan JS CSS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah CSS dan JavaScript untuk melaksanakan menu navigasi lungsur dua peringkat Nampaknya CSS perlu digabungkan dengan JS untuk mencapai hasil yang baik Menu ini juga menyokong dua tahap navigasi drop-down adalah apa yang sering kami gunakan. Ia adalah bentuk menu Anda boleh menggunakannya dengan mengubah suai ini. Saya percaya anda akan melakukannya dengan baik.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/
Kod khusus adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
</style>
</head>
<body>
<div id="mainNavBar">
<div id="nav">
<ul>
<li>
<a href="#">添加</a>
<div id="subNav">
<a href="#">日志</a>
<a href="#">分类</a>
</div>
</li>
<li>
<a href="#">管理</a>
<div id="subNav">
<a href="#">分类</a>
<a href="#">文章</a>
</div>
</li>
<li>
<a href="#">扩展</a>
<div id="subNav">
<a href="#">评论管理</a>
<a href="#">留言管理</a>
<a href="#">注销退出</a>
</div>
</li>
</ul>
</div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
this.style.fontWeight="bold";
this.style.overflow="visible";
this.style.background="#666666";
}
nav[i].onmouseout=function(){
this.style.fontWeight="normal";
this.style.background="#999999"
this.style.overflow="hidden";
}
}
</script>
</body>
</html>Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.
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
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)
Topik panas
Bagaimana untuk mencapai kesan jurang pada susun atur kad dan kupon dengan latar belakang kecerunan?
Apr 05, 2025 am 07:48 AM
Menyedari kesan jurang susun atur kupon kad. Semasa merancang susun atur kupon kad, anda sering menemui keperluan untuk menambah jurang pada kupon kad, terutamanya apabila latar belakang adalah gradien ...
Bolehkah bootstrap secara langsung melaksanakan susun atur aliran air terjun mendatar?
Apr 05, 2025 am 07:15 AM
Menggunakan rangka kerja bootstrap untuk membina susun atur aliran air terjun mendatar Banyak pemaju berharap dapat menggunakan rangka kerja bootstrap untuk membina laman web dengan cepat dan mencapai pelbagai kesan susun atur yang kompleks ...
Gaya tetap sama selepas zoom halaman PC: Apakah penyelesaian yang mungkin?
Apr 05, 2025 am 07:51 AM
Cabaran untuk menjaga gaya halaman yang dizum dan sama selepas halaman dizoom. Banyak pemaju akan menghadapi masalah yang sukar ketika membuat halaman PC: Apabila pengguna mengezum masuk atau keluar dari pelayaran ...
Icon IconFont memaparkan tidak normal secara berselang -seli? Cara menyelesaikan masalah dan menyelesaikan masalah pengekodan
Apr 05, 2025 am 07:54 AM
Iconfont ...
Laman web mana yang sesuai untuk belajar dan menikmati paparan kesan CSS yang sangat baik?
Apr 05, 2025 am 07:09 AM
Terokai laman web paparan kesan CSS yang sangat baik Jika anda berminat untuk belajar dan menghargai pelbagai kesan CSS yang indah, sangat penting untuk mencari sumber yang betul. tidak kira ...
CSS Overflow: Auto tidak sah. Adakah nilai negatif elemen induk Z-indeks pelakunya?
Apr 05, 2025 am 07:12 AM
CSS SCROLL BAR FACLESSHOOOTING: OVERFLOW: Auto Kegagalan Sebab Analisis Dalam Menggunakan CSS Untuk Menetapkan Limpahan Bekas: Auto ...
Resolusi Resolusi 2K Reka Bentuk Laman Web Korporat: Bagaimanakah kita dapat menyesuaikan diri dengan persekitaran paparan pelanggan?
Apr 05, 2025 am 07:21 AM
Reka Bentuk Rendering Laman Web Enterprise: Bagaimana Menangani Keperluan Resolusi 2K. Apabila merancang laman web korporat, pelanggan sering memenuhi keperluan resolusi khas.
Bagaimana untuk membuat blok bentuk yang tidak teratur dengan kod CSS sahaja?
Apr 05, 2025 am 07:39 AM
Pandai menggunakan CSS untuk melaksanakan blok bentuk yang tidak teratur Artikel ini akan menerangkan secara terperinci bagaimana menggunakan CSS untuk membuat blok bentuk hitam yang tidak teratur yang serupa dengan yang ditunjukkan dalam angka di bawah: [harus dimasukkan di sini ...
