خانه آموزش CSS آموزش CSS مقدماتی آموزش کار با منوها یا Navigation Bar در CSS

آموزش کار با منوها یا Navigation Bar در CSS

توسط

۱۳۹۸-۰۸-۰۹

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با منوها یا Navigation Bar در CSS با من همراه باشید.

آموزش کار با منوها یا Navigation Bar در CSS

Free-Learn

آنچه در این جلسه میخوانید :

1 کار با منوها یا Navigation Bar در CSS
2 انواع منو در یک صفحه وب
3 نحوه ایجاد منوی افقی در CSS
4 نحوه ایجاد منوی عمودی در CSS
5 مثال های بیشتر از کار با منوها یا Navigation Bar در CSS

کار با منوها یا Navigation Bar در CSS

اصلا منو چیه؟ منو بطور کلی به چیزی گفته میشه که لیستی از برنامه ها یا لینک ها و.. را بتونه بصورت مرتب شده و دسته بندی شده به نمایش بگذارد.

منوها یکی از مهمترین و اساسی ترین بخش از یک وبسایت می باشند، چرا که ما به راحتی با استفاده از منوها و لینک هایی که درون آنها قرار دارد میتوانیم قسمت های مختلف یک وبسایت را مشاهده نماییم.

منوی سایت ها نیز دقیقا برای همینکار ایجاد می شوند، یعنی برای اینکه بتونن مطالب یک سایت رو بصورت دسته بندی شده و مرتب ایجاد کنند تا کاربران راحتتر بتونن مطالب مورد نظرشون رو در اون سایت پیدا کنند.

Free-Learn

حال ما برای طراحی و ایجاد منوی یک سایت ، باید ۲ کار اصلی رو انجام بدیم :

اول طراحی اسکلت منو ( با استفاده از زبان HTML )
دوم استایل دادن به منو جهت زیبایی و نمایش هرچه بهتر ( با استفاده از زبان CSS )

پس در ادامه میریم تا یاد بگیریم که چگونه میتوانیم یک منوی زیبا برای سایتمون طراحی کنیم، لطفا در ادامه و تا پایان این جلسه با من همراه باشید.

Free-Learn

انواع منو در یک صفحه وب

ما بطور کلی ۲ نمونه منو میتونیم داشته باشیم : ۱ » منوی افقی و ۲ » منوی عمودی ، که با توجه به نیاز میتونیم مشخص کنیم که منو افقی باشد و یا منوی مان عمودی.

منوی افقی : منوی ایست که آیتم های آن بصورت افقی (در عرض) قرار میگیرند و زیرآیتم های آن معمولا بصورت عمودی قرار میگیرند.

نمونه منوی افقی :

منوی عمودی : منوی ایست که آیتم های آن بصورت عمودی در زیر هم قرار میگیرند و معمولا زیرآیتم های آن هم میتواند بصورت افقی و هم بصورت عمودی قرار میگیرند.

نمونه منوی عمودی :

Free-Learn

نحوه ایجاد منوی افقی در CSS

خب اول میخوایم یاد بگیریم که چگونه میتوانیم یک منوی افقی برای صفحه وبمان ایجاد نماییم، پس لطفا در ادامه با همراه باشید.

مرحله اول : در مرحله اول ، همونطور که در ابتدای این آموزش اشاره کردم ، ما باید اسکلت منوی مان را با استفاده از HTML و با استفاده از تگ UL طراحی و ایجاد نماییم.

ما از طریق تگ OL نیز میتوانیم اسکلت منو را پیاده سازی نماییم ولی خب چون تگ OL یک لیست مرتب شده می باشد ولی تگ UL یک لیست نامرتب ، به همین دلیل معمولا و بیشتر از تگ UL برای ساخت منو استفاده میکنند.

ایجاد اسکلت منو با استفاده از تگ UL در HTML

<body>

<ul>
 <li><a href="#">خانه</a></li>
 <li><a href="#">آموزش HTML</a></li>
 <li><a href="#">آموزش CSS</a></li>
 <li><a href="#">درباره ما</a></li>
</ul>

</body>

<body>

<ul>

<li><a href="#">آموزش HTML</a></li>

<li><a href="#">آموزش CSS</a></li>

<li><a href="#">درباره ما</a></li>

</ul>

</body>

امتحان کنید

اگه لطف کنید و بروی دکمه امتحان کنید کلیک نمایید، میبینید که اسکلت منوی ما ایجاد شده، ولی همونطور که میبینید اصلا قیافش به منو نمیخوره! خب صددرصد درسته ، چون از این به بعدش دیگه CSS میاد وسط.

