js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 导航菜单

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

发布时间:2015-08-29 14:59:08    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效
<!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实现顶部固定、二级栏目之间相互滑动的导航菜单特效</title>
<link href="css/topanv.v1.0.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/topanv.js"></script>
</head>
<body>

<!-- 代码begin -->
<div id="topnavbar" style="display: block;">
  <div id="topnanv" style="width: 980px;">
    <div class="defu"> <a href="#" target="_self">首页</a> </div>
    <div id="anvlfteb">
      <div selec="bbs" class="posbox"> <a href="http://www.jstxdm.com">新闻</a> <i></i></div>
      <div selec="news" class="posbox"><a href="http://www.jstxdm.com">信息</a> <i></i></div>
      <div selec="post" class="posbox"><a href="http://www.jstxdm.com">商家</a> <i></i></div>
      <div selec="youhui" class="posbox"><a href="http://www.jstxdm.com">社区</a> <i></i></div>
      <div selec="other" class="posbox"><a href="http://www.jstxdm.com">团购</a> <i></i></div>
      <div selec="store" class="posbox"><a href="http://www.jstxdm.com">房产</a> <i></i></div>
      <div id="seledbox" class="posiabox" style="display: none; left: 1px;">
        <div> </div>
      </div>
    </div>
    <div id="loginbtm"> <a style="color:#FFF" target="_blank" href="#">免费发布信息</a> </div>
  </div>
</div>
</body>
</html>



栏目 顶部固定 滑动 导航 菜单

jquery绿色的按栏目下拉,信息搜索输入框特效代码

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

css3鼠标滑过栏目图片滑动切换动画特效

jQuery仿爱淘宝导航分类、菜单栏目可伸缩展开特效代码