中国万网导航栏CSS与JS研究

说起来这个导航条没有什么特别的地方,只是觉得这种形式的导航用到的地方还挺多的,就想研究研究,看了代码之后,发现JS这一块写的还是蛮不错的。

先来看一下效果演示

 

 

 

中国万网导航条

中国万网导航条

CSS部分:将整个导航条放在ID为mainmenu_body的Div里面,然后分上下两个Div,根据ID分别命名为:mainmenu_top,mainmenu_bottom。(这里我觉得命名的不好,整个导航条用了ID之后,内部元素使用class命名就可以了)

mainmenu_bottom宽度设置为100%,自适应mainmenu_body的宽度,可以很方便到引用到其他地方或者修改。

对于每一个顶级栏目,下面的二级栏目设置不同的padding-left来让二级栏目向右顶,保持和顶级栏目位置相同。

CSS部分就这些吧,看了整个样式表,也都中规中矩。

JS部分:这个导航条的JS效果写的还蛮不错的,前端开发的童鞋们可以好好研究下~高手的飘过哈~本人JS水平一般~

第一个就是document.getElementById这个属性,根据元素的ID来获得元素。但是这个导航条用了一个函数来实现,分别针对不同的浏览器写了不同的实现方式:

function getObject(objectId)//获取id的函数
    {
        if(document.getElementById && document.getElementById(objectId)) {
        // W3C DOM
        return document.getElementById(objectId);
        } else if (document.all && document.all(objectId)) {
        // MSIE 4 DOM
        return document.all(objectId);
        } else if (document.layers && document.layers[objectId]) {
        // NN 4 DOM.. note: this won't find nested layers
        return document.layers[objectId];
        } else {
        return false;
        }
    }

可以看到,针对不同的浏览器写了不同的获取方法,但是不知道为什么样这样写,直接使用DOM里面的getElementById不行吗?为什么非要用浏览器自己的私有方式,更高效吗?

同时,上面这段代码检测浏览器的方式也是非常好的,没有使用navigator属性,而是使用是否支持某个属性来判断,这个方式是JavaScript DOM 编程艺术 那本书里面特别提到的,比navigator属性要方便简单很多。

function SetTimer()//主导航时间延迟的函数
    {
        for(j=1; j <10; j++){
            if (j == number){
                if(getObject("mm"+j)!=false){
                    getObject("mm"+ number).className = "menuhover";
                    getObject("mb"+ number).className = "";
                }
            }
            else{
                 if(getObject("mm"+j)!=false){
                    getObject("mm"+ j).className = "";
                    getObject("mb"+ j).className = "hide";
                }
            }
        }
    }

这段函数是实现导航条背景颜色变换效果的,鼠标指上去时,给当前元素添加新样式。

function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
    {
        number = Num;
        sourceObj = thisobj;
        secondLeft = 1;
        timer = setTimeout('CheckTime()',100);
    }

这里添加了延迟时间,可以有效的减少误操作,同时也可以减轻浏览器负担,避免鼠标快速滑过也会导致导航条切换。

这已经把大部分的JS代码列出来了,都是比较有借鉴意义的。

下面要说的这个是非常棒的一个函数了,他会检测到当前页面是哪个页面,然后让那个页面的导航条处于鼠标指上去的状态。

function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小写
//thisUPage=thisUPage.substring(0,4)

		if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
		{
			getObject("mm1").className="menuhover"
			getObject("mb1").className = "";
		}
		else if(thisUPage_s=="domain")
		{
			getObject("mm2").className="menuhover"
			getObject("mb2").className = "";
		}
		else if(thisUPage_s=="hosting")
		{
			getObject("mm3").className="menuhover"
			getObject("mb3").className = "";
		}
		else if(thisUPage_s=="mail")
		{
			getObject("mm4").className="menuhover"
			getObject("mb4").className = "";
		}
		else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
			getObject("mm5").className="menuhover"
			getObject("mb5").className = "";
		}
		else if(thisUPage_s=="promotion"){
			getObject("mm6").className="menuhover"
			getObject("mb6").className = "";
		}
		else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
			getObject("mm7").className="menuhover"
			getObject("mb7").className = "";
		}
		else if(thisUPage_s=="benefit"){
			getObject("mm8").className="menuhover"
			getObject("mb8").className = "";
		}
		else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
			getObject("mm9").className="menuhover"
			getObject("mb9").className = "";
		}
		else
		{
			getObject("mm1").className="";
			getObject("mb1").className = "";
		}
}

window.load=mmenuURL()

看到了吗,是通过检测当前网站的路径来确定需要激活的页面了,不同的导航条对应不同的文件路径,当然这是万网的网站结构,也可以是其他的区别方式,这点对于前段开发的童鞋们来说,还是非常值得借鉴的

下面要说的是这个导航条出处理不好的一点,行为和结构没有完全分开

中国万网导航条

中国万网导航条

行为还是依靠结构来支撑,如果要修改行为,势必要对结构进行修改。

比较放的方式应该是获取主导航条的所有li元素,为每个元素添加一个onmouseover时间,至于参数这块,可以通过数据下表,或者传递参数的方式来实现!

原文链接:,转发请注明来源!

发表评论