منوی بازشو (Chrome CSS Drop Down Menu)

[desiran]

برای دیدن این مقاله به لینک زیر مراجعه فرمایید
http://www.weblog.desiran.net/view.asp?ID=67

 

[spsgorgan]

دوست گرامي ممنونيم بخاطر مطلب خوبتون . اما بايد اصل متنو بزاريد نه لينك اونو !
متن اين اموزش به قرار زير هست :
**********************************************************************
این کد رو برای شما علاقه مندان به سرعت بخشیدن در کار کاربران وب سایتتان گذاشتم .
یکی از خوبی های این جور منوها
1.سرعت بالای کود شدن
2.و دیگری این که کاربران را بیخود و بی جهت سرکار نمیزاریم . آنها سریع به آن چیزی که می خواهند می رسند

حال می پرازیم به چگونگی استفاده از این کد

کل منوی ما متشکل از

demo.htm (view)
chromejs/chrome.js (view)
chrometheme/chromestyle.css (view)
chrometheme/chromebg.gif
chrometheme/divider.gif
محتویات صفحه ی demo.htm

<div id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Resources</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')">News</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
</div>
همان طور که در کد می بینید شما با چند تگ div و a ساده سروکار دارید.

فقط نکاتی که باید توجه داشته باشید

کد منوی اصلی شما از لیست ul تشکیل شده است . همان طور که در کد زیر مشاهده می کنید برای ایجاد لینک در منوی اصلی باید از کد های زیر استفاده کنید.
برای لینک :
<li><a href="http://www.dynamicdrive.com">Home</a></li>
برای منو :
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Resources</a></li>

و حتما توجه داشته باشید که برای ایجاد منو در قسمت onMouseover تگ مقدار داخل تابع cssdropdown.dropit را تکراری قرار ندهید . از اسم برای مثال dropmenu1 استفاده می کنیم که این اسم را در تگ div در قسمت ID تگ قرار می دهیم تا منوی ما آن چیزی را که ما می خواهیم به ما نمایش دهد.

<div id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Resources</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')">News</a></li>
</ul>
</div>
نمونه نمایشی :
Home
Resources
News
Search
Dynamic Drive CSS Drive JavaScript Kit Coding Forums JavaScript Reference
CNN MSNBC BBC News Google Yahoo MSN