দ্রুত তৈরি করুন, একটি স্টিকি মেনু

Bengali (বাংলা) translation by Nazmul Shuvo (you can also view the original English article)

এই টিউটোরিয়াল চলাকালীন আমরা বাস্তবায়ন করতে যাচ্ছি CSS দিয়ে একটি স্টিকি মেনু, ভিসিবিলিটি ট্যোগল করা হবে jQuery দিয়ে। এটি দর্শকদের সামাজিক লিংকগুলো দেওয়ার নিখুঁত উপায়, সাইটের নেটওয়ার্ক এর মধ্যে একটি অতিরিক্ত স্থান, অথবা এমনকি ব্যক্তিগত সেটিংসও।

ধাপ ১ঃ পেইজ সেটিং করা

চলুন একটি প্রাথমিক HTML পেইজ তৈরি দিয়ে শুরু করি।আমরা CSS লোড করব <head> এর ভিতর, তারপর jQuery (ডকুমেন্টের তলায়) অ্যানিমেশন টোগল করার জন্য।

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Menu</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>

<body>


	<!--js-->
	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

</body>
</html>

ধাপ ২ঃ পেইজ পূরণ করা

এখন চলুন কিছু গঠনমূলক উপাদান তৈরি করি।

<div class="toolbar-wrapp">

	<div class="sticky-toolbar">
		<ul>
			<li class="glyph" id="support">
				<a href="#" data-icon="&#128227;"></a>
			</li>

			<li class="glyph" id="help">
				<a href="#" data-icon="&#59272;"></a>
			</li>

			<li class="glyph" id="settings">
				<a href="#" data-icon="&#9881;"></a>
			</li>
		</ul>
	</div><!--/ sticky-toolbar-->

	<div class="popup">
		<div class="arrow"></div>
			<ul>
				<li><a href="">List Item 1</a></li>
				<li><a href="">List Item 2</a></li>
				<li><a href="">List Item 3</a></li>
			</ul>
	</div><!--/ popup-->

</div><!--/ toolbar-wrapp-->

আমরা data-icons এট্রিবিউট ব্যবহার করব আমাদের ফন্ট ঠিক করার জন্য। ফন্ট আইকন ব্যবহার করা হবে আমাদের প্রধান মেনু আইটেমগুলি কার্যকরিভাবে সাজানোর জন্য। ফন্ট গ্লিফ স্কেল এবং কালার করা যায় রেজুলেশনের কোন ক্ষতি ছাড়াই, যেখানে বিটম্যাপ ছবির ব্যবহার অনেক কম সুবিধা দেয়। আমরা সামনের যাত্রায় এ সম্পর্কে আরো কথা বলব।

ধাপ ৩ঃ ফিলার কন্টেন্ট যোগ করা

কি ঘটছে তা উপস্থাপন করার জন্য, চলুন কিছু ডামি টেক্সট এবং একটি লগো যোগ করি। যদি আপনি চূড়ান্ত ফলাফলে এটির পূর্ণ সৌন্দর্য দেখতে চান তবে নিশ্চিত হোন যে সেখানে স্ক্রল করার জন্য যথেষ্ট কন্টেন্ট রয়েছে।

	<div class="wrapp">

	<img src="img/logo.jpg" class="logo">

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
	
	<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
	
	</div><!--/ wrapp-->

ধাপ ৪ঃ সাধারন শৈলি

প্রথমে আমরা যোগ করব Eric Meyer's Reset CSS, অন্য সব সিলেক্টরের পুর্বে css ফাইলের শীর্ষে।

	body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 500;
    font-size: 1.1em;
    color: #34495E;
    background-color: #ECF0F1;
}

div.wrapp{
	width: 70%;
	margin: 0 auto;
}

p {
	margin-bottom: 4em;
}

.logo{
	max-width: 100%;
}

আপনি লক্ষ করবেন যে আমি div.wrapp ৭০% প্রশস্ত করেছি, সাথে বিবৃত করেছি যে ছবি হতে হবে সর্বোচ্চ ১০০% প্রশস্ত। এটি একটি দৃঢ় সূচনা যখন একটি ফ্লুইড বিন্যাস তৈরি করবেন।

ধাপ ৫ঃ টুলবার শৈলি

এর পরে, আমরা কিছু টুলবার শৈলি যোগ করব - প্রথমে পেইজের সাইডের র‍্যাপার ফিক্সিং এর মাধ্যমে, ডকুমেন্ট প্রবাহ হতে এটিকে কার্যকরীভাবে সরানোর জন্য।

	div.toolbar-wrapp{
		position: fixed;
		display: block;
		top: 30%;
	}

	div.sticky-toolbar{
		position: relative;
		top: 30%;
		padding: .1em;
		background-color: #2C3E50;
		float: left;
		-webkit-border-radius: 0 .2em .2em 0;
		-moz-border-radius: 0 .2em .2em 0;
		border-radius: 0 .2em .2em 0;
	}

