jQuery实现可用于博客的动态滑动菜单

本文实例讲述了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" lang="en" xml:lang="en">
<head>
<title>jQuery滑动菜单插件</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
    (function($){
 $.fn.extend({
     tagdrop: function(options) {
  var defaults = {
      tagPaddingTop: '90px',
      tagDefaultPaddingTop: '30px',
      bgColor: '#B1CCED',
      bgMoverColor: '#7FB0F0',
      textColor: '#e0e0e0',
      textDefaultColor: '#fff'
  };
  var options = $.extend(defaults, options);
  return this.each(function() {
      var obj = $(this);
      var li_items = $("li", obj);
      $("li", obj).css('background-color', options.bgColor);
      li_items.mouseover(function(){
   $(this).animate({paddingTop: options.tagPaddingTop}, 300);
   $(this).css('background-color', options.bgMoverColor);
   $(this).css('color', options.textColor);
      }).mouseout(function() {
   $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);
   $("li",$(this).parent()).css('background-color', options.bgColor);
   $("li",$(this).parent()).css('color', options.textDefaultColor);
      });
  });
     }
 });
    })(jQuery);
</script>
<script type="text/javascript">
    $(document).ready(function() {
 $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});
    });
</script>
<style>
    body {
 margin:0;
 padding:0;
    }
    #nav li {margin: 0; padding: 0;display: inline;list-style-type: none;font-size: 12px;}
    #nav a:link, #nav a:visited {
    }
    #nav a:hover {color: #fff;  background:#FF6A00;}
    #nav a:visited.active, #nav a:link.active {background-color: #fff;color: #FF6A00;}
    .menu {
 list-style:none;
 margin: 0;
 float:right;
    }
    .menu li {
 float:left;
 margin:0 auto;
 cursor:pointer;
 height:30px;
 padding:30px 5px 5px 5px;
 margin:0px 3px 0px 3px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius:0px 0px 10px 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 color: #FFF;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
 font-size:13px;
 font-weight:bold;
 text-transform:uppercase;
    }
</style>
    </head>
    <body>
        <ul class="menu">
            <li>About us</li>
            <li>Contacts</li>
            <li>Others</li>
            <li>Products</li>
    <li>Portfolio</li>
    <li>Testemonies</li>
        </ul>
    </body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 利用JQuery动画制作滑动菜单项效果实现步骤及代码

    利用JQuery动画制作滑动菜单项效果实现步骤及代码

    效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字. 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除), 使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子. 代码如下: 复制代码 代码如下: $(function () { var webNav = { val: { target: 0

  • jQuery实现背景滑动菜单

    话不多说,直接附上源码,仅供大家参考 <div class="menu"> <ul id="menu"> <li><a href="#">JavaScript</a></li> <li value="1"><a href="#">Graphic Design</a></li> <li

  • jquery实现左右滑动菜单效果代码

    jquery实现左右滑动菜单效果代码

    本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具

  • jquery实现仿Flash的横向滑动菜单效果代码

    jquery实现仿Flash的横向滑动菜单效果代码

    本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

  • jquery实现最简单的滑动菜单效果代码

    jquery实现最简单的滑动菜单效果代码

    本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

  • jQuery实现带延迟效果的滑动菜单代码

    jQuery实现带延迟效果的滑动菜单代码

    本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • jQuery实现可用于博客的动态滑动菜单完整实例

    jQuery实现可用于博客的动态滑动菜单完整实例

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

  • jQuery实现可用于博客的动态滑动菜单

    本文实例讲述了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/xhtm

  • 基于JQuery的抓取博客园首页RSS的代码

    基于JQuery的抓取博客园首页RSS的代码

    效果图:实现代码: 复制代码 代码如下: <!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

  • 圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

    圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

    一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远!在这个特殊的日子里,处处洋溢着节日的气氛,空中飘落的雪花更显得浪漫!今天就教大家如何在博客中添加纷纷扬扬的下雪效果.今天,你那里下雪了吗? 首先在页面引入 jQuery 库和 jQuery.snow.js(或者使用压缩版本 jQuery.snow.min.js): 复制代码 代码如下: <script src="jquery.js"></script> <script src="

  • Python如何基于selenium实现自动登录博客园

    Python如何基于selenium实现自动登录博客园

    这篇文章主要介绍了Python如何基于selenium实现自动登录博客园,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需要做的准备: 本文章是使用Chrome,所以需要Chormedriver.exe,具体的下载过程可以百度查到 Selenium是一种自动化测试工具,能模拟浏览器的行为,所以今天我就模拟一下浏览器登陆博客园的行为. 首先,分析问题,登陆博客园需要做些什么: 1.打开浏览器 2.输入博客园主页的网址 3.点击登陆按钮,等待页面跳

  • JS实现新浪博客左侧的Blog管理菜单效果代码

    JS实现新浪博客左侧的Blog管理菜单效果代码

    本文实例讲述了JS实现新浪博客左侧的Blog管理菜单效果代码.分享给大家供大家参考,具体如下: 这里介绍新浪博客左侧的Blog管理菜单,我们变通一下,如果你在设计程序,那么本款菜单用到后台管理中想必应该很合适吧,图片是调用新浪的,用了比较多的图片,你用的时候最好是下载到本地,以免新浪哪天改版了,你就傻了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-blog-left-menu-style-codes/ 具体代码如下: <ht

  • 使用IE6看老赵的博客 jQuery初探

    很郁闷,看个博客吗,还要在安装一个浏览器?俺很懒,俺就是想要用IE6看! 最近在看jQuery,刚刚入一点门,发现了一个有趣的函数,就拿老赵的博客做实验了,哈. 装入一个 HTML 网页最新版本. jQuery 代码: 复制代码 代码如下: $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); <div id=&qu

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • Tomcat部署Bolo动态博客

    Bolo菠萝博客是基于Solo深度定制的动态博客,内置了更多的精美的皮肤,并且可以本地账号登录.官网文档提供了docker部署和tocat部署两种方式,由于我买的服务器性能有限,并便于后期修改,此次就不采用docker部署,直接安装tomcat部署web环境. 我的服务器的镜像是Alibaba Cloud Linux 3,全面兼容RHEL/CentOS 8生态. 安装java jdk 我选择的是openjdk8: dnf install -y java-1.8.0-openjdk-devel 在

  • 基于PHP实现个人博客网站

    基于PHP实现个人博客网站

    目录 一.运行展示 二.功能说明 三.核心代码讲解 1.创建数据库 2.初始化数据 3.登录验证 4.用户注册 5.发表博客 6.更新博客 7.删除博客 8.发表评论 9.修改密码 10.修改昵称 11.管理员删除用户 四.运行环境 五.运行说明 一.运行展示 二.功能说明 未登录用户: 仅可以浏览所有博客的内容. 已登录用户: 浏览所有博客的内容: 发表博客: 删除自己的博客: 修改自己的博客: 在任一博客下评论: 修改昵称和密码. 管理员: 可以执行普通用户的所有功能: 修改任一博客的内容:

随机推荐