اگر در مثال بالا توجه کرده باشید یه گلوله های مشکی توپُر که متعلق به تگ UL و در کل لیست های نامرتب می باشد هم وجود دارند، خب اینا که نباید باشن وگرنه استایل منومون رو خراب میکنه، پس باید حذفشون کنیم.

مرحله دوم : استفاده از دستورات CSS جهت استایل دهی و زیباسازی منو

خب حالا میخوام اون گلوله های مشکی توپُر رو که کنار آیتم های منو هست ، حذف کنم، پس میتونم از ویژگی list-style-type جهت حذف این گلوله ها استفاده کنیم.

بصورت پیش فرض یک فضای خالی در اطراف آیتم های تگ ul توسط مرورگرها ایجاد می شود، که میتوانیم با استفاده از ویژگی های padding و margin با مقدار ۰ این فضای خالی را حذف نماییم.

ul{
 padding:0;
 margin:0;
 list-style-type:none;
}

ul{

padding:0;

margin:0;

list-style-type:none;

}

امتحان کنید

حالا میخوایم کاری کنیم که گزینه های منو بصورت افقی قرار بگیرند و پشت سرهم. (در واقع میشه گفت گزینه ها بصورت اینلاین یا درون خطی قرار می گیرند)

و چون ما زبانمان فارسی می باشد، یعنی در واقع جهت متن مون از راست به چپ می باشد، پس باید گزینه های منو در سمت راست صفحه قرار بگیرند.

li {
 float:right;
}

li {

float:right;

}

امتحان کنید

حالا میخوایم یه سرسامونی به لینک های موجود در منو مون بدیم، برای اینکار ما باید در CSS تگ a رو که میشه لینک هامون اول انتخاب کنیم و سپس استایل دلخواه مون رو بهش بدیم.

توضیح دستورات زیر :

ویژگی text-decoration : برای حذف خط زیر لینک ها
ویژگی padding : برای ایجاد یک فضای خالی یا فاصله در عنصر لینک
شبه کلاس hover : با استفاده از این شبه کلاس میتوانیم مشخص کنیم که وقتی ماوس بروی لینک ها رفت چه اتفاقی بیوفتد.

li a{
 display:block;
 text-decoration:none;
 padding:8px;
 color:#fff;
}

li a:hover{
 background-color:#d51c00;
}

li a{

display:block;

text-decoration:none;

padding:8px;

color:#fff;

}

li a:hover{

background-color:#d51c00;

}

امتحان کنید

خب تموم شد، به همین راحتی تونستید یک منوی افقی ایجاد کنید، حالا در مثال زیر بطور کامل دستورات مرحله اول و دوم را میتوانید مشاهده نمایید.

<!DOCTYPE html>
<html>
<head>
<style>

ul{
 padding:0;
 margin:0;
 list-style-type:none;
 background-color:#333333;
 overflow: hidden;
}

li {
 float:right;
}

li a{
 display:block;
 text-decoration:none;
 padding:8px;
 color:#fff;
}

li a:hover{
 background-color:#d51c00;
}

</style>
</head>
<body dir="rtl">

<ul>
 <li><a href="#">خانه</a></li>
 <li><a href="#">آموزش HTML</a></li>
 <li><a href="#">آموزش CSS</a></li>
 <li><a href="#">درباره ما</a></li>
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul{

padding:0;

margin:0;

list-style-type:none;

background-color:#333333;

overflow: hidden;

}

li {

float:right;

}

li a{

display:block;

text-decoration:none;

padding:8px;

color:#fff;

}

li a:hover{

background-color:#d51c00;

}

</style>

</head>

<ul>

<li><a href="#">آموزش HTML</a></li>

<li><a href="#">آموزش CSS</a></li>

<li><a href="#">درباره ما</a></li>

</ul>

</body>

</html>

امتحان کنید

Free-Learn

نحوه ایجاد منوی عمودی در CSS

برای ایجاد یک منوی عمودی در CSS ، دقیقا همون کارایی که برای ایجاد منوی افقی انجام دادیم برای منوی عمودی نیز باید انجام بدیم ، تنها نقطه تفاوت یک منوی افقی با یک منوی عمودی در ویژگی width و float می باشد.

یعنی فقط کافیه در قسمت دستورات CSS تگ UL بیایم و از ویژگی width و با یک مقدار دلخواه استفاده نماییم ، سپس در قسمت دستورات CSS تگ a دیگه لازم نیست از ویژگی float استفاده کنیم.

