来自 系统操作 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

三种办法,jQuery渐变发光导航菜单的实例代码

品类须要:

图片 1

福寿齐天原理:当选中当前因素时,给当下元素增添样式,同级成分移除样式。

图片 2

点击不一样的领航菜单完毕当前点击的美食指南是高亮的,点击导航上面的某部分类,分类所属的领航也非得是高亮的,点击某一篇小说,文章所属的导航菜单也无法不是高亮的.

下边和豪门大饱眼福一下切实可行的落到实处进程。

意义图如下:

HTML标签结构:

图片 3

复制代码 代码如下:

身体力行代码一:

<ul class="animation_menu">
     <li class="current">
         <a href="#">菜单一<span>菜单一</span></a>
     </li>
     <li>
         <a href="#">菜单二<span>菜单二</span></a>
     </li>
     <li>
         <a href="#">菜单三<span>菜单三</span></a>
     </li>
     <li>
         <a href="#">菜单四<span>菜单四</span></a>
     </li>
 </ul>

切实示例代码如下:

CSS样式:
li的样式:

<!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>
<style>
body,ul,ol,li,div,p{margin:0px;padding:0px;}
ul{list-style-type:none;border:1px solid blue;background:#4f5b93;height:45px;}
ul li{float:left;heihgt:45px;line-height:45px;width:100px;text-align:center;}
ul li a:link,a:visited{color:#fff;text-decoration:none;}
.act{background:#ff6600;}
</style>
<script src="../jquery.js"></script>
<script>
$(function(){
$('ul li').eq(0).addClass("act");
 $('ul li').each(function(){
  $(this).click(function(){
    $(this).addClass("act").siblings().removeClass("act");
   })
 })
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.52aixuexi.com/">首页</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/suibi/">随笔</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/sucai/">素材</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/biancheng/">编程</a></li>
</ul>
</body>
</html>

复制代码 代码如下:

示范代码二:

.animation_menu li{
    /*块状形式彰显,并使其水平平铺展现*/
    display:block;
    float: left;

在菜单层的链接加上四个rel属性,保存href属性即:

    /*宽高是背景图片的*/
    width: 111px;
    height: 50px;

<div id="menu" class="main-nav">
      <dl>
       <dt><a href="/C000001916" class="current">首页</a></dt>
      </dl>
      <dl>
        <dt><a href="/C000001919?lmbm=1" rel="/C000001919?lmbm=1">新闻中心</a></dt>
        <dd class="sn-c">
          <a href="#">产品理念2</a>
          <em>|</em>
          <a href="#">发展历程</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
      <dl>
        <dt><a href="/C000001919?lmbm=2" rel="/C000001919?lmbm=2">产品介绍</a></dt>
        <dd class="sn-c sn3">
          <a href="#">产品理念</a>
          <em>|</em>
          <a href="#">发展历程3</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
    </div>

    /*设置文字垂直水平居中*/
    line-height: 50px;
    text-align: center;

  然后选取浏览器地址栏中的UEscortL和rel相比,假如相等就在现阶段的<a>标签加上class,同期移除其余<a>标签的class.<script type="text/javascript">

    font-weight: bold;
    font-size: 18px;
    list-style-type:none;
}

 var urlstr = location.href;    //获取浏览器的url
 var urlstatus=false;        //标记
 //遍历导航div
 $("#menu a").each(function () {
//判断导航里面的rel和url地址是否相等
  if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
//当前样式保持
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

千帆竞发看到的a的体制:

本条也能基本完结效果与利益,然而只要在导航下一旦有分类,如图.那样分类url和导航的url就不可能相称了,然后消息的url和导航的url也不能够相称.所以照旧有一些扯淡.....那怎么做呢?

复制代码 代码如下:

之所以作者的思路是这么的

.animation_menu li a {
    /*这里是大家背景图片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;

既然url不雷同,那就找导航-->分类-->音讯之间的涉嫌了.他们的相应关系是三个导航下只怕有多少个分类,三个分类下恐怕有多篇音讯.那么逆向的来讲,每一篇新闻或然分类都对应贰个导航.那么在对应的的归类页面和资源消息页面都定义一个变量正是导助航标识识.然后修改导航<div>的<a>标签的rel属性.该属性与该变量比较,假诺一样就改当前的class.

    /*设置position属性是为了里面包车型大巴span能够以a为标准举行牢固*/
    position: relative;

上述内容便是因此三种方法给大家介绍基于jquery落成导航菜单高亮彰显,希望对大家具备补助。

    display: block;

你或者感兴趣的稿子:

  • vuejs 切换导航条高亮(路由菜单高亮)的不二法门身体力行
  • JavaScript贯彻的追寻及高亮展现效果示例
  • 用js查找法达成当前栏指标高亮突显的代码
  • 接纳JS达成导航切换时高亮展现的示范疏解

    /*我们不使用纯浅青*/
    color: #292724;
    text-decoration:none;
}

hover后见到的span的体制:

复制代码 代码如下:

.animation_menu li a span {
    /*此处是我们背景图片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;

    /*设置块格局展现,并制定宽高和a的宽高一样,和相对地方,那是为了使其和a里面包车型大巴文字重合显示*/
    display: block;
    height: 50px;
    width: 111px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;

    color:#FFE2BB;
}

用sprite技术一定,a和span各个状态的体裁:

复制代码 代码如下:

/*寻常情况下的样式*/
.animation_menu li a {
    /*一般淡浅莲灰背景*/
    background-position: 0 -153px;
}
    /*hover银白高亮背景*/
    .animation_menu li a span {
        background-position: 0 -102px;
    }

/*链接激活状态下的体裁*/
.animation_menu li.current a {
     /*相似暗绛红高亮背景*/
    background-position: 0 0;
}
    /*hover黄铜色高亮背景*/
    .animation_menu li.current a span {
        background-position: 0 -51px;
    }

css的工作到此就病逝了,上面大家来寻访javascript。

最后是JavaScript
菜单的渐变效果重如若通过调控opacity达成的,请看上边代码。

复制代码 代码如下:

// 通过将opacity设置为0,将span的样式和文字隐敝起来
$(".animation_menu li a span").css("opacity", "0");

// 绑定hover事件
$(".animation_menu li a span").hover(
    //mouse on事件
    function () {
        // 通过动态的更改opacity从0到1,那样span的体制和文字就能够慢慢的呈现出来,覆盖a的体裁
        $(this).stop().animate({
            opacity: 1
        }, "slow");
    },
    //mouse out事件
    function () {
        // 当鼠标移走的时候,动态改换为0,那样span又看不见了,看到原本的a的体制了。
        $(this).stop().animate({
            opacity: 0
        }, "slow");
    }
);

//绑定click事件,点击当前连连,为li增多current class,相同的时间移除其余li的current class
$(".animation_menu li a").click(function () {
    $(".animation_menu li a").each(function (index, item) {
        $(item).parent().removeClass("current");
    });
    $(this).parent().addClass("current");
});

到此全部了事,希望以此jQuery导航菜单能够给你有个别灵感。

你大概感兴趣的篇章:

  • jQuery ui实现精神的圆角渐变网站导航菜单作用代码
  • jQuery完毕的背景动态变化导航菜单成效
  • jquery仿京东导航/仿天猫商场左侧分类导航下拉菜单效果
  • 依靠jquery达成导航菜单高亮呈现(二种艺术)
  • jquery完结点击向下举办菜单项(伸缩导航)效果
  • jQuery仿京东市肆楼梯式导航定位菜单
  • jQuery完毕的简要下拉菜单导航作用代码
  • jquery实现Infiniti分级横向导航菜单的点子
  • Jquery达成拉动画功用的经文二级导航菜单
  • jQuery落成的导航下拉菜单效果
  • jQuery完毕导航栏底部菜单项点击后转移颜色的方法

本文由六合联盟网发布于系统操作,转载请注明出处:三种办法,jQuery渐变发光导航菜单的实例代码

关键词: