cari

Rumah >hujung hadapan web >tutorial js >Kod kesan menu navigasi menengah mendatar biru yang dilaksanakan oleh jQuery css_jquery

Kod kesan menu navigasi menengah mendatar biru yang dilaksanakan oleh jQuery css_jquery

PHP中文网
PHP中文网asal
2016-05-16 15:39:461392semak imbas

Contoh dalam artikel ini menerangkan kesan menu navigasi sekunder mendatar biru yang dilaksanakan oleh jQuery css. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu navigasi sekunder mendatar jQuery CSS biru, saya percaya anda akan menyukainya, biru, gaya super klasik, yang saya rasa ia sangat bagus, jadi Saya ingin berkongsi dengan semua orang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod kesan menu navigasi menengah mendatar biru yang dilaksanakan oleh jQuery css_jquery


Alamat demo dalam talian adalah seperti berikut:

http ://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/

Kod khusus ialah 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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>蓝色水平二级导航菜单</title> 
<style> 
*{font-size:12px; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } 
body{margin:0; padding:0; background:white; } 
img{border:0; } 
a:link,a:visited,a:active{text-decoration:none; } 
a:hover{text-decoration:underline; } 
/********** header **********/ 
.header{width:100%; 
background:url(images/header_bg.gif) 
#ffffff repeat-x 0 0; text-align:center; } 
.header .padder{width:910px; margin:0 auto; 
background:url(images/header_bg.gif) 
#ffffff repeat-x 0 0; 
padding-bottom:4px; 
text-align:left; 
} 
.header 
.padder 
.nav{background:url(images/vertical.gif) 
repeat-x 0 -36px; height:36px; } 
.header 
.padder 
.navLeftBg{background:urlvertical.gif) 
no-repeat 0 0; height:36px; } 
.header 
.padder 
.navRightBg{background:url(images/icons.gif) 
no-repeat right -146px; height:36px; } 
.header 
.padder 
.nav 
.mainNav{padding-left:24px; position:absolute; } 
.header 
.padder 
.nav 
.mainNav 
a:link,
.header 
.padder 
.nav 
.mainNav a:visited,.header .padder .nav .mainNav 
a:active{width:90px; height:36px; 
display:inline-block; text-align:center; color:#ffffff; 
font-weight:bold; font-size:14px; line-height:36px; margin-left:11px; } 
.header .padder .nav .mainNav a:hover{text-decoration:none; } 
.header .padder .nav .mainNav a.actived:link,.header .padder .nav 
.mainNav a.actived:visited,.header .padder .nav .mainNav a.actived:hover,.header 
.padder .nav .mainNav a.actived:active{background:url(images/icons.gif) no-repeat 0 -27px; color:#000000; }
 .header .padder .secondNav{line-height:21px; text-align:left; } 
 .header .padder .secondNav a{color:#266392; 
 display:in


Di atas ialah kandungan kod_jquery kesan menu navigasi mendatar biru yang dilaksanakan oleh jQuery css Untuk kandungan yang lebih berkaitan, sila beri perhatian kepada 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：Melipat mudah dan mengembangkan kesan menu berbilang peringkat yang dilaksanakan oleh kemahiran JS CSS_javascriptArtikel seterusnya：Melipat mudah dan mengembangkan kesan menu berbilang peringkat yang dilaksanakan oleh kemahiran JS CSS_javascript

Artikel berkaitan

Lihat lagi