cyrusthegreat
جمعه 16 تیر 1391, 10:14 صبح
دوست عزیز
برای اینکار شما دوتا راه حل دارید. یکی CSS تمام و دیگری JS.
1.CSS
برای اینکار، شما بیایید به ulاتون مثلا مقدار 400px طول بدید. سپس باید برای liهاتون دو مقدار float:left و طول 200px بدید. در اینصورت منو های شما به همین شکلی که بخوایید در میاد. به اینگونه:
ul {
width: 400px
}
li {
float: left;
width: 200px;
}
تنها مشکل این روش این هست که اگر ترتیب منو هاتون اینجوری باشه:
1
2
3
4
به شکل زیر در میاد:
2 1
4 3
2.JS
خوبی این روش این هست که مشکل کد بالا رو نداره و به ترتیب قرار میده.
من کد Jquery اون رو قبلا نوشتم:
var size = $("ul li").size();
if ( size % 2 == 0 ) {
var firstItemNum = size / 2;
var secendItemNum = firstItemNum - 1;
}
else {
var firstItemNum = (size -1) / 2 + 1;
var secendItemNum = firstItemNum - 1;
}
var firstItems = $("ul li:lt("+firstItemNum+")");
var secendItems = $("ul li:gt("+secendItemNum+")");
$("div").html('<div class="first-items"><ul></ul></div><div class="second-items"><ul></ul></div>');
$(firstItems).each(function() {
$("div div.first-items ul").append("<li>"+$(this).html()+"</li>");
});
$(secendItems).each(function() {
$("div div.second-items ul").append("<li>"+$(this).html()+"</li>");
});
این کد منو رو به دو بخش مساوی تقسیم می کنه.
این کد برای html زیر قابل انجام است:
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
و CSS مربوط اینگونه است:
div div.first-items {
float: right;
width: 335px;
}
div div.second-items {
float: left;
width: 335px;
margin-right: 10px;
}
امیدوارم مفید بوده باشه.