ساخت Css Menu همراه با Sider

حتما مشابه این منو را در کارهای فلش زیاد دیده اید. این بار ما با استفاده از Prototype.js و Css این منو ساده و زیبا رو به راحتی درست می کنیم.سعی می کنم که بصورت ساده توضیح بدم.

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

1.HTML

2.Css

3.JavaScript

مرحله ی اول: Html Code
این کد خود منو هست که با تغییر مقادیر داخل تگهای li می توانید منوی مورد نظر خودتون رو درست کنید.

HTML:

   1. <div id="menu">
   2. <div id="m-top">
   3. <ul>
   4. <li><a href="#">Home</a></li>
   5. <li><a href="#">About Us</a></li>
   6. <li><a href="#">F.A.Q.</a></li>
   7. <li><a href="#">Contact</a></li>
   8. </ul>
   9. </div>
  10. <div id="m-slider">
  11. <div id="slider"></div>
  12. </div>
  13. </div>

مرحله ی دوم:Css
شما می توانید با کمی تغییر در کد Css این منو با بازی با رنگ ها و تصویر منوی مورد علاقه ی خود رو بسازید.

این فایل رو در صفحه ی خود به این صورت include کنید.

HTML:

<link href="slider.css" media="screen"type="text/css"rel="stylesheet">

مرحله ی سوم:JavaScript
باید این دو فایل جاوا اسکریپت هم در صفحه ی خود قراردهید. به دین صورت.

HTML:

   1. <script src="prototype.js" type="text/javascript"></script>
   2. <script src="helper.js" type="text/javascript"></script>

خوب می تویند فایل های مربوط به این منو را از اینجا دانلود کنید.

منبع

اگه متن مشکلی داره به بزرگی خودتون ببخشید. چون با ادیتور اینجا چیز بهتر از این نتونستم در بیارم.