关于圆角的实现以及鼠标移入显示二级菜单的兼容处理！
2015-04-21 15:21
513 查看
在这时碰到了一个圆角边框的问题，以前的代码是在每个页面写一个固定结构的div，使用背景图片来实现圆角边框。代码结构大致如下：
在重构时，我直接把这个结构修改为最简化的版本
这里就有点问题：使用boder-radius可以实现圆角边框，但是不支持IE7 、IE8。
当时我认为，我的这个规范是正确的，所以希望通过不修改HTML的代码结构来完成对IE7/IE8的兼容。
搜索了一下IE7/IE8的解决方案：http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html
就以此为基础，使用js来对IE7/IE8进行兼容。主要代码逻辑如下：
虽然运行时的HTML结构变化了，但是编码时的HTML结构没有变化，也算是一种兼容方式吧。
还记得以前也有JS处理过一些其他伪类的兼容，一起列出来：
场景：鼠标移入显示二级菜单。
通常的做法：
当IE6不支持时，可以进行调整
增加兼容JS
增加下面的JS，还可以兼容触屏
以上内容出自http://www.cnblogs.com/xvyw/p/3587427.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;
}
这样效果就出来了。其他的属性都是一些调整了，在一些低版本的浏览器中会失效，（特别低级的）
通过大神提供的方案，于是自己也写了一个
这样就成了！感谢，网上各位大神给与的意见！真诚的表示感谢！！！
.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----------------*/这样就成了！感谢，网上各位大神给与的意见！真诚的表示感谢！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- mm_menu.js（实现鼠标移入横向显示二级菜单效果）(1)
- mm_menu.js（实现鼠标移入横向显示二级菜单效果）(2)
- mm_menu.js（实现鼠标移入横向显示二级菜单效果）
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
- 鼠标悬浮显示二级菜单效果的jquery实现
- 鼠标悬浮显示二级菜单效果的jquery实现
- JQuery中鼠标划过一级菜单，有二级菜单的就显示的处理
- 鼠标移入侧边栏一级菜单后，二级菜单显示
- 鼠标悬停hover显示子菜单移入二级后子菜单不消失
- javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果
- JS实现超精简响应鼠标显示二级菜单代码
- JS实现超精简响应鼠标显示二级菜单代码
- 纯CSS实现鼠标滑过显示子菜单的二级菜单效果
- 极客编程小挑战＃28：实现二级菜单的炫酷显示效果
- jquery实现鼠标滑过显示二级下拉菜单效果
- jquery实现鼠标滑过显示二级下拉菜单效果
- jQuery实现可高亮显示的二级CSS菜单效果
- jQuery实现可高亮显示的二级CSS菜单效果
- 关于网站二级联动菜单前台不能正常显示的问题
- 用css3实现鼠标移入在原来的层上面显示另一个层的动画效果