太平洋电脑网左边菜单的实现

       由于本周同事请假了,所以她的任务得由我来接受。她走之前就告诉我说展示页面的那棵树要改造成太平洋电脑网左边菜单的样式,效果图如:http://product.pconline.com.cn/

        昨天下午研究了一下其源代码,然后一点点剥去不要的代码,最后基本实现了这棵树的代码如下:

         


    

xmlns="http://www.w3.org/1999/xhtml">测试菜单的实现







 

 


 
//产品菜单
if (document.getElementById("leftmenu")){
var sfEls = document.getElementById("leftmenu").getElementsByTagName("li");
for (var i=0; isfEls[i].οnmοuseοver=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].οnmοuseοut=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"),
"");
}
}
}


 

     建一个目录page,然后把这段代码粘到一个新建html文件里,在page所在目录下再建一个images目录,把太平洋用到的一张背景图片gifbg.gif放到里面,下载路径是:http://www1.pconline.com.cn/price/v2_1/art/images/gifbg.gif

    运行一下基本这个菜单可以展示出来了。

    其实他们整个网站基本都是基于div+css的样式,而很少用到table/tr/td。大部分是dd、dl、ul、li等。从上面也可以看出该菜单就写了一个js基本函数,只是改变其li的样式class属性。其实现基本是css里来实现的。

    不过在我嵌到我的项目里的时候,发现点击链接的时候总会出现一个虚线框。

     开始以为是什么样式导致的,最后网上搜了一篇文章《点击链接出现虚线框问题》才知:

    转:http://hi.baidu.com/%C1%F8%B3%C7%C0%CB%D7%D3/blog/item/cb725a1ecd0e1869f624e42c.html

    无论文字还是图片鼠标点击链接都会出现一个虚线框,这是问什么呢?不能去掉吗?
答案是能够去掉,这是关于CSS 中的 outline 属性,有人试验发现在IE中和Firefox中的的虚线框范围并不一样,也就是说:
IE 和 Firefox 对于 outline的解析范围并不一样,IE 认为虚线框就是文字或图片外border的边缘,而 Firefox 则认为虚线框是文字或图片的范围。

解决办法是:
      IE 中使用它的私有的html属性:hideFoucs,在标签中加入 hidefocus=”true” 属性即可。

          即:
                  文字或图片
     Firfox 浏览器中则相对于在IE中就比较容易啦,可以直接给标签 链接定义一个样式 outline:none; 就可以了,
          即:

                   a:foucs{outline:none;}.

你可能感兴趣的:(DIV+CSS,class,javascript,服务器,网络,float,firefox)