html

<ul class="list">
  <li>下拉菜单
    <ul class="nav">
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
    </ul>
  </li>
  <li>下拉菜单
    <ul class="nav">
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
    </ul>
  </li>
  <li>下拉菜单
    <ul class="nav">
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
    </ul>
  </li>
  <li>下拉菜单
    <ul class="nav">
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
    </ul>
  </li>
  <li>下拉菜单
    <ul class="nav">
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
      <li>下拉菜单1</li>
    </ul>
  </li>
</ul>

css

*{margin:;padding:;}
.list{width:500px;height:30px;line-height:30px;list-style-type:none;margin:50px auto;color:#fff;}
.list li{width:100px;height:30px;text-align:center;float:left;font-size:14px;background:#333;cursor:pointer}

js

<script type="text/javascript">
/**全局的
(function($){
$.fn.extend({
"nav":function(){
$(".nav").css({
"list-style-type":"none",
"margin":0,
"padding":0,
"display":"none"
});
$(this).find(".nav").parent().mouseover(function(){
$(this).find(".nav").slideDown("normal")
});
$(this).find(".nav").parent().mouseout(function(){
$(this).find(".nav").stop().slideUp("normal")
})
} })
})(jQuery); $(function(){
$(".list").eq(0).nav();
})
**/
//局部的
(function($){
$.extend({
"nav":function(color){
$(".nav").css({
"list-style-type":"none",
"margin":0,
"padding":0,
"display":"none",
"color":color
});
$(".nav").parent().mouseover(function(){
$(this).find(".nav").slideDown("normal")
});
$(".nav").parent().mouseout(function(){
$(this).find(".nav").stop().slideUp("normal")
})
} })
})(jQuery); $(function(){
$.nav("blue");
})
</script>

jquery导航栏的更多相关文章

  1. jquery导航栏html页面跳转导航字体变色

    html代码: <div class="collapse"> <ul class="nav"> <li><a href ...

  2. jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  3. 一句实现jquery导航栏

    /*mine 才疏学浅,望大神绕行 */ .current{ color: red; font-size: large; } $(function(){ //实现点击标题的css和.lev1下面的a标 ...

  4. jquery导航栏高亮(二级菜单点击一级保持高亮)

    <script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...

  5. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  6. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  7. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  8. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  9. 如何用jQuery实现在鼠标滚动后导航栏保持固定

    要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...

随机推荐

  1. 用Block封装ASIHttpRequest

    用Block封装ASIHttpRequest 横方便的网络请求方法,不用每次都写代理方法.使代码先得很整齐,不会凌乱. 接口部分: // // LYHASIRequestBlock.h // ASIB ...

  2. AngularJS Best Practices: ngRoute

    app/----- components/---------- users/--------------- controllers/-------------------- users.control ...

  3. RDIFramework.NET平台代码生成器V2.8发布-更新于2014-12-31(提供下载)

    RDIFramework.NET平台代码生成器V2.8发布  更新于2014-12-31 注:已经发布了新版本,请转新版本下载: RDIFramework.NET平台代码生成器V3.0版本全新发布-更 ...

  4. RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考

    RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考 RDIFramwork.NET框架对数据库的事务做了很好的控制,对多表或多条语句需要在同一事务执行提供了很好的支持,同时支持任 ...

  5. WGS84坐标和UTM坐标的转换

    如题.做了一个Demo,主要是把最后面的参考资料1里面的脚本改成了C语言版本的. 代码: #ifndef __COORCONV_H__ #define __COORCONV_H__ #include ...

  6. csuoj 1511: 残缺的棋盘

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1511 1511: 残缺的棋盘 时间限制: 1 Sec  内存限制: 128 MB 题目描述 输入 ...

  7. web前端编写注意点

    1.在语义不明显,既可以用 <P> 也可以用 <div> 的地方,尽量用 <P> ,因为 <P> 默认情况下有上下间隔,去样式后的可读性更好,对兼容特殊 ...

  8. JQ 全选、全不选

    $(document).ready(function() { $("#isalldebt").click(function() { if ($(this).attr("c ...

  9. C++学习笔记(1)——数据类型占空间大小

    boolean bool 1 byte   character char 1 byte May be signed or unsigned   wchar_t 1 byte     char16_t ...

  10. s3c2440 移值u-boot-2016.03 第5篇 支持dm9000 识别

    1, 通过查看 /drivers/net/Makefile 发现想要编译上,需要添加宏 /include/configs/smdk2440.h 中添加 #define CONFIG_DRIVER_DM ...