`

jquery 导航代码，兼容IE6,IE7,FF,OPREA,谷歌

 
阅读更多
jquery 导航代码，兼容IE6,IE7,FF,OPREA,谷歌。自己修改其的BUG,特此保存以后研究。
2010年05月21日 星期五 下午 3:00

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-ui/js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
   $(document).ready(function(){
    $("#nav-one li").hover(
     function(){ $("ul", this).slideDown("1000"); },
     function() {$("ul", this).slideUp("1000"); }
    );
   if (document.all) {
     $("#nav-one li").hoverClass ("sfHover");
    }
   });
  
   $.fn.hoverClass = function(c) {
    return this.each(function(){
     $(this).hover(
      function() { $(this).addClass(c); },
      function() { $(this).removeClass(c); }
     );
    });
   };  
</script>
<style type="text/css">

/* Navigation */
.nav, .nav ul { list-style: none;margin: 0;padding: 0;}
.nav {font-family: Arial, Helvetica, sans-serif;z-index: 100;position: relative;}
.nav li {border-left: 1px solid #000;float: left; margin: 0;padding: 0;position: relative;}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {font: bold 1.22em/25px Arial, Helvetica, sans-serif;background: #565656;color: #959595;display: block; padding: 0 9px;text-transform: lowercase; text-decoration: none;}


#nav-one li:hover a, #nav-one li.sfHover a {background: #00f;color: #fff;}
#nav-one li:hover ul a, #nav-one li.sfHover ul a { background: #565656;color: #959595; }
#nav-one li:hover ul a:hover, #nav-one li.sfHover ul a:hover {background: #f00;color: #fff; }


.nav ul{background: #565656; border-bottom: 1px solid #000;width: 100px;position: absolute;top: 25px; display:none;left: -1px;}
.nav li:hover ul,.nav li.sfHover ul { display: block;}


.nav ul li {border: 0;float: none;}
.nav ul a {border: 1px solid #000;border-bottom: 0;padding-right: 20px;width: 80px; white-space: nowrap;}
.nav ul a:hover {background: #ccc;color: #000;}
</style>
</head>

<body>

<ul id="nav-one" class="nav">
    <li>
     <a href="#item1">item 1</a>
     <ul>
      <li><a href="#item1.1">item 1.1</a></li>
      <li><a href="#item1.2">item 1.2</a></li>
      <li><a href="#item1.3">item 1.3</a></li>
      <li><a href="#item1.4">item 1.4</a></li>
     </ul>
    </li>
    <li>
     <a href="#item2">item 2</a>
     <ul>
      <li><a href="#item2.1">item 2.1</a></li>
      <li><a href="#item2.2">item 2.2</a></li>
     </ul>
    </li>
    <li>
     <a href="#item3">item 3</a>
     <ul>
      <li><a href="#item3.1">item 3.1</a></li>
      <li><a href="#item3.2">item 3.2</a></li>
     </ul>
    </li>
    <li>
     <a href="#item4">item 4</a>
     <ul>
      <li><a href="#item4.1">item 4.1</a></li>
      <li><a href="#item4.2">item 4.2</a></li>
      <li><a href="#item4.3">item 4.3</a></li>
     </ul>
    </li>
   </ul>

</body>
</html>
分享到：
| 拦截器配置错误：The content of element t ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)

    "JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)"是一个专门为JavaScript环境设计的，旨在解决跨浏览器兼容性问题的日期选择工具。这个组件的目标是确保在不同浏览器如Internet Explorer（IE）、Firefox、...

    好益网址导航win8版

    整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...

    php麦乐网址导航win8版v1.2

    整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...

    纯js写的java搜索框，无数据库，ＩＥ，火狐兼容

    5. **浏览器兼容性**：由于提到了对IE和Firefox的兼容性，开发者可能使用了像jQuery这样的库，或者手动实现了跨浏览器的兼容代码，以确保在不同浏览器上的行为一致。对于旧版本的IE，可能需要特别关注CSS和...

    好益网址导航.zip

    整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...

    asp麦乐网址导航Win8风格v1.3

    整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...

    麦乐网址导航(Metro风格) v1.1 Win8版.rar

    麦乐网址导航(Metro风格)整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态...

    麦乐网址导航 v1.3 win8版.zip

    整站采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...

    麦乐导航Win8风格 v1.3

    整站采用html5+css+jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台傻瓜式、简单易学...

    麦乐网址导航win8版metro风格

    整站采用html5+css+jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序采用纯静态，无后台傻瓜式、简单易学...

    麦乐网址导航win8版 1.3.zip

    麦乐网址导航win8版采用html5 css jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。 本程序修改纯静态，无后台...

    麦乐网址导航 win8版 v1.2

    整站采用html5+css+jquery布局，静态版单页面，修改非常简单，直接上传到自己空间就可以使用，本源代码兼容ie6、ie7、ie8、ie9、firefox、chrome，oprea、sofari浏览器。本程序修改纯静态，无后台傻瓜式、简单易学，...

    jQuery提示效果 在中间提示(改善提示效果)

    本插件小巧玲珑，不到10KB（除jQuery库以外），兼容IE6,IE7,IE8,fireworks,oprea等主流浏览器，适用于各种分辨率下。用于取代过去以往的对话框式的消息框，看起来对用户提示信息更加友好。jQuery提示效果 jQuery tip...

    Oprea浏览器安卓版

    Oprea浏览器安卓版

    JavaScript 日历，兼容所有主流浏览器

    本日历算不上什么控件，但是好修改、好用,如果分要加上个版本，那就叫 1.0 吧 本日历兼容 IE6、IE7、IE8,Firefox,Oprea,Chrome,Safari

    JQUEYR PLUGIN - AreaOPT

    完美支持IE6+,FF,OPREA,CHROME 后期制作：增加可配置选项，美化界面，AJAX数据，数据自由绑定，函数扩展 更新说明： 1、更新了界面显示效果 2、优化了选择方式 3、优化了CSS控制 4、默认为在输入框右边，超过网页...

    仿QQ空间消息提示框

    本插件小巧玲珑，不到10KB（除jQuery库以外），兼容IE6,IE7,IE8,fireworks,oprea等主流浏览器，适用于各种分辨率下。用于取代过去以往的对话框式的消息框，看起来对用户提示信息更加友好。其css的图片是用的QQ空间的...

    Oprea10, 网博士，雪狐桌面精灵等综合安装包

    里面包括如下软件： 1、picpick_inst_2.2.6 2、DesktopSpriteV4.0_XP 3、WebSaver_4.7.0.606_portable 4、Opera_1051_int_Setup

    android 4.0 oprea 浏览器

    android 4.0 oprea 浏览器。支持最新版 安卓

    微分几何及其应用[John.Oprea].pdf

    微分几何及其应用[John.Oprea].pdf

Magicbox
Global site tag (gtag.js) - Google Analytics