开发者社区> 技术小美> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

导航特效

简介:
+关注继续查看

<!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=utf-8" />
<title>jquery导航菜单二级菜单slide滑动渐隐显示</title>
<meta name="description" content="jquery导航菜单制作一个二级菜单导航条,鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录。jQuery下载" />

</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(images/headerbg.png) no-repeat;}
.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;}
.nav{width:960px;margin:0 auto;}
.nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;}
.nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;}
.nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;}
.nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:39px;left:6px;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#ddd;font-weight:800;}
</style>

<script type="text/javascript" src="http://www.jsfoot.com/skinnew/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
function dropMenu(obj){
 $(obj).each(function(){
  var theSpan = $(this);
  var theMenu = theSpan.find(".submenu");
  var tarHeight = theMenu.height();
  theMenu.css({height:0,opacity:0});
  theSpan.hover(
   function(){
    $(this).addClass("selected");
    theMenu.stop().show().animate({height:tarHeight,opacity:1},400);
   },
   function(){
    $(this).removeClass("selected");
    theMenu.stop().animate({height:0,opacity:0},400,function(){
     $(this).css({display:"none"});
    });
   }
  );
 });
}

$(document).ready(function(){
 
 dropMenu(".drop-menu-effect");

});
</script>


<div class="navbox">
 <div class="nav">
  <ul class="clearfix">
   <li><a class="selected" target="_blank" href="http://www.jsfoot.com/"><span>网站首页</span></a></li>
   <li class="drop-menu-effect">
    <a target="_blank" href="http://www.jsfoot.com/jquery/"><span>jquery代码</span></a>
    <ul class="submenu">
     <li><a href="http://www.jsfoot.com/jquery/images/">jquery图片特效</a></li>
     <li><a href="http://www.jsfoot.com/jquery/menu/">jquery导航菜单</a></li>
     <li><a href="http://www.jsfoot.com/jquery/xxk/">jquery选项卡特效</a></li>
     <li><a href="http://www.jsfoot.com/jquery/xxk/">jquery文字特效</a></li>
    </ul>
   </li>
   <li class="drop-menu-effect">
    <a target="_blank" href="http://www.jsfoot.com/jquery/images/"><span>jquery图片特效</span></a> 
    <ul class="submenu">
     <li><a href="http://www.jsfoot.com/jquery/images/qh/">jquery图片切换</a></li>
     <li><a href="http://www.jsfoot.com/jquery/images/hdp/">jquery幻灯片</a></li>
     <li><a href="http://www.jsfoot.com/jquery/images/cj/">jquery图片滚动</a></li>
     <li><a href="http://www.jsfoot.com/jquery/images/fdj/">jquery图片放大镜</a></li>
     <li><a href="http://www.jsfoot.com/jquery/images/gg/">jquery广告</a></li>
     <li><a href="http://www.jsfoot.com/jquery/images/more/">jquery更多特效</a></li>
    </ul>
   </li>
   <li class="drop-menu-effect">
    <a target="_blank" href="http://www.jsfoot.com/jquery/menu/"><span>jquery导航菜单</span></a> 
    <ul class="submenu">
     <li><a href="http://www.jsfoot.com/jquery/menu/dh/">jquery动画菜单</a></li>
     <li><a href="http://www.jsfoot.com/jquery/menu/sx/">jquery树形菜单</a></li>
     <li><a href="http://www.jsfoot.com/jquery/menu/xl/">jquery下拉菜单</a></li>
     <li><a href="http://www.jsfoot.com/jquery/menu/yj/">jquery右键菜单</a></li>
     <li><a href="http://www.jsfoot.com/jquery/menu/more/">jquery更多特效</a></li>
    </ul>
   </li>
   <li class="drop-menu-effect">
    <a target="_blank" href="http://www.jsfoot.com/jquery/xxk/"><span>jquery选项卡特效</span></a>
    <ul class="submenu">
     <li><a href="http://www.jsfoot.com/jquery/xxk/qh/">jquery选项卡切换</a></li>
     <li><a href="http://www.jsfoot.com/jquery/xxk/hd/">jquery滑动选项卡</a></li>
     <li><a href="http://www.jsfoot.com/jquery/xxk/more/">jquery更多特效</a></li>
    </ul>
   </li>
   <li class="drop-menu-effect">
    <a target="_blank" href="http://www.jsfoot.com/jquery/xxk/"><span>jquery文字特效</span></a> 
    <ul class="submenu">
     <li><a href="http://www.jsfoot.com/jquery/letter/gd/">jquery文字滚动</a></li>
     <li><a href="http://www.jsfoot.com/jquery/letter/ss/">jquery文字闪烁</a></li>
     <li><a href="http://www.jsfoot.com/jquery/letter/qh/">jquery文字切换</a></li>
     <li><a href="http://www.jsfoot.com/jquery/letter/sl/">jquery文字数量</a></li>
     <li><a href="http://www.jsfoot.com/jquery/letter/gb/">jquery文字改变</a></li>
     <li><a href="http://www.jsfoot.com/jquery/letter/more/">jquery更多特效</a></li>
    </ul>
   </li>
  </ul>
 </div>
</div>

</body>
</html>





















本文转自蓬莱仙羽51CTO博客,原文链接:http://blog.51cto.com/dingxiaowei/1366619,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
3D特效焦点图
在线演示 本地下载
473 0
超炫全屏焦点图插件
在线演示 本地下载
442 0
9款鼠标划入卡片特效
在线演示 本地下载
495 0
如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/XqYroe 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
741 0
15款手机CSS3动画导航特效
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
394 0
手风琴图片和钢琴导航栏JQ滑动特效
手风琴JQ滑动特效 1.效果预览: 556.gif 2.相关代码: Title * { margin: 0; padding: 0; } .
787 0
炫光特效
http://echarts.baidu.com/index.html
450 0
导航特效
jquery导航菜单二级菜单slide滑动渐隐显示 *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:visited{color:#5e5...
736 0
jQuery插件 - 面包屑导航
这个导航不同于常见的导航条,比较有意思,个人觉得体验不怎么好。。。。。。    演示: http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.
872 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
3D动画的菜谱式灯光与云渲染
立即下载
360°全景视频播放器的实现原理
立即下载
低代码开发师(初级)实战教程
立即下载