K9 通用版 博客版 主题版 地方门户版 企业版 |   企业(ASP) 分类 使用 分享 疑问 模板 建议 帮助 错误 其他
+新建主题 [Ajax]
填写帐号密码即可完成注册
+新建话题 最新回复排序 最新主题排序 精华帖子

【Jquery不再是累赘】应坛友要求制作简单下拉菜单

1Next >

topcc 发表于：10-09-02 16:20 编辑于：09-02 17:33 [添加收藏] 楼主 [回复] #Top#
topcc 人气：294 积分：4426 金币：37455
VIP KC元老
界面很简单，至于菜单的美化，大家还是自己重写css吧，我就上代码吧，希望对大家有用。

css代码：
  1. *,html{
  2.         margin:0px;
  3.         padding:0px;
  4. }
  5. body
  6. {               
  7.         text-align:center;
  8.         font-size:12px;
  9.         font-family:宋体,Times New Roman;       
  10. }
  11. #container{
  12.         position:relative;
  13.         margin:0px auto 0px auto;
  14.         width:1002px;
  15.         text-align:left;       
  16. }
  17. /*头部*/
  18. /*头部导航*/
  19. #headLink
  20. {
  21.         position:absolute;
  22.         left:305px;
  23.         top:42px;
  24. }
  25. #headLink .menu
  26. {
  27.         width:80px;
  28.         text-align:center;
  29.         float:left;
  30. }
  31. .menu_head {
  32.         padding: 1px;
  33.         cursor: pointer;       
  34.     background:url(../images/menu_head.jpg) no-repeat;
  35.     font-weight:bold;
  36. }
  37. .menu_body {
  38.         display:none;
  39. }
  40. .menu_body a
  41. {
  42.         padding:5px 0px;
  43.         display:block;
  44.         color:#535353;
  45.         text-align:center;
  46.         background-color:#eee;               
  47.         text-decoration:none;
  48. }
  49. .menu_body a:hover {
  50.         color:#7fb2f4;
  51.         background-color:#dfdfdf;       
  52. }

下面是jquery代码：
  1. $(document).ready(function(){
  2.     $(".menu_head").click(function() {

  4.         $(this).parent().find(".menu_body").slideDown('fast').show();

  6.         $(this).parent().hover(function() {
  7.             }, function(){
  8.             $(this).parent().find(".menu_body").slideUp('slow');
  9.         });

  11.         }).hover(function() {
  12.             $(this).css({color:"#F4AE34"});
  13.         }, function(){
  14.             $(this).css({color:"#000"});
  15.     });
  16. });

body中的代码如下：
  1. <div id="container">
  2.   <div id="head">
  3.     <div id="headLink">
  4.       <div class="menu">
  5.         <p class="menu_head">首页</p>
  6.       </div>
  7.       <div class="menu">
  8.         <p class="menu_head">KingCMS</p>
  9.         <div class="menu_body"> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> </div>
  10.       </div>
  11.       <div class="menu">
  12.         <p class="menu_head">KingCMS</p>
  13.         <div class="menu_body"> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> </div>
  14.       </div>
  15.       <div class="menu">
  16.         <p class="menu_head">KingCMS</p>
  17.         <div class="menu_body"> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> </div>
  18.       </div>
  19.       <div class="menu">
  20.         <p class="menu_head">KingCMS</p>
  21.         <div class="menu_body"> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> <a href="#">Kingcms</a> </div>
  22.       </div>
  23.     </div>
  24.   </div>
  25. </div>
上源文件给大家把，希望对大家有用。

点击打开链接



好名字容易娶媳妇？ 悦买网-专业导购网
Ta最近还发表过 [疑问] 后台发文章不正常，不知这里怎么样？ (23-08-14) [其他] 新春快乐 (19-08-03) [使用] php搜索自动提示功能——autoComplete (17-06-13) [错误] 地方门户的天气和新闻采集不会更新了，有问题。 (17-03-28) [疑问] 为什么后台不能登录了呢？ (16-07-24)
随机阅读 [疑问] 官方老大，能给讲解一下 碎片怎么用吗？ (14-09-01) [疑问] 为什么自己发的帖子不能编辑 (14-07-01) [疑问] 首页的文章要调用分页功能用哪个标签哦 (13-06-06) [模板] 求详细模板教程文章、视频、音频…… (12-05-20) [其他] 看一看老外对中国改版手机的看法 (12-03-14)
121.28.245.* 发表于：10-09-02 18:14 沙发 [回复] #Top#
KingCMS官方网站网友
pl
vfking 发表于：10-09-02 20:35 板凳 [回复] #Top#
vfking 人气：83 积分：93 金币：370
KC元老
俺的代码被转过来了，汗，那俺转谁的呢？
SinCS 发表于：10-09-02 21:03 4楼 [回复] #Top#
SinCS 人气：1148 积分：28 金币：77159
VIP 管理团队 特殊贡献
转我的吧
vfking 发表于：10-09-02 21:05 5楼 [回复] #Top#
vfking 人气：83 积分：93 金币：370
KC元老
哈哈，老大在啊，那俺去转了。
史册 发表于：10-09-02 21:43 6楼 [回复] #Top#
史册 人气：48 积分：242 金币：1898
VIP KC元老
脑袋有点迷糊糊
zongxiao08 发表于：11-04-27 14:20 7楼 [回复] #Top#
zongxiao08 人气：145 积分：989 金币：3553
不错  很好的
lanrennet 发表于：11-05-19 13:16 8楼 [回复] #Top#
lanrennet 人气：113 积分：949 金币：5089
KC元老
大量代码，看签名，只做研究学习，切勿用于商业用途，惊讶。

1Next >

发表回复

帐号 匿名发布 审核后可见 [加载完整在线编辑器]
内容
验证码
KingCMS 内容管理系统

关于我们 联系我们 广告报价 付款方式 站点导航

Copyright © 2004-2015 Focuznet All rights reserved.

广州唯众网络科技有限公司 粤ICP备08008106号