بررسي منوي سايت ايسنا

[mina_ghorbani]

سلام دوستان
مي خواستم يه سايت مثل ايسنا طراحي كنم اما نمي دونم منوي سرويس رو چه جوري پياده سازي كرده
كمك مي كنيد تا بدونم چه كار كرده
مثلا منو رو از ديتا بيس خونده يكي يكي <li> اضافه كرده براي sub menu ها چه كار كرده مي خوام بدونم از jquer استفاده كرده چه جوريه
ااگر ميشه از منوي اصلي تا زير منوها رو بهم بگيد ممنون مي شم

[goldax]

اینکه اطلاعات منو از بانک اطلاعاتی خونده بشه یا نه بستگی به شیوه طراحی خودتون داره و بستگی به میزان حوصله و دانش فنی.

برای بررسی اینکه قسمت های مختلف یک سایت از چه کد ها و استایل هایی استفاده می کنند ، بهترین راه نصب فایرفاکس و بعد اضافه کردن FireBug به اونه.
بعد از نصب فایرفاکس از منوی:

tolls>add-ons

در قسمت search بنویسد firebug و بعد از اینکه پیداش کرد نصبش کنید . بعد از نصب با کلید f12 باز میشه firebug و یک کلید به اسم click an element in the page to inspect داره که شکلش شبیه یک اشاره گر ماوس هست.روی اون کلیک کنید و بعد ماوس رو روی هر قسمتی از صفحه که ببرید کد ها و استایل هاش نشون داده میشه.
اگه جایی از jquery یا javascript استفاده شده باشه هم که می تونید با کلیک راست روی صفحه دیدن سورس رو انتخاب کنید.البته در مواردی که کد ها توی فایل های مجزا با پسوند js ذخیره شدن باید صفحه رو save کنید تا فایل های js هم رو سیستمتون ذخیره بشه.

در ضمن یک سری نرم افزار مثل southink dhtml menu هم وجود دارن که برای شما منو میسازن با اشکال و انیمیشن های مختلف.
منو های ایسنا هم به نظر css میرسیدن.البته زیاد بررسی نکردم.

[mina_ghorbani]

خيلي ممنون از زاهنماييتون و اين مطلب خوب
چيز ديگه اي كه مي خوام بدونم اينه كه اين منو رو از ديتا بيس مي خونه اضافه مي كنه يا استاتيك گذاشته

[ja.softeng]

خيلي ممنون از زاهنماييتون و اين مطلب خوب
چيز ديگه اي كه مي خوام بدونم اينه كه اين منو رو از ديتا بيس مي خونه اضافه مي كنه يا استاتيك گذاشته

با سلام دوست عزیز خیلی ساده میشه منو و زیرمنو رو از دیتا بیس خوند و نمایش داد من در این سایت مشتریم این کار رو کردم
danlodkade.com و یا در این سایت مشتریم ebazaryab.com روال کار سادست یه تابع جاوا چند خطی است:


function subMenu(show, menuShow) { if (show) { document.getElementById(menuShow).style.display = 'block'; } else { document.getElementById(menuShow).style.display = 'none'; } }

اینم کد html که به صورت کد نویسی تولید شده


<div id="rightmenu">
<div>
<ul>
<li>
<a href="category_19.aspx" title="پوشاک" class="menu" onmouseover="javascript:subMenu(true,'menuShow17');"
onmouseout="javascript:subMenu(false,'menuShow17');">پوشاک</a>
</li>
</ul>
<div id="menuShow17" onmouseover="javascript:subMenu(true,'menuShow17');" class="menuShow"
style="display: none" onmouseout="javascript:subMenu(false,'menuShow17');">
<a href="subject_69.aspx" title="دوخت و دوز" class="submenu">دوخت و دوز</a>
<a href="subject_70.aspx" title="توليدي" class="submenu">توليدي</a>
<a href="subject_71.aspx" title="مزون" class="submenu">مزون</a></div>
</div>
<div>
<ul>
<li>
<a href="category_21.aspx" title="فروشگاه" class="menu" onmouseover="javascript:subMenu(true,'menuShow18');"
onmouseout="javascript:subMenu(false,'menuShow18');">فروشگاه</a>
</li>
</ul>
<div id="menuShow18" onmouseover="javascript:subMenu(true,'menuShow18');" class="menuShow"
style="display: none" onmouseout="javascript:subMenu(false,'menuShow18');">
<a href="subject_72.aspx" title="لوازم التحرير" class="submenu">لوازم التحرير</a>
<a href="subject_75.aspx" title="آهن آلات" class="submenu">آهن آلات</a>
</div>
</div>
</div>


فقط در استایل یه نکته ای است که به خاصیت display باید دقت کنی در زیر کدش رو میزارم


#rightmenu { width:160px; } #rightmenu li { display:block; } #rightmenu li a.menu { font-weight:bold; color:#427cc9; margin:0 0 2px 0; padding:1px 12px 3px 1px; display:block; border:solid 1px #d0e1f2; text-decoration:none; background:#eef9e9 url("../img/circ.gif") no-repeat 149px 7px; } #rightmenu li a.menu:hover { background:url(""); color:red; background-color:#fef9e5; border:solid 1px red; border:solid 1px #fbb62c; background:#fef9e5 url("../img/submenu.jpg") no-repeat 148px 6px; } #rightmenu li a.submenu { color:#427cc9; margin:0 10px 2px 0; padding:0px 3px 3px 1px; background-color:#eef9e9; display:block; border:solid 1px #efefef; text-decoration:none; } #rightmenu li a.submenu:hover { color:red; background-color:#fef9e5; border:solid 1px red; } .menuShow { position:absolute; width:570px; width:380px; margin:-23px 158px 0 0; padding:5px; background-color:white; background-color:#eef9e9; color:Blue; /*margin-right:158px;*/ border:solid 1px #fbb62c; border-radius:10px 0 10px 10px; } .menuShow a { float:right; text-decoration:none; color:Blue; border:solid 1px #efefef; border:solid 1px #eef9e9; padding:1px 3px 4px 3px; margin:1px; width:180px; /*background-color:#eef9e9;*/ } .menuShow a:hover { color:red; border:solid 1px red; background-color:#fef9e5; }