关于圆角的实现以及鼠标移入显示二级菜单的兼容处理！

在这时碰到了一个圆角边框的问题，以前的代码是在每个页面写一个固定结构的div，使用背景图片来实现圆角边框。代码结构大致如下：

.top_border{background:url(topborder.png);}
.left_border{background:url(leftborder.png);}
.right_border{background:url(rightborder.png);}
.bottom_border{background:url(bottomborder.png);}

<div>
      <div class="top_border"></div>
      <div class="left_border"></div>

     <div class="content">
　　　　...
     </div>

      <div class="right_border"></div>
      <div class="bottom_border"></div>
<div>

在重构时，我直接把这个结构修改为最简化的版本

<div class="content"></div>

这里就有点问题：使用boder-radius可以实现圆角边框，但是不支持IE7 、IE8。

当时我认为，我的这个规范是正确的，所以希望通过不修改HTML的代码结构来完成对IE7/IE8的兼容。

搜索了一下IE7/IE8的解决方案：http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

就以此为基础，使用js来对IE7/IE8进行兼容。主要代码逻辑如下：

if( typeof (document.documentElement.style["border-radius"]) == "string")//判断是否支持
{
    $.fn.extend({//实现圆角
          borderRadius : function (r)
          {
　　　　　　　　var b = this.wrap("<div></div>").parent();
　　　　　　　　//以下代码 主要以逻辑为主 并非真实执行代码 ，为四角 border-radius = 5的实现　　　　　　　　

             //调整margin 及 宽度 以符合旧div的布局　　　
             b.css( {margin : this.css("margin") , "width ": this.clientWidth});　　　　　　　　
             this.css({margin:"0"});　　　　　　　　　　　　　　　　
             var borderColor = this.css("border-color");
　　　　　　　　var background = this.css("background-color");
　　　　　　   var borderStyle = this.css("borer-style");

　　　　　　　　//重设边框，只保留两侧边框　　　　　　　　
             this.css({"border-top-width":"0","border-bottom-width":"0"});//             
             
　　　　　　　　//创建HTML结构，实现上下边框
　　　　　　　　var setting = { m: [1,2,3,5],bw : [1,1,2,0] };
　　　　　　　　var i = 0;
　　　　　　　　for(; i < 3; i++)
　　　　　　　　{
　　　　　　　　　　var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",
　　　　　　　　　　　　　　"border-left-width" : setting.bw[i] +"px","border-right-width" : setting.bw[i] +"px",
　　　　　　　　　　　　　　"border-color":borderColor,"background-color":background});
　　　　　　　　　　b.append(t);
　　　　　　　　　　b.prepend(t.clone(true));
　　　　　　　　}
　　　　　　　　var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",
　　　　　　　　　　　　　　"border-width" : "0",
　　　　　　　　　　　　　　background-color":borderColor});
　　　　　　　　b.append(t);
　　　　　　　　b.prepend(t.clone(true));
          }
    });
    $(".content").borderRadius(5);//设置圆角
    $(".border1").borderRadius(5);
}

虽然运行时的HTML结构变化了，但是编码时的HTML结构没有变化，也算是一种兼容方式吧。

还记得以前也有JS处理过一些其他伪类的兼容，一起列出来：

场景：鼠标移入显示二级菜单。

通常的做法：

.menu{}
.menu li ul{display:none;}
.menu li:hover ul{display:block;}

<ul class="menu">
    <li><a>一级</a>
        <ul >
            <li><a>二级</a></li>
            <li><a>二级</a></li>
        </ul>
    </li>
</ul>

当IE6不支持时，可以进行调整

.menu{}
.menu li ul{display:none;}
.menu li:hover ul,.menu li_hover ul{display:block;}/*增加了一个样式名*/

增加兼容JS

if(不支持:hover)
{
$(".menu li").hover(function(){$(this).addClass("li_hover");},function(){$(this).removeClass("li_hover");})
}

增加下面的JS，还可以兼容触屏

if(触屏)
{
    $(".menu li").click(function(){
               var isHover = $(this).hasClass("li_hover");
                if(!isHover)
               {
                    $(this).addClass("li_hover");
                }
                else
                {
                    $(this).removeClass("li_hover");
                }
            });
}

以上内容出自http://www.cnblogs.com/xvyw/p/3587427.html

然而用以上的东西会发现，弹出来的二级菜单会干扰页面布局，于是我在网上找了相关资料

