استفاده از منوی شناور که همراه با اسکرول صفحه حرکت می کند به طرز عجیبی باعث افزایش استفاده و کلیک روی آپشن های منو می شود .
همچنین این قابلیت باعث دسترسی سریع و آسان تر به بخش های مختلف صفحه مورد نظر و یا سایت می شود.
در این مثال از ساخت منو شناور با jQuery , ما یک منو با پوزیشن fixed داریم که با کلیک بر روی هر یک از آپشن های منو , یک افکت جی کوئری برای اسکرول نرم (smooth) را برای رفتن به بخش مورد نظر را فراخوانی می کنیم.
کد HTML منو شناور
کد HTML زیر برای نمایش منوی قابل اسکرول / شناور استفاده شده است . ما به استایل position مقدار fixed دادیم تا بنابر صفحه اسکرول شده نمایش داده شود.
|
1 2 3 4 5 6 7 |
<div id="scrolling-menu"> <div id="intro">Introduction</div> <div id="feature">Features</div> <div id="version">Versions</div> <div id="change-log">Change Log</div> <div id="download">Download</div> </div> |
محتویات زیر به هنگام کلیک بر روی هر یک از آپشن های مورد نظر در بخش منو با اسکرول نرم قابل دسترس خواهد بود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="scroll-content"> <div id="intro-content"> <h1>Introduction</h1>- Introduction - Content - </div> <div id="feature-content"> <h1>Features</h1>- Features - Content - </div> <div id="version-content"> <h1>Versions</h1>- Versions - Content - </div> <div id="change-log-content"> <h1>Change Log</h1>- Change Log - Content - </div> <div id="download-content"> <h1>Download</h1>- Download - Content - </div> </div> |
و کد CSS :
|
1 2 3 4 5 6 7 |
<style> body{width:500px;margin:10 auto 60px;} #scrolling-menu{position: fixed;width: 150px;margin-top:10px;} #scrolling-menu div{padding:10px;margin-bottom:1px;background: #C7B3B3;color: #F0F0F0;cursor:pointer;} #scroll-content{border-left:#CCC 4px solid;margin-left:150px;padding-left:60px;color:#E0403A;} #scroll-content div{margin-bottom: 60px;} </style> |
افکت ساخت منو شناور با jQuery
کد jquery زیر برای اسکرول صفحه بر اساس پوزیشن قسما بالای تارگت مورد نظر استفاده شده است . همچنین برای نرم بودن اسکرول آن از تابع animate() در جی کوئری و یک مقدار مکث (delay) بهره بردیم .
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function (){ $('#scrolling-menu div').click(function() { var target = $(this).attr('id'); $('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000); }); }); </script> |
امیدوارم از آموزش ساخت منو شناور با jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
