فرادرسایجاد نوار ناوبری واکنش گرا با HTML ،CSS و جی کوئری – از صفر تا صد
نوار ناوبری یکی از مؤلفه‌های اصلی هر وب‌سایتی محسوب می‌شود و شاید مهم‌ترین مؤلفه باشد. در واقع نوار ناوبری نخستین جایی است که کاربر هنگام ورود به وب‌سایت مشاهده می‌کند و برای رفتن به بخش‌های مختلف باید از آن استفاده کند.
در این مقاله همه مراحل مورد نیاز برای ساخت یک نوار ناوبری ساده را بررسی می‌کنیم و با روش واکنشگرا ساختن آن آشنا می‌شویم. ما قصد داریم یک نوار ناوبری برای یک صفحه پورتفولیو بسازیم که 4 بخشبه صورت About Me ،Projects ،CV و Contacts دارد. البته شما می‌توانید آن را بسته به میل خود تغییر دهید.
در نهایت چیزی مانند تصویر زیر خواهیم داشت:
ابتدا کد HTML
تگ مورد استفاده برای ایجاد نوار ناوبری <nav> است و از این رو کار خود را از همین اینجا آغاز می‌کنیم.
کافی است تگ nav را باز کرده و ببندیم و فضایی بین دو تگ باقی بگذاریم تا تگ‌های دیگری در آن تعریف شوند.
1<nav>
2
3</nav>اکنون که همه چیز آماده است، می‌توانیم لیست لینک‌های خود را اضافه کنیم. برای ایجاد یک لیست می‌توانیم از تگ <ul> استفاده کنیم که اختصاری برای unordered list است. این تگ کانتینری برای list items با تگ <li> خواهد بود. تگ ul نیز درون تگ nav قرار می‌گیرد.
1<nav>
2 <ul>
3
4 </ul>
5</nav>سپس می‌توانیم شروع به افزودن آیتم‌های لیست خود بکنیم که شامل لینک‌هایی به بخش‌های اصلی وب‌سایت ما خواهد بود. (4 بخش که قبلاً معرفی کردیم):
1<nav>
2 <ul>
3 <!-- list item one -->
4 <li> </li>
5 <!-- list item two -->
6 <li> </li>
7 <!-- list item three -->
8 <li> </li>
9 <!-- list item four -->
10 <li> </li>
11 </ul>
12</nav>برای هر لیست آیتم باید نام بخش متناظر را اضافه کنیم، اما همچنین باید اطمینان حاصل کنیم که وقتی کاربری روی آن کلیک می‌کند، صفحه به سمت پایین اسکرول می‌کند تا به بخش مرتبط برسد. این کار از طریق تگ <a> یا تگ anchor میسر خواهد بود. شما می‌توانید هر تگ دیگری را نیز درون آیتم لیست درج کنید و سپس نام بخش را درون تگ anchor بنویسید.
1<nav>
2 <ul>
3 <li>
4 <!-- link one -->
5 <a> About Me </a>
6 </li>
7 <li>
8 <!-- link two -->
9 <a> Projects </a>
10 </li>
11 <li>
12 <!-- link three -->
13 <a> CV </a>
14 </li>
15 <li>
16 <!-- link four -->
17 <a> Contacts </a>
18 </li>
19 </ul>
20</nav>در این مرحله صفحه ما چیزی مانند تصویر زیر است:
البته هنوز شباهت چندانی به یک نوار ناوبری ندارد، اما تقریباً همه کد HTML که برای اجرای آن نیاز داریم را نوشته‌ایم و در ادامه صرفاً باید آن را استایل‌دهی بکنیم.
اکنون برای این که این لینک‌های قابل کلیک باشند، باید یک خصوصیت href به تگ‌های anchor خود اضافه کنیم. این خصوصیت شامل id بخشی که لینک شده خواهد بود و دارای ساختار correspondingId# است.
تصور کنید که 4 بخش داریم که id متناظر آن‌ها به ترتیب aboutMe ،#projects ،#cv# و contacts# است و می‌خواهیم به این تگ‌های anchor با استفاده از خصوصیت href یک id انتساب دهیم.
1<nav>
2 <ul>
3 <li>
4 <!-- link one -->
5 <a href="#aboutMe"> About Me </a>
6 </li>
7 <li>
8 <!-- link two -->
9 <a href="#projects"> Projects </a>
10 </li>
11 <li>
12 <!-- link three -->
13 <a href="#cv"> CV </a>
14 </li>
15 <li>
16 <!-- link four -->
17 <a href="#contacts"> Contacts </a>
18 </li>
19 </ul>
20</nav>نوار ناوبری ما اینک مانند تصویر زیر شده است:
زمان آن رسیده است که آن را کمی استایل‌دهی کنیم.
استایل‌دهی CSS
به احتمال بالا شما برای رها شدن از شر آن نقاط bullet لحظه‌شماری می‌کنید. اگر چنین است، جای نگرانی نیست، چون همین الان می‌خواهیم این کار را انجام دهیم.
کافی است فایل css دارای 3 خط زیر را بنویسیم که معنی آن این است که همه آیتم‌ها لازم نیست استایل لیست داشته باشند.
1li{
2 list-style-type: none;
3}
اکنون نوبت به رها شدن از آن زیرخط‌ها رسیده است. به این منظور 3 خط کد زیر را نیز به فایل CSS اضافه می‌کنیم:
1a{
2 text-decoration: none;
3}
تصور کنید می‌خواهیم یک نوار ناوبری افقی بسازیم و می‌خواهیم کل عرض صفحه را بپوشاند. این کار را می‌توانیم با افزودن یک خصوصیت width: 100vw به تگ nav انجام دهیم. معنی 100 در این خصوصیت آن است که 100% صفحه را می‌پوشاند و nw نیز به این معنی است که عرض صفحه نمایش (viewport) را می‌پوشاند.
1nav{
2 width: 100vw;
3}در این مرحله، احتمالاً متوجه هیچ تفاوتی نخواهید شد، اما اگر یک مشخصه رنگ پس‌زمینه به تگ nav بدهید و رنگ آن را مانند زیر به مقداری به جز رنگ فعلی تنظیم کنید همه چیز مشخص می‌شود:
1nav{
2 width: 100vw;
3 background-color: #D6EFFF;
4}بدین ترتیب تصویری مانند زیر می‌بینید:
دلیل این که چرا این فضای سفید کوچک در طرفین نوار ناوبری ظاهر می‌شوند این است که عناصری مانند body، یا ul دارای مقادیر پیش‌فرضی برای حاشیه هستند. این مقدار را با تعیین margin:0 به هر دوی این عناصر می‌توان حذف کرد. به علاوه اگر از تورفتگی لیست نیز خوشتان نمی‌آید، می‌توانید مقدار pdding:0 را نیز برای ul تنظیم کنید:
1ul{
2 margin: 0;
3 padding: 0;
4}
5
6body{
7 margin: 0;
8}نوار ناوبری ما هم اینک کل عرض صفحه را می‌پوشاند:
زمان آن رسیده است که لینک‌ها را در یک ردیف قرار دهیم و این کار را می‌توان به روش‌های متفاوتی انجام داد. دو مورد از آن‌ها را در ادامه ملاحظه می‌کنید:
- افزودن مشخصه ;display: inline به li
- افزودن مشخصه display: flex به ul
ما از گزینه دوم استفاده می‌کنیم زیرا در حالتی که بخواهیم نوار ناوبری خود را واکنشگرا بکنیم، انعطاف‌پذیری بیشتری در اختیار ما قرار می‌دهد.
1ul{
2 margin: 0;
3 padding: 0;
4
5 /*this option by default dispose the elements in a row (flex-direction: row)*/
6 display: flex;
7}
اکنون باید بین این آیتم‌های لیست فاصله‌بندی کنیم و این کار از طریق تعیین margin برای هر یک میسر است.
پیشنهاد می‌کنیم از مضربی از عرض viewport مانند آنچه در مورد عرض نوار ناوبری اجرا کردیم استفاده کنید. ما از margin به مقدار 2vw برای سمت راست و چپ استفاده می‌کنیم:
1li{
2 list-style-type: none;
3
4 /*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
5 margin: 0 2vw;
6}همچنین می‌توانید اندازه فونت را به صورت مضربی از viewport تنظیم کنید. در این مورد ترجیح می‌دهیم از مضربی از ارتفاع ویوپورت استفاده کنیم که متناسب با عرض آن است و با vh نمایش پیدا می‌کند.
1li{
2 list-style-type: none;
3 margin: 0 2vw;
4 /* our font-size will be 3% of the height of the viewport */
5 font-size: 3vh;
6}
اکنون اگر بخواهیم فاصله‌ای در بخش بالا و پایین نوار ناوبری خود نیز ایجاد کنیم می‌توانیم یک padding به عناصر <a> خود اضافه کنیم. همچنین می‌توانید آن رنگ آبی پیش‌فرض را حذف کنید. برای نمونه ما رنگ سیاه را ترجیح می‌دهیم.
1a{
2 text-decoration: none;
3
4 /*below I changed the color*/
5 color: black;
6 /*I added some padding*/
7 padding: 2vw;
8 /*also changed the font family but that's totally irrelevant*/
9 font-family: monospace;
10}
اکنون اگر کدی بنویسیم که هر بار روی نام بخشی می‌رویم تا حدودی هایلایت شود، جالب خواهد بود. این کار را با استفاده از سلکتور hover می‌توان اجرا کرد که ساختار آن به صورت زیر است:
element:hover{ /*property that will change when I move the mouse on the element here*/}.
کد مربوطه به صورت زیر است:
1a:hover{
2 background-color: #C6E9FF;
3}
منوی واکنشگرا
اگر از یک رایانه یا تبلت برای دیدن این صفحه استفاده می‌کنید، طرح‌بندی صفحه بی‌نقص خواهد بود، اما اگر روی گوشی آن را ببینید به صورت زیر درمی‌آید:
یکی از راه‌حل‌های اجتناب از این قرارگیری جدولی این است که یک نوار ناوبری عمودی بسازیم که پنهان است و تنها زمانی که روی یک دکمه کلیک می‌کنید ظاهر می‌شود.
قبل از هر چیز باید نوار ناوبری را عمودی کنیم. به این منظور باید از این واقعیت کمک بگیریم که در لیست نامرتب خود از مشخصه display: flex استفاده کرده‌ایم. بدین ترتیب کافی است یک مشخصه تعریف کرده و مقدار آن را column قرار دهیم. برای اطمینان از این که این کار تنها روی صفحه‌های کوچک صورت می‌گیرد می‌توانیم از مفهومی به نام media query استفاده کنیم.
همچنین باید مطمئن شویم که عنصر <a> کل عرض صفحه را می‌پوشاند به طوری که وقتی ماوس را روی آن می‌بریم می‌توانیم تغییر رنگ برای کل عرض صفحه ببینیم. به این منظور باید به عناصر a مشخصه‌ای به صورت display: block بدهیم.
بدین ترتیب هیچ فاصله‌ای در بخش فوقانی و تحتانی آن باقی نمی‌ماند (مقدار margin: 0 به li بدهید).
1/*change the layout of the navigation bar for all the screens
2that have a width less or equal than 500px*/
3
4@media only screen and (max-width: 500px) {
5 /*shows elements in a column*/
6 ul{
7 flex-direction: column;
8 }
9
10 /* deletes margin on top or bottom of the a tag*/
11 li{
12 margin: 0;
13 }
14 /* makes sure that the a tag will take the entire screen*/
15 a{
16 display: block;
17 }
18}در این مرحله ما تقریباً کار خود را به پایان برده‌ایم. کافی است دکمه‌ای طراحی کنیم که با کلیک کردن روی آن این منوی ناوبری باز و بسته شود. این دکمه را هر جایی می‌توان گذاشت، اما ما در این مثال آن را در تگ <ul> عنصر نخست قرار می‌دهیم تا در ابتدای لیست‌های آیتم نمایش یابد و مطمئن می‌شویم که همان alignment لیست آیتم را دارد.
1<nav>
2 <ul>
3 <!-- button here -->
4 <button> ? </button>
5 <li>
6 <!-- link one -->
7 <a href="#aboutMe"> About Me </a>
8 </li>
9 .... etc
10</nav>سپس قصد داریم کاری کنیم که در صورت نمایش روی صفحه عریض این دکمه پنهان شود.
1button{
2 display: none;
3}و برای این که وقتی روی صفحه‌های کوچک نمایش پیدا می‌کند مجدداً ظاهر شود:
1@media only screen and (max-width: 500px) {
2 ....
3
4 button{
5 /*makes the button visible*/
6 display: block;
7
8 /*since we are here, we can style it a little bit!*/
9 padding: 2vw;
10 font-size: 3vh;
11 background-color: #AFE0FF;
12 border: none;
13
14 /*outline none removes the default blue border that appears anytime you click on the button*/
15 outline: none;
16
17 cursor: pointer;
18 }
19}
اینک آن را به سمت چپ می‌بریم:
1button{
2 display: block;
3 ...
4 cursor: pointer;
5
6 /*this put the button on the left*/
7 align-self: flex-start;
8 }
استفاده از جی کوئری
پیش از آغاز کدنویسی باید کتابخانه جی کوئری را اضافه کنیم:
1<script src="jquery-3.4.0.min.js"></script>دو روش به این منظور وجود دارد:
1. اگر با فایل‌های مجزایی کار می‌کنید، می‌توانیم آن را در تگ head قرار دهید. در این حالت باید مطمئن شوید که آن را زیر تگ لینک فایل css خود و پیش از اسکریپتی کدی که می‌خواهید استفاده کنید قرار داده‌اید:
1<head>
2 <!-- probably other scripts here -->
3 <link rel="stylesheet" href="css/navbar.css">
4
5 <!-- here is the library link -->
6 <script src="jquery-3.4.0.min.js"></script>
7
8 <!-- below will go our script -->
9 <script src="scripts/navbar.js"></script>
10</head>2. اگر روی همان فایل (HTML) کار می‌کنید، آن را درست پیش از اسکریپت قرار دهید:
1<body>
2
3<!--HTML here-->
4
5</body>
6
7<!-- library link -->
8<script src="jquery-3.4.0.min.js"></script>
9
10<!-- script below -->
11<script type="text/javascript">
12 /*code here*/
13</script>اینک می‌خواهیم مقداری انیمیشن به نوار ناوبری خود بدهیم. به این منظور باید مطمئن شویم که وقتی نوار ناوبری باز است، با کلیک روی آیکون (✖) در منو می تونیم آن را بسته و پنهان کنیم. همچنین در ادامه با کلیک کردن روی آیکون منوی همبرگری (☰) می‌توانیم آن را باز کنیم. با کلیک کردن روی این آیکون منو به سمت پایین می‌شود. برای اینکه این کار به ساده‌ترین روش اجرا شود، از جی کوئری استفاده خواهیم کرد.
از آنجا که جی کوئری با سلکتورها (کلاس‌ها، تام‌های تک و غیره) کار می‌کند، باید تنها زمانی یک تابع را روی این عناصر فراخوانی کنیم که DOM بارگذاری شده باشد. این کار به دو روش میسر است:
1. یک تگ < script> را در انتهای فایل HTML قرار دهیم و کد خود را درون آن بنویسیم.
2. تابع ready را روی (document)$ فراخوانی کنیم و کد درون آن را تنها در صورتی اجرا کنیم که DOM آماده باشد. اگر قصد دارید از فایل مجزایی برای HTML و JS استفاده کنید، این روش توصیه شده است. ما نیز این روش را انتخاب می‌کنیم:
1$(document).ready(function(){
2 //insert code here
3});درون این تگ تابعی اضافه می‌کنیم که وقتی دکمه کلیک می‌شود اجرا خواهد کرد.
1$("document").ready(function(){
2 $("button").click(function(){
3 //insert code here
4 });
5});این کد به زبان ساده به این صورت است که اگر متن داخل دکمه به صورت ✖ باشد آن را با ☰ عوض کن. در غیر این صورت (اگر متن ☰ است) آن را با ✖ عوض کن.
1if($("button").text() == "☰"){
2 $("button").text("✖");
3}else{
4 $("button").text("☰");
5}سپس یک «جلوه دوتایی» (Toggle) را اضافه می‌کنیم و انجام این کار در جی کوئری کاملاً آسان است.
کافی است تابعی را روی آن عنصر که می‌خواهیم حالت دوتایی داشته باشیم، فراخوانی کنیم. ضمناً می‌توانیم در مورد سرعتی که عناصر با هم عوض می‌شوند نیز تصمیم‌گیری کنیم. این جلوه زمانی که کند (slow) باشد بسیار زیباتر است:
1$("li").toggle("slow");کد کامل به صورت زیر است:
1/* only execute this script when the document is ready */
2$(document).ready(function(){
3 /* function called when you click of the button */
4 $("button").click(function(){
5
6 /* this if else to change the text in the button */
7 if($("button").text() == "☰"){
8 $("button").text("?");
9 }else{
10 $("button").text("☰");
11 }
12
13 /* this function toggle the visibility of our "li" elements */
14 $("li").toggle("slow");
15 });
16});
بدین ترتیب کار ما به پایان می‌رسد، اکنون کافی است پا را فراتر گذارده و آن را بنا به سلیقه خود تغییر دهید.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی و برنامه نویسی وب
- آموزش کاربردی برنامه‌نویسی وب با جی کوئری
- مجموعه آموزش‌های پروژه محور برنامه‌نویسی
- آموزش پلاگین‌های کاربردی جی کوئری (jQuery)
- آموزش مقدماتی jQuery — مجموعه مقالات وبلاگ فرادرس
==
عالی بود منتظر اینجور آموزش هایی هستیم. چقدر عالی تر بود اگر لطف می‌کردید فیلمی تهیه میشد با کمی توضیحات بیشتر برای تازه کار ها ولی در هر جهت عالی بود ممنونم.
با سلام و احترام؛
صمیمانه از همراهی شما با مجله فرادرس و ارائه بازخورد سپاس‌گزاریم.
از اینکه این مطلب مورد توجه شما قرار گرفته است بسیار خرسند و مفتخریم.
برای یادگیری بیشتر می‌توانید از فیلم آموزشی زیر استفاده کنید:
برای شما آرزوی سلامتی و موفقیت داریم.