site-logo site-logo
CSS - نوار ناوبری (Navbar)
نوشتن نظر کلیک کنید

CSS – نوار ناوبری (Navbar)

آخرین بروزرسانی: 

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

این نوار ناوبری می‌تواند افقی یا عمودی باشد و حاوی پیوندهایی به صفحات یا ویژگی‌های مهم باشد.

همچنین، نوارهای ناوبری می‌توانند شامل عناصر دیگری نیز باشند، مانند لوگوی وب‌سایت یا برنامه، نوار جستجو، یا آیکون‌های شبکه‌های اجتماعی. با استفاده از CSS، می‌توان ظاهر نوارهای ناوبری را تغییر داد.

CSS Horizontal Navbar

این قسمت یک نوار ناوبری افقی را نشان می‌دهد که بیشترین نوع متداول نوارهای ناوبری است و در بالای یک صفحه وب نمایش داده می‌شود.

<html>
<head>
<style>
   ul {
      background-color: #28bf17; /* رنگ پس‌زمینه */
      overflow: hidden; /* جلوگیری از تداخل‌ها */
      list-style-type: none; /* حذف نقطه‌گذاری‌ها */
      margin: 0; /* حذف فاصله‌های لبه‌ها */
      padding: 0; /* حذف فاصله‌های داخلی */
   }
   li {
      float: left; /* تنظیم لیست عناصر به سمت چپ */
   }
   li a {
      display: block; /* تنظیم مشاهده عناصر به عنوان بلوک */
      color: #f2f2f2; /* رنگ متن */
      text-align: center; /* مرکز چین */
      padding: 10px; /* فاصله‌دهی داخلی */
      text-decoration: none; /* حذف زیرخط */
      font-size: 17px; /* اندازه قلم */
   }
   li a:hover {
      background-color: #dd9ede; /* تغییر رنگ پس‌زمینه هنگام هاور */
      color: black; /* تغییر رنگ متن هنگام هاور */
   }
   .active-link {
      background-color: #f53319; /* رنگ پس‌زمینه برای لینک فعال */
      color: white; /* رنگ متن برای لینک فعال */
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#" class="active-link">Tutorialspoint</a></li> <!-- لینک فعال -->
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">eBook</a></li>
   </ul>
   <h1>Welcome to TutorialsPoint</h1>
   <h3>Simple Easy Learning at your fingertips</h3>
</body>
</html>

این کد CSS تنظیمات زیر را دارد:

  • background-color: تنظیم رنگ پس‌زمینه نوار ناوبری.
  • overflow: hidden: جلوگیری از نمایش عناصر خارج از نوار ناوبری.
  • list-style-type: none: حذف نقطه‌گذاری‌ها از لیست عناصر.
  • margin: 0: حذف همه فواصل لبه‌های خارجی.
  • padding: 0: حذف همه فواصل داخلی.
  • float: left: قرار دادن عناصر در یک خط افقی.
  • display: block: تنظیم عناصر به عنوان بلوک برای پوشش کامل عرض نوار ناوبری.
  • color: تنظیم رنگ متن.
  • text-align: center: مرکز‌چین کردن متن.
  • padding: تنظیم فاصله داخلی برای هر عنصر.
  • text-decoration: none: حذف زیرخط لینک‌ها.
  • font-size: تنظیم اندازه قلم.

همچنین، با استفاده از :hover می‌توانیم تغییراتی در ظاهر لینک‌ها اعمال کنی

CSS Vertical Navbar

این بخش یک نوار ناوبری عمودی را نشان می‌دهد که به عنوان منوی نوار کناری شناخته می‌شود. این نوار ناوبری عموماً در سمت چپ یا راست صفحه قرار می‌گیرد.

<html>
<head>
<style>
   ul {
      background-color: #28bf17; /* رنگ پس‌زمینه */
      list-style-type: none; /* حذف نقطه‌گذاری‌ها */
      margin: 0; /* حذف فواصل لبه‌ها */
      padding: 0; /* حذف فواصل داخلی */
      width: 200px; /* عرض نوار ناوبری */
   }
   li {
      text-align: center; /* مرکز‌چین کردن متن */
   }
   li a {
      display: block; /* تنظیم به عنصر بلوک */
      color: #f2f2f2; /* رنگ متن */
      text-align: center; /* مرکز‌چین کردن متن */
      padding: 10px; /* فاصله‌دهی داخلی */
      text-decoration: none; /* حذف زیرخط */
      font-size: 17px; /* اندازه قلم */
   }
   li a:hover {
      background-color: #dd9ede; /* تغییر رنگ پس‌زمینه هنگام هاور */
      color: black; /* تغییر رنگ متن هنگام هاور */
   }
   .active-link {
      background-color: #f53319; /* رنگ پس‌زمینه برای لینک فعال */
      color: white; /* رنگ متن برای لینک فعال */
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#" class="active-link">Tutorialspoint</a></li> <!-- لینک فعال -->
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">eBook</a></li>
   </ul>
</body>
</html>

این کد CSS تنظیمات زیر را دارد:

  • background-color: تنظیم رنگ پس‌زمینه نوار ناوبری.
  • list-style-type: none: حذف نقطه‌گذاری‌ها از لیست عناصر.
  • margin: 0: حذف همه فواصل لبه‌های خارجی.
  • padding: 0: حذف همه فواصل داخلی.
  • width: 200px: تنظیم عرض نوار ناوبری.
  • text-align: center: مرکز‌چین کردن متن داخل هر عنصر.
  • display: block: تنظیم عنصر به عنوان بلوک برای پوشش کامل عرض نوار ناوبری.
  • color: تنظیم رنگ متن.
  • padding: تنظیم فاصله داخلی برای هر عنصر.
  • text-decoration: none: حذف زیرخط لینک‌ها.
  • font-size: تنظیم اندازه قلم.

همچنین، با استفاده از :hover می‌توانیم تغییراتی در ظاهر لینک‌ها اعمال کنیم، و با اعمال کلاس active-link به یکی از لینک‌ها، می‌توانیم آن را به عنوان فعال مشخص کنیم.

CSS Dropdown Navbar

این قسمت یک نوار ناوبری با گزینه‌های کشویی را نشان می‌دهد که هنگامی که کاربر بر روی یک لینک هاور می‌کند، یک فهرست کشویی ظاهر می‌شود. منوهای کشویی راهی برای نمایش لیستی از موارد مرتبط در یک فضای کوچک هستند.

<html>
<head>
<style>
   .navbar {
      background-color: #28bf17; /* رنگ پس‌زمینه نوار ناوبری */
      overflow: hidden; /* پنهان کردن عناصر خارج از محدوده نوار ناوبری */
   }
   .navbar a {
      display: block; /* نمایش به صورت بلوک */
      float: left; /* چیدمان افقی */
      color: #f2f2f2; /* رنگ متن */
      text-align: center; /* مرکز چین کردن متن */
      padding: 10px; /* فاصله داخلی */
      text-decoration: none; /* حذف زیرخط */
      font-size: 15px; /* اندازه قلم */
   }
   .navbar a:hover {
      background-color: #dd9ede; /* تغییر رنگ پس‌زمینه هنگام هاور */
      color: black; /* تغییر رنگ متن هنگام هاور */
   }
   .active-link {
      background-color: #f53319; /* رنگ پس‌زمینه برای لینک فعال */
      color: white; /* رنگ متن برای لینک فعال */
   }
   .dropdown {
      float: left; /* چیدمان افقی */
   }
   .dropdown .dropbtn {
      border: none; /* حذف حاشیه */
      color: #f2f2f2; /* رنگ متن */
      padding: 10px; /* فاصله داخلی */
      background-color: #28bf17; /* رنگ پس‌زمینه */
   }
   .dropdown-content {
      display: none; /* پنهان کردن محتوا */
      position: absolute; /* مکان مطلق */
      background-color: #c7385a; /* رنگ پس‌زمینه فهرست */
      min-width: 120px; /* حداقل عرض */
   }
   .dropdown-content a {
      float: none; /* حذف چیدمان افقی */
      color: #f2f2f2; /* رنگ متن */
      padding: 10px; /* فاصله داخلی */
      display: block; /* نمایش به صورت بلوک */
      text-align: left; /* چینش متن به چپ */
   }
   .dropdown-content a:hover {
      background-color: #dd9ede; /* تغییر رنگ پس‌زمینه هنگام هاور */
      color: black; /* تغییر رنگ متن هنگام هاور */
   }
   .dropdown:hover .dropdown-content {
      display: block; /* نمایش محتوا هنگام هاور بر روی دکمه کشویی */
   }
</style>
</head>
<body>
   <nav class="navbar">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <div class="dropdown">
         <button class="dropbtn">Articles</button>
         <div class="dropdown-content">
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">Bootstrap</a>
         </div>
      </div>
      <a href="#">Courses</a>
      <a href="#">eBook</a>
   </nav>
   <h1>Welcome to TutorialsPoint</h1>
   <h3>Simple Easy Learning at your fingertips</h3>
</body>
</html>

این کد CSS تنظیمات زیر را دارد:

  • background-color: تنظیم رنگ پس‌زمینه نوار ناوبری.
  • overflow: hidden: جلوگیری از نمایش عناصر خارج از محدوده نوار ناوبری.
  • float: left: چیدمان افقی.
  • display: block: نمایش به صورت بلوک برای پوشش کامل عرض نوار ناوبری.
  • color: تنظیم رنگ متن.
  • padding: تنظیم فاصله داخلی برای هر عنصر.
  • text-decoration: none: حذف زیرخط لینک‌ها.
  • font-size: تنظیم اندازه قلم.

همچنین، با استفاده از :hover می‌توانیم تغییراتی در ظاهر صفحات ایجاد کنیم.

CSS Fixed Navbar

این کد HTML و CSS یک نوار ناوبری ثابت (fixed navbar) را نشان می‌دهد. نوار ناوبری ثابت یک نوار ناوبری است که وقتی کاربر پایین صفحه می‌رود، به بالای صفحه چسبیده می‌ماند. برای ساختن یک نوار ناوبری ثابت، می‌توانید از ویژگی position: fixed استفاده کنید.

<html>
<head>
<style>
   body {
      margin: 0;
   }
   .navbar {
      position: fixed; /* تنظیم نوار ناوبری به حالت ثابت */
      top: 0; /* انتقال نوار ناوبری به بالای صفحه */
      width: 100%; /* تنظیم عرض نوار ناوبری */
      margin: 0;
      padding: 0px;
      overflow: hidden;
      background-color: #28bf17; /* تنظیم رنگ پس‌زمینه */
   }
   .navbar a {
      display: block;
      float: left;
      color: #f2f2f2; /* تنظیم رنگ متن */
      text-align: center;
      padding: 10px;
      text-decoration: none;
      font-size: 17px; /* تنظیم اندازه قلم */
   }
   .navbar a:hover {
      background-color: #dd9ede; /* تغییر رنگ پس‌زمینه هنگام هاور */
      color: black; /* تغییر رنگ متن هنگام هاور */
   }
   .active-link {
      background-color: #f53319; /* تنظیم رنگ پس‌زمینه برای لینک فعال */
      color: white; /* تنظیم رنگ متن برای لینک فعال */
   }
   .heading {
      padding-top: 170px; /* ایجاد فاصله بین نوار ناوبری و متن */
      text-align: center;
      background-color: #e6e451; /* تنظیم رنگ پس‌زمینه برای بخش متنی */
      padding-bottom: 300px; /* ایجاد فاصله در پایین بخش متنی */
   }
</style>
</head>
<body>
   <nav class="navbar">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">eBook</a>
   </nav>
   <div  class="heading">
      <h1>Welcome to TutorialsPoint</h1>
      <h2>Tutorialspoint CSS Fixed Navbar</h2>
      <h3>Simple Easy Learning at your fingertips</h3>
   </div>
</body>
</html>

این کد CSS شامل تنظیمات زیر است:

  • position: fixed: تنظیم نوار ناوبری به حالت ثابت.
  • top: 0: انتقال نوار ناوبری به بالای صفحه.
  • width: 100%: تنظیم عرض نوار ناوبری به اندازه عرض صفحه.
  • background-color: تنظیم رنگ پس‌زمینه نوار ناوبری.
  • padding-top: ایجاد فاصله بین نوار ناوبری و محتوای بالایی.
  • padding-bottom: ایجاد فاصله در پایین محتوا برای جلوگیری از تداخل با نوار ناوبری در هنگام اسکرول.

CSS Sticky Navbar

این کد یک نوار ناوبری چسبیده را نشان می‌دهد که با استفاده از ویژگی position: sticky ایجاد شده است. این نوار ناوبری در بالای صفحه باقی می‌ماند حتی زمانی که کاربر پایین صفحه اسکرول می‌کند.

<html>
<head>
<style>
   body {
      margin: 0;
   }
   .navbar {
      position:sticky;
      top: 0; 
      width: 100%;
      margin: 0;
      padding: 0px;
      overflow: hidden;
      background-color: #28bf17;
   }
   .navbar a {
      display: block;
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 10px;
      text-decoration: none;
      font-size: 17px;
   }
   .navbar a:hover {
      background-color: #dd9ede;
      color: black;
   }
   .active-link {
      background-color: #f53319;
      color: white;
   }
   .heading {
         padding-top: 170px;
         text-align: center;
         background-color: #e6e451;
         padding-bottom: 300px
   }
   h2 {
         text-align: center;
   }
</style>
</head>
<body>
   <h2>Scroll down to see the effect</h1>
   <nav class="navbar">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">eBook</a>
   </nav>
   <div  class="heading">
      <h1>Welcome to TutorialsPoint</h1>
      <h2>Tutorialspoint CSS Sticky Navbar</h2>
      <h3>Simple Easy Learning at your fingertips</h3>
   </div>
</body>
</html>

این کد دارای ویژگی‌های زیر است:

  • position:sticky: تعیین می‌کند که نوار ناوبری چسبیده باشد.
  • top: 0;: مشخص می‌کند که نوار ناوبری از بالای صفحه شروع شود.
  • width: 100%;: اندازه نوار ناوبری را در تمام صفحه قرار می‌دهد.
  • overflow: hidden;: جلوگیری از نمایش عناصر خارج از محدوده نوار ناوبری.
  • background-color: تنظیم رنگ پس‌زمینه نوار ناوبری.
  • padding: تنظیم فاصله داخلی برای عناصر نوار ناوبری.
  • color: تنظیم رنگ متن عناصر نوار ناوبری.
  • text-decoration: حذف زیرخط از لینک‌ها.
  • font-size: تنظیم اندازه قلم عناصر نوار ناوبری.
  • :hover: اعمال تغییرات ظاهری هنگام هاور بر روی عناصر نوار ناوبری.
  • .active-link: تنظیمات برای لینک فعال در نوار ناوبری.

Divider Lines for Navbar

این قسمت یک خط تقسیم‌کننده بین لینک‌های نوار ناوبری اضافه می‌کند. این خط به عنوان یک جداکننده بین لینک‌های ناوبری عمل می‌کند و به ناوبری زیبایی بیشتری می‌بخشد. در این مثال، از ویژگی border-right برای اضافه کردن خط تقسیم‌کننده به سمت راست هر لینک استفاده شده است.

<html>
<head>
<style>
   .navbar {
      background-color: #28bf17;
      overflow: hidden;
   }
   .navbar a {
      display: block;
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 10px;
      text-decoration: none;
      font-size: 17px;
      border-right: 2px solid #f013c8;
   }
   .navbar a:hover {
      background-color: #dd9ede;
      color: black;
   }
   .active-link {
      background-color: #f53319;
      color: white;
   }
</style>
</head>
<body>
   <nav class="navbar">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">eBook</a>
   </nav>
   <h1>Welcome to TutorialsPoint</h1>
   <h2>Tutorialspoint CSS Navbar with borders</h2>
</body>
</html>

این کد دارای ویژگی‌های زیر است:

  • border-right: تنظیم خط تقسیم‌کننده برای سمت راست هر لینک در نوار ناوبری.
  • solid: نوع خط؛ در اینجا، خطوط رویایی استفاده شده است.
  • 2px: ضخامت خط.

Fixed Vertical Navbar

این بخش یک نوار ناوبری عمودی ثابت ایجاد می‌کند که اطمینان می‌دهد که ناوبری در سمت چپ صفحه قرار می‌گیرد، حتی زمانی که کاربر به پایین صفحه اسکرول می‌کند. این نوار ناوبری با استفاده از ویژگی position: fixed ایجاد شده است که موقعیت نسبی نوار ناوبری را نسبت به پنجره مرورگر مشخص می‌کند.

<html>
<head>
<style>
   ul {
      position: fixed;
      background-color: #28bf17;
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      height: 100%;
   }
   li {
      text-align: center;
      border-bottom: 2px solid #f013c8;
   }
   li a {
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 10px;
      text-decoration: none;
      font-size: 17px;
   }
   li a:hover {
      background-color: #dd9ede;
      color: black;
   }
   .active-link {
      background-color: #f53319;
      color: white;
   }
   .heading {
      padding-top: 170px;
      text-align: center;
      background-color: #e6e451;
      padding-bottom: 300px
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#" class="active-link">Tutorialspoint</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">eBook</a></li>
   </ul>
   <div  class="heading">
      <h1>Welcome to TutorialsPoint</h1>
      <h2>Tutorialspoint CSS Fixed Vertical Navbar</h2>
      <h3>Simple Easy Learning at your fingertips</h3>
   </div>
</body>
</html>

این کد دارای ویژگی‌های زیر است:

  • position: fixed: تنظیم موقعیت نسبی الزامی نوار ناوبری نسبت به پنجره مرورگر.
  • width: 200px: تعیین عرض نوار ناوبری.
  • height: 100%: تنظیم ارتفاع نوار ناوبری برابر با ارتفاع پنجره مرورگر.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.