Note: position: relative ডিক্লেয়ার করা খুবই গুরুত্বপূর্ণ div.sticky-toolbar এর জন্য যেন এটি আমাদেরকে অন্যান্য উপাদানের প্রতিকুলে অবস্থান নির্নয় করতে সম্মতি দেয়।

ধাপ ৬ঃ `@font-face` লোড করা

আমরা আগে যেমনটা উল্লেখ করেছি, আমাদের আইকনের জন্য আমরা বিটম্যাপ ছবি ব্যবহার করবো না। বদলে, আমরা ব্যবহার করব @font-face যা ব্রাউজারে ফন্ট ফাইল থেকে টেনে আনবে।

@font-face একটি css বিধি যা আপনাকে অনুমতি দিবে একটি নির্দিষ্ট ফন্ট সার্ভার থেকে ডাউনলোড করে ওয়েব পেইজে রেন্ডার করতে যদি ব্যবহারকারী ফন্টটি ইন্সটল না ও করে থাকে। এর মানে ওয়েব ডিজাইনারদের এখন আর নির্দিষ্ট সেটের "web safe" ফন্ট ব্যবহার করার ধারা মেনে চলতে হবে না যা ব্যবহারকারীর কম্পিউটারে প্রি-ইন্সটল্ড আছে।
-font-face.com

আমরা ব্যবহার করতে যাচ্ছি Entypo; বানিজ্যিক এবং ব্যক্তিগত ব্যহারের জন্য ফ্রি একটি ওপেন সোর্স আইকনের বান্ডেল।এটির PSD, EPS, PDF, OpenType, TrueType এবং আরো অনেক ধরনের ফাইল আছে, তাই চলুন আমাদের প্রোজেক্টে ব্যবহারের জন্য এদের ডাউনলোড করে নিই।

এখানে আমাদের @font-face ডিক্লেয়ারেশন, যা আমরা CSS ফাইলে পেস্ট করেছি। নিশ্চিত হোন যে প্রজেক্টের মধ্যে পথ সঠিকভাবে পয়েন্ট করা হয়েছে, অন্যথায় এটি প্রদর্শিত হবে না।

		@font-face {
	    font-family: 'Entypo';
	    src: url('../font/entypo.eot');
	    src: local('☺'), 
	    url('../font/entypo.woff') format('woff'), 
	    url('../font/entypo.ttf') format('truetype'),
	    url('../font/entypo.svg#webfontIyfZbseF') format('svg');
	}

আমরা এখন মার্কাপের সকল উপাদান data-icons দিয়ে সিলেক্ট করব, :before সুড্যো উপাদান ট্যাকিং করব যা data-icons ভ্যালুর মধ্যে যে ক্যারেক্টারই থাকুক প্রতিটির জন্য সুড্যো উপাদান পূরন করবে।

	[data-icon]:before {
		font-family: 'Entypo';
		content: attr(data-icon);
	}

উদাহরণস্বরূপ, এটি আমাদের প্রথম এঙ্করঃ

<a href="#" data-icon="&#128227;"></a>

এবং আমাদের CSS :before এর উপাদান পূর্ণ করার জন্য 📣 ভ্যালুটি ব্যবহার করব।

ধাপ ৭ঃ টুলবার উপাদানসমুহের শৈলি

চলুন আমাদের আইকনে কিছু অসাধারন ইফেক্ট যোগ করি।

	div.sticky-toolbar ul li a{
	display: block;
	width: .8em;
	margin: 0.2em;
	line-height: 80%;
	font-size: 2.2em;
	text-align: center;
	color: #fff;
	background-color: #16A085;
	-webkit-border-radius: .1em;
	-moz-border-radius: .1em;
	border-radius: .1em;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	-webkit-font-smoothing: antialiased;
	}

নোটঃ ওয়েব ফন্ট আইকনদের সর্বাধিক সতেজ এবং স্পষ্ট করতে (অন্তত ওয়েবকিট ব্রাউজারগুলোতে), এই সেকশনে অন্তর্ভুক্ত করুন একটি -webkit-font-smoothing: antialiased; । আপনি এটিকে সবকিছুতে প্রয়োগের জন্য গ্লোবাল সিলেক্টর ব্যবহার করতে পারেনঃ * { -webkit-font-smoothing: antialiased; }

