zoukankan      html  css  js  c++  java
  • 一个简单的导航菜单 纯js

    <!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>Ipa-Acn</title>
        
    <style type="text/css">
             .menu
    { margin-right:18px;}
        
    </style>
    <script src="jquery.js"></script>
    <script>
    var menu = [
        [
    {url:"http://www.baidu.com",name:"baidu",css:"menu"},{url:"http://www.qq.com",name:"qq",css:"menu"}],
        [
    {url:"http://www.google.com",name:"google",css:"menu"},{url:"http://www.taobao.com",name:"taobao",css:"menu"}]
        ]


    function Show(id)
    {

         
    var o = document.getElementById("SubMenu");
    o.style.visibility
    ='visible';

         
    var list = menu[id];
         
    var str ="";
         
    for(i=0; i<list.length;i++)
         
    {
            str 
    += "<a href='"+list[i].url+"'  class='"+list[i].css+"' >"+list[i].name+"</a> ";
            
         }

         o.innerHTML
    =str;
    }

    function Hidden()
    {
         
    var o = document.getElementById("SubMenu");
        o.style.visibility
    ='hidden';

    }




    </script>
    </head>
    <body>
    <div onmouseover='Hidden()'>header</div>
       
    <div id="Menu"><href="#" OnMouseOver="Show(0)">abc</a> <href="#" OnMouseOver="Show(1)" >kk kkkk</a>
       
    </div>
        
    <div id="SubMenu" style="height:30px; border:solid #FF0000" ></div>
    <div onmouseover='Hidden()'>bode</div>

    </body>
    </html>

    因为其它的浏览器不支持onmouseleave事件。。所有只能在菜单的周围加上onmouseover的事件用它来隐藏菜单
    ----lovebanyi lookcode.net

    打开新页面的时候希望可以保留 菜单(或子菜单)选中的样式
    请删掉 Hidden()函数 并加入以下的代码
    function loadMenu()
    {
        
    var o = document.getElementById("SubMenu");
        
    var url = document.location.href;
        
    var temp = url.split('/');
        
    var page= temp[temp.length-1].toLowerCase();
        
        
    for(i=0;i<menu.length;i++)
        
    {
            
    var item = menu[i];
           
    for(j=0;j<item.length;j++)
           
    {
                
    var url = item[j].url.toLowerCase();
                
    if (url==page)
                
    {
                   item[j].css 
    +=" current";
                   
    //alert(item[j].css);
                    show(i);
                   
                    
    return;
                }

           }

        }

    }

    current 样式是鼠标移过去的样式。

    loadMenu请在body中加载
    <body onload="loadMenu()">

    menu只需要放到 masterpage就可以了
  • 相关阅读:
    使用zinnia制作android手写输入功能(上)编译zinnia
    Raphael实例
    正则表达式 笔记
    已知弧长和弦长求半径
    Raphael参考 翻译完毕
    在chorme中查找多余的css规则
    CSS3中Transform
    手机移动端WEB资源整合
    JS判断移动设备最佳方法 并实现跳转至手机版网页
    让IE和Firefox兼容的CSS技巧集合css hack
  • 原文地址:https://www.cnblogs.com/lovebanyi/p/1194557.html
Copyright © 2011-2022 走看看