华易动力天津网站制作公司 免费咨询热线:400-0022-823 电话:022-28261501 28335110
地址:天津市河西区围堤道146号华盛广场B座22楼
点击这里给我发消息  点击这里给我发消息  点击这里给我发消息
  首页 关于我们 建网站:从这里开始 域名空间服务 案例展示 新闻中心 网站制作知识 网站设计技巧 人才招聘 联系我们  
新闻中心
公司新闻
行业资讯
天津网站制作方案 更多..
如何获得了大量的好的外链资源
常见的长尾关键词组合方法
如何利用百度平台获取流量
营销优化型网站的简介
新顶级域名的形式
网站建设分为如下八步
网站专题设计
关于门户网站设计方案
华易动力售后服务规范
服务器机房介绍
优秀客户展示(排名无先后) 更多..
环化(天津)燃气设备安装有限公司
天津市国信投资担保有限公司
天津城市职业学院
天津大学EMBA
南开大学CID
北京同仁堂天津药店有限公司
金权道(天津)餐饮管理有限公司
天津市友好合作城市企业促进会
天津天大求实电力新技术股份有限公司
天津红旗农贸投资控股有限公司
天津二人锅餐饮管理有限公司
天津市滨湖剧院
渤海产业投资基金管理有限公司
天津天富软管工业有限公司
新闻中心-行业资讯 更多..
· 企业为什么要做APP   2016-11-24
· 如何搭配网站   2016-11-16
· css表单布局的五个小技巧   2016-11-16
· 服务器维护的重点   2016-11-14
· 如何建设你想要的网站类型   2016-11-14
· 阿里设计师用这2方法提升设计创新力   2016-11-3
· 我们看过的各种设计理论法则   2016-11-3
· Windows 8设计时的安全性   2013-12-27
· 未来网站技术的发展   2013-10-12
· 企业网站建设规划   2013-7-30
全部信息 当前位置:首页新闻中心 → 详细内容
jquery+CSS网站导航菜单新手练手
更新时间:2012/7/20 点击:1356次
竖向导航菜单:
    CSS如下navigation.css
01 #navigation { 
02     width:200px; 
03 } 
04 #navigation ul { 
05     list-style:none; 
06     margin:0; 
07     padding:0; 
08 } 
09 #navigation li { 
10     border-bottom:1px solid #ed9f9f; 
11 } 
12 #navigation li a:link, #navigation li a:visited { 
13     font-size:90%; 
14     display:block; 
15     padding:0.4em 0 0.4em 0.5em; 
16     border-left:12px solid #711515; 
17     border-right:1px solid #711515; 
18     background-color:#b51032; 
19     color:#ffffff; 
20     text-decoration:none; 
21 } 
22   
23 #navigation li a:hover { 
24     background-color:#711515; 
25     color:#ffffff; 
26 } 
27 #navigation ul ul { 
28     margin-left:12px; 
29 } 
30 #navigation ul ul li { 
31     border-bottom:1px solid #711515; 
32     margin:0; 
33 } 
34 #navigation ul ul a:link, #navigation ul ul a:visited { 
35     background-color:#ed9f9f; 
36     color:#711515; 
37 } 
38 #navigation ul ul a:hover { 
39     background-color:#711515; 
40     color:#fff; 
41 }
 
 
    HTML如下:
 
view source
print?
01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
02 <html> 
03     <head> 
04         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
05         <title>Untitled Document</title> 
06         <link rel="stylesheet" type="text/css" href="css/navigation.css" /> 
07         <script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script> 
08         <script type="text/javascript"> 
09             $(function() { 
10                 var $submenus = $('.submenu'); 
11                 $submenus.hide(); 
12                 $submenus.prev().click(function() { 
13                     $submenus.slideUp('fast'); 
14                     $mymenu = $(this).next(); 
15                     if($mymenu.is(':hidden')) { 
16                         $mymenu.slideDown('fast'); 
17                     } else { 
18                         $mymenu.slideUp('fast'); 
19                     } 
20                 }); 
21             }); 
22         </script> 
23     </head> 
24     <body> 
25         <div id="navigation"> 
26             <ul> 
27                 <li><a href="#">Recipes</a> 
28                     <ul class="submenu"> 
29                         <li><a href="#">Starters</a></li> 
30                         <li><a href="#">Main Courses</a></li> 
31                         <li><a href="#">Desserts</a></li> 
32                     </ul> 
33                 </li> 
34                 <li><a href="#">Contact Us</a> 
35                     <ul class="submenu"> 
36                         <li><a href="#">Andrew</a></li> 
37                         <li><a href="#">Bruce</a></li> 
38                         <li><a href="#">Simpzon</a></li> 
39                     </ul> 
40                 </li> 
41                 <li><a href="#">Articles</a></li> 
42                 <li><a href="#">Buy Online</a></li> 
43             </ul> 
44         </div> 
45     </body> 
46 </html>
 
 
效果还算可以,这个例子的样式来自sitepoint,css精粹(第三版)中的一个例子,我再此基础上加了些jquery用于子菜单的下拉收起效果
//-------------------------------------------------------------------
横向导航菜单
   CSS如下horizontalNav.css
 
