Amas的开源Jquery插件【PopNav】

这是啥? 额。。。我叫它多级联动横向弹出可关闭导航。。我了个去。。我自己都晕。。

好吧。。。隆重推出寡人的发布的第二套Jquery开源插件——PopNav(额。我知道名字苦了点)。

如何运用?——你猜。猜对了告诉你。。

好吧,不开玩笑。

==== 首先是html中的调用代码 ====

<script src="js/jquery.1.7.2.min.js"></script> //版本可高不可低
<script src="js/jquery.popnav.js"></script>

==== 必须加载的样式支持 ====

<link href="css/popnav.css" rel="stylesheet" type="text/css" />

==== Dom标准 ====

<div id="popnav">
  <div class="titile">模块标题</div>
  <div class="box">
    <ul class="list">
      <li class="list-li">
        <p class="list-p"><a href="###">一级分类</a></p>
        <div class="popbox">
          <div class="clear-broder"></div>
          <div class="listbox">
            <dl class="dl-content-list yx">
              <dt class="dt-content-list">二级分类</dt>
              <dd class="dd-content-list"><strong>CET </strong>|<a href="###">链接</a><a href="###">链接</a></dd>
            </dl>
            <dl class="dl-content-list">
              <dt class="dt-content-list">二级分类</dt>
              <dd class="dd-content-list"><strong>PETS</strong>|<a href="###">链接</a><a href="###">链接</a></dd>
            </dl>
          </div>
          <div class="news-list">
            <h2 class="title-news-list">推荐标题</h2>
            <ul class="ul-news-list">
              <li class="li-news-list"><a href="###">链接</a></li>
              <li class="li-news-list"><a href="###">链接</a></li>
            </ul>
<a class="close" title="关闭">关闭</a>
          </div>
        </div>
</li>
<li class="list-li">
        <p class="list-p"><a href="###">一级分类</a></p>
        <div class="popbox">
          <div class="clear-broder"></div>
          <div class="listbox">
            <dl class="dl-content-list yx">
              <dt class="dt-content-list">二级分类</dt>
              <dd class="dd-content-list"><strong>CET </strong>|<a href="###">链接</a><a href="###">链接</a></dd>
            </dl>
            <dl class="dl-content-list">
              <dt class="dt-content-list">二级分类</dt>
              <dd class="dd-content-list"><strong>PETS</strong>|<a href="###">链接</a><a href="###">链接</a></dd>
            </dl>
          </div>
          <div class="news-list">
            <h2 class="title-news-list">推荐标题</h2>
            <ul class="ul-news-list">
              <li class="li-news-list"><a href="###">链接</a></li>
              <li class="li-news-list"><a href="###">链接</a></li>
            </ul>
            <a class="close" title="关闭">关闭</a>
          </div>
        </div>
      </li>
</ul>
</div>
</div>

==== 把以下代码放到#popnav同级的下面 ====

<script type="text/javascript">
  $("#popnav").popnav({_event:0});
</script>

 

参数:{
    _event: 0(0为鼠标经过显示)、1(1为鼠标点击显示)、2及以上同0效果
}

Over,搞开源的不容易。啥也不图,只是为了大家服务,给新手一些遍历。。真的。。
这年代太缺雷锋了,如果我们中国多出几个Jquery这样的js库,尽管可能很烂(如某搜索引擎的那个tar。。。),但我们也会支持的,不是么?

我的插件,请善用。如自己能写,请尽量不使用它。它随便利,但毕竟是死的。那天改了需求你还得来求我不是?

转载必须注明出处,否则绝对砸你家窗户。

好了。。。下载Demo

posted @ 2012-10-15 10:29  Amas.lee  阅读(240)  评论(0编辑  收藏  举报