ul{
 padding:0;
 margin:0;
 list-style-type:none;
 background-color:#333333;
 overflow: hidden;
 width:190px;
}

ul{

padding:0;

margin:0;

list-style-type:none;

background-color:#333333;

overflow: hidden;

width:190px;

}

امتحان کنید

Free-Learn

مثال های بیشتر از کار با منوها یا Navigation Bar در CSS

مثال شماره ۱ : قرار دادن آیتم در سمت چپ منو (یا در سمت راست) بر خلاف آیتم های منو

<ul>
 <li><a href="#">خانه</a></li>
 <li><a href="#">آموزش HTML</a></li>
 <li><a href="#">آموزش CSS</a></li>
 <li style="float:left;"><a href="#">درباره ما</a></li>
</ul>

<ul>

<li><a href="#">آموزش HTML</a></li>

<li><a href="#">آموزش CSS</a></li>

<li style="float:left;"><a href="#">درباره ما</a></li>

</ul>

امتحان کنید

مثال شماره ۲ : فیکس یا ثابت کردن منو در سمت بالا صفحه (در برخی از تلفن های همراه ممکن است کار نکند)

ul{
 position: fixed;
 top: 0;
 width: 100%;
}

ul{

position: fixed;

top: 0;

width: 100%;

}

امتحان کنید

مثال شماره ۳ : فیکس یا ثابت کردن منو در سمت پایین صفحه (در برخی از تلفن های همراه ممکن است کار نکند)

ul{
 position: fixed;
 bottom: 0;
 width: 100%;
}

ul{

position: fixed;

bottom: 0;

width: 100%;

}

امتحان کنید

مثال شماره ۴ : ایجاد منوی افقی با استفاده از تگ div و تگ a ( بدون استفاده از تگ های UL و Li ) – بهمراه زیرمنو / زیرآیتم

<body>

<div class="navbar">
 <a href="#">خانه</a>
 <a href="#">آموزش HTML</a>
 <a href="#">آموزش CSS</a>
  <div class="dropdown">
    <button class="dropbtn"> فری لرن </button>
      <div class="dropdown-content">
        <a href="#">لینک 1</a>
        <a href="#">لینک 2</a>
        <a href="#">لینک 3</a>
      </div>
  </div> 
</div>

</body>

<body>

<a href="#">آموزش HTML</a>

<a href="#">آموزش CSS</a>

</div>

</body>

امتحان کنید

مثال شماره ۵ : ایجاد منوی افقی با استفاده تگ های ul و li ( بهمراه زیرمنو / زیرآیتم )

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">دسته</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">منوی بازشو</a>
    <div class="dropdown-content">
      <a href="#">لینک 1</a>
      <a href="#">لینک 2</a>
      <a href="#">لینک 3</a>
    </div>
  </li>
</ul>

<ul>

<a href="javascript:void(0)" class="dropbtn">منوی بازشو</a>

</div>

</li>

</ul>

امتحان کنید

مثال شماره ۶ : ایجاد زیرمنو یا زیرآیتم برای منوی عمودی

<body>

<div id="cssmenu">
<ul>
 <li><a href="#"><span>خانه</span></a></li>
 <li class="active"><a href="#"><span>آموزش »</span></a>
  <ul>
   <li><a href="#"><span>HTML »</span></a>
    <ul>
     <li><a href="#"><span>تگ های HTML</span></a></li>
     <li><a href="#"><span>صفات HTML</span></a></li>
    </ul>
   </li>
   <li><a href="#"><span>CSS »</span></a>
    <ul>
     <li><a href="#"><span>انتخابگرهای CSS</span></a></li>
     <li><a href="#"><span>ویژگی های CSS</span></a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li><a href="#"><span>درباره من</span></a></li>
 <li><a href="#"><span>تماس با من</span></a></li>
</ul>
</div>

</body>

<body>

<ul>

<li class="active"><a href="#"><span>آموزش »</span></a>

<ul>

<ul>

</ul>

</li>

<ul>

<li><a href="#"><span>انتخابگرهای CSS</span></a></li>

<li><a href="#"><span>ویژگی های CSS</span></a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#"><span>درباره من</span></a></li>

</ul>

</div>

</body>

امتحان کنید

خب دوستان خسته نباشید به پایان این جلسه ( آموزش کار با منوها یا Navigation Bar در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید و اگه هم مشکلی هست لطفا در قسمت پرسش و پاسخ CSS مشکل تان را مطرح نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب