导航菜单

    /*用cookie防刷新位置菜单*/
function navQieHuan(c,cl)
{
    var d=document.getElementById("menu").getElementsByTagName("a");
    if(!cl)
    {
        writeCookie("hovers",c,222);
    }
    c=readCookie("hovers")?readCookie("hovers"):c;
    for(i=0;i<d.length;i++)
    {
        d[i].className=i==c?"hover":"";
    }
}
function writeCookie(name, value, hours)
{
  var expire = "";
  if(hours != null)
  {
    expire = new Date((new Date()).getTime() + hours * 3600000);
    expire = "; expires=" + expire.toGMTString();
  }
  document.cookie = name + "=" + escape(value) + expire;
}
// Example:
// alert( readCookie("myCookie") );
function readCookie(name)
{
  var cookieValue = "";
  var search = name + "=";
  if(document.cookie.length > 0)
  {
    offset = document.cookie.indexOf(search);
    if (offset != -1)
    {
      offset += search.length;
      end = document.cookie.indexOf(";", offset);
      if (end == -1) end = document.cookie.length;
      cookieValue = unescape(document.cookie.substring(offset, end))
    }
  }
  return cookieValue;
}
function clear()
{
    writeCookie("hovers","",222);
    document.location=document.location.href;
}
navQieHuan(0,1)
</script>

<div clas="">

 <div class="left_border"></div> <!--  nav左边圆角-->

    <div class="nav_content">

        <ul>

            <li class="nav_on" id="mynav0" οnmοuseοver=javascript:navQieHuan(0)><a href=""><span>首页</span></a></li>

            <li class="nav_off" id="mynav1" οnmοuseοver=javascript:navQieHuan(1)><a href=""><span>新闻</span></a></li> 

      </ul>

 <div class="bun_con1"> <!-- 触发的事件-->
            <div id="qh_con0" style="display: block">
                          <span  id="color" class="aff"><a href="#">发布</a></span>
                          <span id="color" ><a href="#">论坛</a></span>
                          <span id="color" ><a href="#">参与</a></span>     
                    </div>
                    <div id="qh_con1" style="display: none">   
                        <span class="aff" id="color" ><a href="#">发布</a></span>
                        <span id="color" ><a href="#">论坛</a></span>
                        <span id="color" ><a href="#">参与</a></span>   
                    </div>

                </div>

   </div> <!--  nav中间内容-->

  <div class="right_border"></div><!--  nav右边圆角-->



</div>

 

 

注:

ul li a:hover{background:url(点击li左边的圆角)no-repeat;}li a:hover 左边

ul li a:hover span{background:url(点击li右边的圆角span背景)no-repeat;}li a:hover span 点击显示右边背景

转载于:https://my.oschina.net/glelaine/blog/23627

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值