Detect if CSS drop-down menu is close to browser edge and change alignment - fluid width
I currently have a pure CSS drop-down/mega menu which works fine. The layout is fluid (percentage based) and I'm also using media queries.
The issue I have is that 开发者_StackOverflowI need to detect if a menu item li is near to the browser edge and change the align property using CSS.
I'm guessing that I'll need to use jQuery to achieve this but really don't know how.
Take a look at this. It's probably not elegant, but if an li is close to the left or top it will go pink. You should be able to complete the puzzle:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
ul{
list-style:none;
}
li{
display:inline-block;
margin: 5px;
width: 100px;
height: 100px;
background-color:silver;
}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="application/javascript">
$(document).ready(function(){
var items = new Array();
var i;
function paintPink(){
$('ul > li').css('background-color','silver');
for (i=1;i<=$('ul').children().length;i++){
if ((($('ul > li:nth-child(' + i + ')').offset().left) < 60) || (($('ul > li:nth-child(' + i + ')').offset().top) < 60)){
$('ul > li:nth-child(' + i + ')').css('background-color','fuchsia');
};
};
};
$(window).load(paintPink);
$(window).resize(paintPink);
});
</script>
</body>
</html>
Good luck.
加载中,请稍侯......
精彩评论