img

ساخت یک منوی دایره‌ای شکل

/
/
/

برگردان : افشین متولی

کدهای مربوط به منوهای جهت‌یابی (navigation) را به گونه‌ای بنویسید که در فضاهای کم به حالت تمام‌صفحه نمایش داده شوند.

۱- کدهای HTML را بنا کنید
در زمانی که برای ساخت یک سند HTML از این برنامه شروع به کار می‌کنید این صفحه نمایش داده می‌شود. این صفحه متشکل از سرصفحه (head) و بدنه اصلی (body) متن است. بخش head مخصوص تعاریف غیرقابل دیدن، مانند جزئیات مربوط به توضیحات صفحه و منابع برای CSS های خارجی و فایل‌های JavaScript است. قسمت body مکانی است که محتوای یک سایت در آن نگهداری می‌شود و در گام بعدی بیشتر توضیح داده خواهد شد. کدهای زیر مربوط به این دو قسمت از کدهای HTML است:
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8» />
<meta http-equiv=»X-UA-Compatible»
content=»IE=edge»>
<meta name=»description»
content=»description»>
<title>Expanding Menu</title>
<link rel=»stylesheet» type=»text/css»
media=»screen» href=»styles.css»/>
<script src=»http://ajax.googleapis.com/ajax/
libs/jquery/1.9.1/jquery.min.js»></script>
<script src=»code.js»></script>
</head>
<body>
*** STEP 2 HERE
</body>
</html>

۲- محتوای navigation را بنویسید
مثال ما در این جا، متشکل از یک مولفه جهت یابی برای در برگرفتن محتویات جهت یابی است. اولین مولفه ای که در این محفظه قرار می‌گیرد مولفه‌ی همبرگر است که به صورت یک آیکن جهت یابی قرار داده شده است. هریک از مولفه‌های استفاده شده در این صفحه قابل کلیک کردن هستند و زمانی نمایش داده می‌شوند که navigation موردنظر باز شود و به صورت تمام صفحه نمایش داده شود:
<nav data-action=»expand»>
<span>&#9776;</span>
<a href=»#»>Page 1</a>
<a href=»#»>Page 2</a>
<a href=»#»>Page 3</a>
</nav>
۳- نیاز به کلیک کردن را کشف کنید
توانایی کشف این که چه زمانی یک کاربر نیاز به کلیک کردن بر روی آیکن یک منو دارد، امری مهم و لازم است. برای ساده نگه داشتن HTML، ما از تعدادی کدهای jQuery Javascript برای یافتن تمامی محفظه‌های <nav> که دارای ویژگی data.action=”expand” هستند، استفاده می-کنیم. همه مولفه‌هایی که در این جستجو پیدا شوند برای نمایش داده شدن نیاز به یک کلیک دارند. کدهای زیر مربوط به این بخش هستند:
window.addEventListener(«load»,function(){
$.each($(‹nav[data-action=»expand»]
*:first-child›),function(){
$(this).on(«click»,function(){
if($(this).parent().hasClass(«open») ==
false)$(this).parent().addClass(«open»);
else $(this).parent().removeClass(«open»);
});
});
});

۴- نوشتن کدهای CSS را شروع کنید
یک فایل جدید به نام “styles.css” ایجاد کنید تا بتوانید قواعد مربوط به استایل و شکل گرافیکی صفحه را در آن ذخیره کنید. برای شروع نوشتن در این فایل ابتدا جزئیات نحوه قرار گرفتن محتوای مربوط به بدنه‌ی صفحه را به همراه کدهای HTML بنویسید. ما این کار را به این دلیل انجام می‌دهیم که مطمئن شویم محتوای سند مربوطه می‌تواند تمام ارتفاع صفحه را به گونه‌ای پوشش دهد که محتوای صفحه با توجه به اندازه پنجره در دسترس بتوانند در آن جای بگیرند.
html, body{
display: block;
width: 100%;
height: 100%;
}

۵- محفظه‌ی navigation را ایجاد کنید
جهت یاب پیش‌فرض باید در اندازه کوچک نمایش داده شود- به اندازه‌ای کوچک باشد که بتواند آیکن جهت‌یابی را نمایش دهد. این محفظه از موقعیت و مکانی در صفحه استفاده می‌کند که اطمینان حاصل شود همیشه در گوشه‌ی بالا و سمت راست صفحه نمایش داده خواهد شد. ویژگی جابه‌جایی (transition) برای ناپدید شدن یک ویژگی و پدیدار شدن ویژگی دیگر در مدت زمان‌های یک ثانیه، به صورت یک منوی متحرک، قابل استفاده است.
nav{
display: block;
position: absolute;
box-sizing: border-box;
top: 0;
right: 0;
z-index: 9000;
padding: .5em 1em .5em 1em;;
width: 2em;
height: 2em;
text-align: center;
background: red;
border-radius: 0 0 0 100%;
transition: all 1s;
overflow: hidden;
}

۶- نحوه کار کردن با آیکن جهت‌یابی
اولین کودک محفظه‌ی جهت یابی، آیکن جهت‌یابی همبرگر است. ما باید اطمینان حاصل کنیم که این آیکن در اندازه کوچک در محفظه <nav> با استفاده از موقعیت مکانی ثابت جای می‌گیرد. ویژگی نشانگر (cursor) هم برای نمایش دادن نشانگر ماوس شما بر روی صفحه، به عنوان یک عنصر کمک کننده در بحث دنبال کردن مولفه‌ها، مورد استفاده قرار می‌گیرد.
nav *:first-child{
position: absolute;
right: .2em;
top: 0;
cursor: pointer;
clear: both; }
۷- navigation را باز کنید
کدهای jQuery Javascript که قبلاً توضیح داده شد در این جا برای اعمال کردن (یا پاک کردن) روی یک کلاس باز (open class) برای محفظه جهت‌یابی زمانی که بر روی آیکن همبرگر کلیک شده است، مورد استفاده قرار می‌گیرد. ما برای کشف این که چه زمانی یک navigation دارای یک open class است، از کدهای CSS استفاده می‌کنیم، به طوری که در این جا قواعد شکل و شمایل (style) قابل اعمال است. با استفاده از ویژگی انتقال که قبلاً مورد استفاده قرار گرفت، تغییرات مربوط به Style با استفاده از یک وقفه یک ثانیه‌ای به صورت انیمیشن اعمال می‌شوند.
nav.open{
width: 100%;
height: 100%;
border-radius: 0; }
۸- لینک‌های جهت‌یابی ایجاد کنید
لینک‌های موجود در محفظه‌ی جهت‌یابی شکل و ظاهر (style) داشته باشند. ما آن را به گونه‌ای تنظیم می‌کنیم که به صورت یک متن مشکی یا فونت Arial و بدون دکور و ظاهر خاصی نمایش داده شود. ما همچنین از یک حاشیه‌ی بالایی در آن استفاده کرده‌ایم تا مطمئن شویم در زمانی که محفظه‌ی navigation بسته است، متن مورد نظر قابل دیدن است.
nav a{
display: block;
font-size: 4em;
color: #000;
font-family: arial;
text-decoration: none;
margin-top: .2em; }

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text