درود به دوستان
می خوام با CSS یک منوی افتادنی تو صفحه بزارم، ولی موقی که رزولوشن صفحه تغییر می کنه جای زیر منو عوض میشه.:متفکر: میشه راهنماییم کنیید چه جوری یه منوی استاندارد بسازم.
ممنون
Printable View
درود به دوستان
می خوام با CSS یک منوی افتادنی تو صفحه بزارم، ولی موقی که رزولوشن صفحه تغییر می کنه جای زیر منو عوض میشه.:متفکر: میشه راهنماییم کنیید چه جوری یه منوی استاندارد بسازم.
ممنون
میتونی از تابع زیر استفاده کنی که موقعیت شی فرزند رو نسبت به پدرش بدست میاره .
در واقع از شی اصلی اون قدر ادامه میده تا به body برسه و مجموع فاصله ها رو با هم جمع می کنه .
function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {left:offsetLeft, top:offsetTop};
}
برنامه میتونه به صورت زیر باشه .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {left:offsetLeft, top:offsetTop};
}
function test()
{
//alert($('d1').offsetLeft);
offset = getElementPosition('d1');
// alert(offset.left+','+offset.top);
d1 = $('d1');
mn = $('m1');
mn.style.top =parseInt(d1.style.height)+offset.top+5+'px';
mn.style.left =offset.left+'px';
if(mn.style.display=='block')
mn.style.display='none';
else
mn.style.display='block';
}
</script>
<div id="m1" style="width:150px; background:pink; position:absolute;top:0px; left:0px; display:none;">
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<input type="button" onclick="test()" value="clickME" />
<table width="200" border="1" cellspacing="5" cellpadding="5" align="center">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td><div style="height:150px; width:150px; background:gold;" id="d1" onmouseover="test()" onmouseout="test()"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
سپاس از جوابت. ولی دقیقا می خوام از CSS و UL استفاده کنم. دیدم با Position ها کد ن.شتن. خودم هم این کارو کردم ولی با تغییر رزولوشن خراب میشه.
با css به تنهایی که نمی تونی اینطور منویی درست کنی حتما باید جاوا اسکریپت برای حالت های رفتن موس بر روی منو و نمایش اون داشته باشه .
تابعی که ت کد تعریف کردم بعد از رفتن موس روی منو مختصات رو پیدا می کنه و منو رو نمایش میده بنابراین نباید در رزولیشن های ختلفبه مشکل بخوره .
تو همین برنامه رو امتحان کردی و به مشکل خوردی ؟
درود
دستت درد نکنه بابت جواب. چرا من تویه یه سایت کدی رو دیده بودم که با CSS این کارو انجام داده بودند. کد شما درست کار می کنه چون جدول در هر رزولوشنی جواب میده ولی واسه من جای سوال بود که چه جوری میشه بدون جدول این کارو انجام میدن
سلام دوست عزیز اگه تونستی یه سر به سایت زیر بزن میتونه کمکت کنه منوی های زیبا طراحی کنی البته با css
http://www.cssmenumaker.com
چرا که نشه..نقل قول:
با css به تنهایی که نمی تونی اینطور منویی درست کنی حتما باید جاوا اسکریپت برای حالت های رفتن موس بر روی منو و نمایش اون داشته باش
خاصیت hover پس چیکارست ؟
مث وقتی موس رو روی لینک میبریم و رنگش عوض میشه....
با css میشه به راحتی و تنهایی این کار رو انجام داد
یه جستجو کنی آموزش های زیادی پیدا میکنی
سلام دوستان عزیز چرا از dreamweaver استفاده نمی کنید شما میتونید هر منویی درست کنید . یا از نرم افزار sothink menu maker استفاده کنید خیلی عالیه
برای ساخت یه ماشین که نباید بریم تازه چرخ رو اختراع کنیم این همه نرم افزار هلو برو تو گلو درست شده