view source
print?
01 body { 
02     padding:1em; 
03     font-family:"Times New Roman", Times, serif; 
04 } 
05 #navigation { 
06     font-size:90%; 
07 } 
08 #navigation ul { 
09     list-style:none; 
10     margin:0; 
11     padding:0; 
12     padding-top:1em; 
13 } 
14 #navigation li { 
15     float:left; 
16 } 
17 #navigation .submenu { 
18     border-top:1px solid #ffffff; 
19     padding-top:0; 
20 } 
21 #navigation .submenu li { 
22     float:none; 
23     border-bottom:1px solid #fff; 
24     border-right:0px; 
25 } 
26 #navigation a { 
27     display:block; 
28     padding:0.4em 1em 0.4em 1em; 
29     font-weight:bold; 
30     text-decoration:none; 
31     color:#ffffff; 
32     width:7em; 
33     border-right:2px solid #dafce0; 
34 } 
35 #navigation .submenu a { 
36     border-left:10px solid #d3de4e;;  
37     width:6em; 
38 } 
39   
40 #navigation a:link, #navigation a:visited { 
41     background-color:#388d29;; 
42 } 
43   
44 #navigation a:hover { 
45     color:#388d29; 
46     background-color:#c0e296; 
47     text-decoration:underline; 
48 }
 
   HTML如下:
 
view source
print?
01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
02 <html> 
03     <head> 
04         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
05         <title>Untitled Document</title> 
06         <link rel="stylesheet" type="text/css" href="css/horizontalNav.css" /> 
07         <script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script> 
08         <script type="text/javascript"> 
09             $(function() { 
10                 $('.submenu').hide(); 
11                 $('.submenu').prev().mouseenter(function() { 
12                     var $submenu = $(this).next(); 
13                     $submenu.slideDown('normal').mouseleave(function(){ 
14                             $(this).slideUp('normal'); 
15                     }); 
16                 }); 
17             }); 
18         </script> 
19     </head> 
20     <body> 
21         <div id="navigation"> 
22             <ul> 
23                 <li><a href="#">Recipes</a> 
24                     <ul class='submenu'> 
25                         <li><a href="#">China Style</a></li> 
26                         <li><a href="#">US Style</a></li> 
27                         <li><a href="#">Japan Style</a></li> 
28                     </ul> 
29                 </li> 
30                 <li><a href="#">Contact</a></li> 
31                 <li><a href="#">Articles</a></li> 
32                 <li><a href="#">Buy Online</a> 
33                     <ul class='submenu'> 
34                       <li><a href="#">Amazon</a></li> 
35                       <li><a href="#">SitePoint</a></li> 
36                       <li><a href="#">Apress</a></li> 
37                       <li><a href="#">O'relly</a></li> 
38                     </ul> 
39                 </li> 
40             </ul> 
41         </div> 
42     </body> 
43 </html>
上一篇 PREV
NEXT 下一篇
  公司总机:022-28261501 28335110
客户服务邮箱:service@nfree.cn,手机直线:15822335163
CopyRight 2006~2024 All Rights Reserved 天津市华易动力信息科技有限公司
地址:天津市河西区围堤道146号华盛广场B座22楼 邮编:300202

津公网安备 12010302001042号


在线QQ(售前咨询)
点击这里给我发消息  点击这里给我发消息  点击这里给我发消息