商丘职院，真我风采社区！ ·社区工具·查看新帖·设为首页·手机版

商丘职院·真我风采社区·商丘职业技术学院最具人气和影响力的学生论坛！

 找回密码
 注册

用新浪微博连接

一步搞定

QQ登录

只需一步，快速开始

精彩推荐：
搜索
商丘职院·真我风采社区·商丘职业技术学院最具人气和影响力的学生论坛！ › 论坛 › 商丘职院学习小组 › 网页设计|网站制作 › 【教程】如何使用 jquery制作导航弹出菜单 ...
返回列表 发新帖 回复
查看: 192|回复: 5

【教程】如何使用 jquery制作导航弹出菜单 [复制链接]

system
分享视频：187 部

管理员

Rank: 12Rank: 12Rank: 12

UID
1
金币
10190 两
贡献
0 点
威望
213 点
视频
187 个
暗恋者
2 人

管理员勋章 忠实居民 优秀会员勋章 亲和大使勋章 英姿飒爽 文韬武略

发表于 2011-11-10 21:02:43 |显示全部楼层
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>使用jquery制作导航弹出菜单</title>
  5.     <style type="text/css">
  6.         *
  7.         {
  8.             margin:0;
  9.             padding:0;
  10.         }
  11.         body
  12.         {
  13.             color:#666;
  14.             font-size:12px;
  15.         }
  16.         ul
  17.         {
  18.             list-style:none;
  19.         }
  20.         a
  21.         {
  22.             color:#666;
  23.             text-decoration:none;
  24.         }
  25.         a:hover
  26.         {
  27.             text-decoration:underline;
  28.         }
  29.         .nav
  30.         {
  31.             width:980px;
  32.             height:30px;
  33.             line-height:30px;
  34.             margin:20px auto 0;
  35.             background:#EEE;
  36.             border:1px solid #D6D6D6;
  37.             overflow:hidden;
  38.         }
  39.         .nav li
  40.         {
  41.             float:left;
  42.             width:100px;
  43.             text-align:center;
  44.         }
  45.         .nav li a
  46.         {
  47.             display:block;
  48.         }
  49.         .nav li a:hover
  50.         {
  51.             background:#CCC;
  52.         }
  53.         .nav li ul
  54.         {
  55.             position:absolute;
  56.             display:none;
  57.             width:98px;
  58.             background:#EEE;
  59.             border:1px solid #D6D6D6;
  60.             z-index:99;
  61.             overflow:hidden;
  62.         }
  63.     </style>
  64.     <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  65.     <script type="text/javascript">
  66.         $(function () {
  67.             $(".nav li:has(ul)").hover(function () {
  68.                 var offset = $(this).offset();
  69.                 $(this).find("ul").css({
  70.                     "top": offset.top + 30 + "px",
  71.                     "left": offset.left + "px"
  72.                 }).show();
  73.             }, function () {
  74.                 $(this).find("ul").hide();
  75.             });
  76.         });
  77.     </script>
  78. </head>
  79. <body>
  80.     <div class="nav">
  81.         <ul>
  82.             <li><a href="#">首页</a></li>
  83.             <li>
  84.                 <a href="#">关于我们</a>
  85.                 <ul>
  86.                     <li><a href="#">公司简介</a></li>
  87.                     <li><a href="#">领导致辞</a></li>
  88.                     <li><a href="#">公司荣誉</a></li>
  89.                     <li><a href="#">发展规划</a></li>
  90.                 </ul>
  91.             </li>
  92.             <li>
  93.                 <a href="#">新闻中心</a>
  94.                 <ul>
  95.                     <li><a href="#">公司公告</a></li>
  96.                     <li><a href="#">公司新闻</a></li>
  97.                     <li><a href="#">行业新闻</a></li>
  98.                     <li><a href="#">最新项目</a></li>
  99.                 </ul>
  100.             </li>
  101.             <li><a href="#">客服中心</a></li>
  102.             <li>
  103.                 <a href="#">帮助中心</a>
  104.                 <ul>
  105.                     <li><a href="#">驱动下载</a></li>
  106.                     <li><a href="#">文档下载</a></li>
  107.                     <li><a href="#">常用说明</a></li>
  108.                 </ul>
  109.             </li>
  110.             <li><a href="#">代理加盟</a></li>
  111.             <li><a href="#">联系我们</a></li>
  112.         </ul>
  113.     </div>
  114. </body>
  115. </html>
复制代码
如何使用 jquery制作导航弹出菜单.rar (31.36 KB, 下载次数: 2)



该贴已经同步到 system的微博
制作, 菜单, 导航, jquery, PUBLIC

相关帖子

郑州网站建设|郑州SEO

使用道具 举报

system
分享视频：187 部

管理员

Rank: 12Rank: 12Rank: 12

UID
1
金币
10190 两
贡献
0 点
威望
213 点
视频
187 个
暗恋者
2 人

管理员勋章 忠实居民 优秀会员勋章 亲和大使勋章 英姿飒爽 文韬武略

发表于 2011-11-10 21:13:54 |显示全部楼层
这是今天群里有朋友问这样的问题，刚才有空写下来方便大家学习。对于没有接触过的朋友，可能遇见下面的情况：

1.jpg


这时，只用在提示上面，右键单击，点击允许操作即可。本地打开网页，如果网页当中存在js脚本，IE浏览器都会提示的（IIS发布除外）。祝大家学习愉快。

郑州网站建设|郑州SEO

使用道具 举报

宝贝猪小猪

Rank: 6Rank: 6

UID
82
金币
634 两
贡献
0 点
威望
0 点
视频
0 个
暗恋者
0 人

论坛版主

发表于 2011-11-10 21:25:05 |显示全部楼层
  了解下

使用道具 举报

system
分享视频：187 部

管理员

Rank: 12Rank: 12Rank: 12

UID
1
金币
10190 两
贡献
0 点
威望
213 点
视频
187 个
暗恋者
2 人

管理员勋章 忠实居民 优秀会员勋章 亲和大使勋章 英姿飒爽 文韬武略

发表于 2011-11-10 21:25:43 |显示全部楼层
宝贝猪小猪 发表于 2011-11-10 21:25
了解下

呵呵，不懂的可以在帖子里面问，看到后我就会回复给大家
郑州网站建设|郑州SEO

使用道具 举报

xiaozhao
分享视频：8 部

版主

Rank: 6Rank: 6

UID
66
金币
7225 两
贡献
0 点
威望
1280 点
视频
8 个
暗恋者
0 人

互助金牌勋章 论坛版主 亲和大使勋章 风流倜傥 优秀会员勋章 胸怀大志

发表于 2011-11-10 21:42:19 |显示全部楼层
呵呵

使用道具 举报

轮回。。。
分享视频：6 部

版主

Rank: 6Rank: 6

UID
399
金币
676 两
贡献
0 点
威望
0 点
视频
6 个
暗恋者
0 人

论坛版主

发表于 2012-3-17 16:42:29 |显示全部楼层
下拉！  呵呵

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

关于社区|广告合作|联系我们|隐私条款|免责声明|网站地图|友情链接|帮助中心

Copyright ©2011 SQZY.ORG All Right Reserved.  Powered by Discuz! (豫ICP备11024166号)

本站信息均由会员发表，不代表本网站立场，禁止在本站发表与国家法律相抵触言论！

回顶部