<style type="text/css" >    
    body{    
    margin:0px;    
    padding:0px;    
    }    
             
    li{    
    list-style:url(1.jpg);    
    }    
    a{    
    display:block;    
    }    
    a:link,a:visited  {    
    text-decoration: none;    
    color:#000000;    
}    
.menu{    
    margin:0px auto;    
    width:404px;    
    height:21px;    
}    
.menu ul{    
    margin:0px;    
    padding:0px;    
}    
.menu ul li{    
    position:relative;    
    float:left;    
    list-style:none;    
    padding:2px;    
    border:1px dotted;    
    font-size:14px;    
    width:95px;    
    text-align: center;    
    margin:0px;  
    background:#999999;    
}    
.menu ul li ul{    
    display:none;    
}    
.menu ul li:hover ul{    
    display:block;    
    position: absolute; left: 0px; top: 21px;    
}    
.menu a:link{    
    background:url(2.png) -137px -10px;    
}    
.menu a:hover{    
    background:url(2.png) -26px -10px;    
 }        
</style>    
<body>       
<p>下面是一个导航条</p>    
<div class="menu">    
    <ul>    
       <li><a href="#">首页</a></li>    
       <li><a href="#">新闻中心</a>    
           <ul>    
               <li><a href="1#">新手入门</a></li>    
               <li><a href="2#">视频教程</a></li>    
               <li><a href="3#">常见问题</a></li>    
           </ul>    
       </li>    
       <li><a href="#">学习课程</a>    
           <ul>    
               <li><a href="1#">新手入门</a></li>    
               <li><a href="2#">视频教程</a></li>    
               <li><a href="3#">常见问题</a></li>    
           </ul>    
       </li>    
       <li><a href="#">联系我们</a></li>    
    </ul>    
</div>    
</body>    
</html>

我简单的说一下思路：

首先用ul下面嵌套一个ul。。外面的是第一层栏目列表，嵌套的是第二个。

首先定义嵌套的ul不显示

.menu ul li ul{
display:none;
}

当鼠标划过li的时候下面的ul显示出来

.menu ul li:hover ul{
display:block;
}

这样就可以了，但是我们发现显示出来的二级栏目不是我们想要的位置，那么对它进行绝对定位

.menu ul li:hover ul{
display:block;
position: absolute; left: 0px; top: 21px;
}

因为绝对定位的元素的位置相对于最近的已定位祖先元素。所以它外面的li设置一个相对定位

.menu ul li{
position:relative;

}

这样效果就出来了。其他的属性都是一些调整了，在一些低版本的浏览器中会失效，（特别低级的）

通过大神提供的方案，于是自己也写了一个

<div class="c-select">
                <ul class="c-ul">
                    <li>
                        <a>首页</a>
                    </li>
                    <li>
                        <a>基层党建</a>
                        <ul>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Promote">选拔任用</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Control">活动动态</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Education">警示教育</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Suggest">意见建议</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=DownCenter">常用下载</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Contacting" style="float: none; width: auto;">联系我们</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>干部工作</a>
                        <ul>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Promote">选拔任用</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Control">活动动态</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Education">警示教育</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Suggest">意见建议</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=DownCenter">常用下载</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Contacting" style="float: none; width: auto;">联系我们</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a>人才天地</a>
                        <ul>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Promote">选拔任用</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Control">活动动态</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Education">警示教育</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Suggest">意见建议</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=DownCenter">常用下载</a>
                            </li>
                            <li>
                            <a target="_blank" href="MorePage.aspx?Category=PartyCadresWork&PageID=Contacting" style="float: none; width: auto;">联系我们</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

/*--------鼠标移动显示二级菜单--------------*/
    .c-ul li{    
        position:relative;    
        float:left;    
        font-size:20px;    
    }    
    .c-ul li ul{    
        display:none;    
    }    
    .c-ul li:hover ul{    
        display:block;    
       position: absolute; left: 20px; top: 40px;    
       background:#999;
    }    
/*-----------end----------------*/

这样就成了！感谢，网上各位大神给与的意见！真诚的表示感谢！！！

posted @ 2015-04-21 15:21 路途寻码人阅读(397) 评论(0) 编辑收藏举报

刷新页面返回顶部

牵着妞去散步

关于圆角的实现以及鼠标移入显示二级菜单的兼容处理！

公告