এখন কিছু হোবার ইফেক্ট যোগ করুন, এবং হয়ে গেলো।

	div.sticky-toolbar ul li a:hover{
	background-color: #1ABC9C;
	}

ধাপ ৮ঃ পপ-আপ মেনু স্টাইলিং

এটি লেনদেন করবে আমাদের মেনু বারের সাথে, এখন চলুন পপ-আপ মেনুতে কিছু শৈলি যোগ করিঃ

	div.popup{
	display: none;
	float: right;
	position: relative;
	left: 5%;
	background-color: #2C3E50;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	}

নোটঃ এটির ডিফল্ট ষ্টেট এ আমাদের এই অংশটি display: none; দিয়ে হাইড করতে হবে। পরবর্তীতে আমরা ভিসিবিলিটি ট্যোগল করব jQuery দিয়ে। এখনকার জন্য আপনি ডিসপ্লে ভ্যালু খালি রাখতে পারেন, শৈলি শেষ করার পূর্ব পর্যন্ত, কিন্তু পরবর্তীতে এটি ফেরত আনতে ভুলবেন না।

ধাপ ৯ঃ পপ-আপ মেনুর উপাদানগুলোর শৈলি

সম্মুখে! চলুন মেনুর উপাদানগুলোতে কিছু শৈলি যোগ করিঃ

	div.popup ul li a{
	position: relative;
	display: inline-block;
	font-size: .85em;
	color: #fff;
	padding: 0 2em 0 2em;
	margin: .4em;
	text-align: center;
	text-decoration: none;
	transition: all 0.1s ease-in-out;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	}

একটি সাধারন :hover ইফেক্ট যোগ করুনঃ

	div.popup ul li a:hover{
	background-color: #1ABC9C;
	}

ধাপ ১০ঃ CSS দিয়ে একটি অ্যারো তৈরি করুন

সচ্ছ .png অ্যারো ইমেজ বানানোর পরিবর্তে, আমরা একটি দারুন কৌশল ব্যবহার করে একই ইফেক্ট (যদিও সম্পূর্নভাবে স্কেলেবল) তৈরি করবো CSS বর্ডার ব্যবহার করে। এটিতে সুড্যো উপাদানগুলো ব্যবহার করাও সম্ভব, যদি আপনি আপনার মার্কাপের এডিশনাল উপাদানগুলোর সাথে বিশৃঙ্খলা সৃষ্টি না করেন।

	.arrow {
	position: absolute;
	top: 10%;
	left: -.4em;
	width: 0; height: 0;
	border-top: .5em solid transparent;
	border-right: .5em solid #2C3E50;
	border-bottom: .5em solid transparent;  
	}

এটি কিভাবে সম্পাদিত হয়েছে তার আরো বিস্তারিত জানতে, চেক করুন Joren Van Hee এর CSS Triangle এর ঝটপট পরামর্শতে।

ধাপ ১১ঃ একটি ট্যোগল ফাংশন তৈরি

শেষ ধাপে আমরা ব্যবহার করব একটি jQuery স্নিপেট, যা আমাদের পপ-আপ মেনুকে ট্যোগল করতে সমর্থন করবে। আমাদের ডকুমেন্টের তলায় এখানে দেখানো <script> সেকশনটি যোগ করুন, jQuery নিচে থেকে যাতে নিজে নিজে কল করতে পারে।

$(document).ready ফাংশনের (নিশ্চিত হতে আমাদের সকল পেইজ কন্টেন্ট লোড হয়েছে এবং প্রস্তুত রয়েছে) মধ্যে আমরা .popup এ jQuery র fadeToggle() মেথড প্রয়োগ করব, #support's ক্লিক ইভেন্ট উপর।

<script type="text/javascript">

	$(document).ready(
		function(){
        $("#support").click(function () {
        	$(".popup").fadeToggle(150);
        	return false;
        });
    });

</script>

নোটঃ অনুগ্রহ করে নিশ্চিত হোন যে আপনি return false স্ট্যেটমেন্টটি অন্তর্ভুক্ত করেছেন, যা আপনাকে বিরত রাখবে পেইজের শীর্ষে ফেরত আসতে প্রতিটা সময় আপনি আইকনে ক্লিক করলে।

উপসংহার

আপনার পরবর্তী প্রজেক্টের জন্য অসাধারন এবং ফাংশনাল কিছু তৈরি করতে এটি একটি সহজ এবং ঝটপট দ্বার। এটি আপনি যেভাবে চান পরিবর্তন করতে পারেন, সামনে আপনি কিভাবে এটি ব্যবহার করেছেন কমেন্টে তা জানার প্রত্যাশা করছি।