DIVCSS 帮朋友写的一个导航栏效果

[复制链接]
小邪明星会员实名认证 发表于 2014-7-31 12:09:45 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
本帖最后由 小邪 于 2014-7-31 13:10 编辑

此效果为discuz导航效果,
如果有需要的可以自己拿去修改使用。



效果内容:

默认显示后台导航说明出设置的英文

鼠标滑过后向上滚动 ,显示出中文菜单

鼠标移出后下滚,重新显示英文菜单

如果菜单为高亮,则默认显示中文


具体的效果可以查看
http://impstudio.org/js/nvd.html

  1. <style>
  2. .nav { width: 680px; float: right;}
  3. .nav ul li { float: left; width: 100px; height: 98px; text-align: center; list-style: none;}
  4. .nav ul li a { height: 20px; overflow: hidden; display: block;}
  5. .nav ul li span { display: block; line-height: 20px;}
  6. .nav ul li.a p { margin-top: 0px;}
  7. .nav ul li p { margin-top: -20px;}
  8. </style>
  9. <div class="nav">
  10.     <ul>
  11.         <li  id="mn_portal"><a href="#" hidefocus="true" title="Home">首页<span>Home</span></a></li>
  12.         <li id="mn_P1"><a href="#" hidefocus="true" title="Service">服务<span>Service</span></a></li>
  13.         <li class="a"  id="mn_P3"><a href="#" hidefocus="true" title="Example">案例<span>Example</span></a></li>
  14.         <li id="mn_P2"><a href="#" hidefocus="true" title="About">关于<span>About</span></a></li>
  15.     </ul>
  16. </div>
  17. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
  18. <script type="text/javascript">
  19. var jQuery = jQuery.noConflict();
  20. jQuery(document).ready(function() {
  21.     // 给导航中a标签里面新增两个辅助标签
  22.     jQuery('.nav > ul > li > a').wrapInner(function(){
  23.         return '<div><p></p></div>';
  24.     });
  25.     jQuery('.nav > ul > li').each(function(){
  26.         if(jQuery(this).hasClass('a')){  // 判断li是否被高亮
  27.             return;   // 如果li被高亮,则跳过         
  28.         }else{
  29.             jQuery(this).hover(function(){  // 反之没有高亮的 , 继续执行
  30.                 jQuery(this).find('p').stop().animate({'margin-top': '0px'},200);
  31.             },function(){
  32.                 jQuery(this).find('p').stop().animate({'margin-top': '-20px'},200);
  33.             })
  34.         }
  35.     })

  36. });
  37. </script>
复制代码

转载请注明出处:站帮网 - 小邪







上一篇:PHP操作数组十技巧
下一篇:淘宝卖货转化率不光只有详情页
有事直接私聊

大神点评6

 楼主| 小邪明星会员实名认证 发表于 2014-7-31 12:10:01 [DIVCSS] 显示全部楼层
占楼备用
lyrric 发表于 2014-7-31 17:38:03 [DIVCSS] 显示全部楼层
怎么没图啊
 楼主| 小邪明星会员实名认证 发表于 2014-7-31 19:12:38 [DIVCSS] 显示全部楼层

   要图干什么呢 ?
这个是效果,  有demo ,
直接看demo啊.
有事直接私聊
liqiang_fu明星会员实名认证 发表于 2014-8-1 09:35:42 [DIVCSS] 显示全部楼层
不错 来支持下
磁铁厂家;http://www.krqcitie.com/
看帖回帖是种美德.您的一个回帖能给我们楼主很大的发帖动力!
飞墨SEO阿望明星会员实名认证 发表于 2014-8-4 15:41:12 [DIVCSS] 显示全部楼层
效果还可以啊
寻找回忆的终点 发表于 2014-8-25 08:43:44 [DIVCSS] 显示全部楼层
不错,支持下
智能建站www.3135.com
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表