CSS হোরিজন্টাল নেভিগেশন বার

কোর্স সুপারিশ:

হলকি নেভিগেশন বারদুইটি পদ্ধতি হল হলকি নেভিগেশন বার তৈরির: ব্যবহার করাবাইনলাইনফ্লটিং

তালিকাপত্র উপাদান

হলকি নেভিগেশন বার তৈরির একটি পদ্ধতি হল, <li> উপাদানকে inline হিসাবে নির্দিষ্ট করা এবং পূর্ববর্তী চাপকের সাথে সাজানো:

উদাহরণ

li {
  display: inline;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ ব্যাখ্যা:

display: inline; - প্রক্রিয়াকরণের মূল পরিস্থিতিতে, <li> উপাদানগুলি ব্লক উপাদান।এখানে, আমরা প্রত্যেক তালিকাপত্র উপাদান পূর্বে এবং পরে স্থানান্তর করে দিই, যাতে তারা একই সারিতে দেখা যায়

ফ্লটিং তালিকাপত্র উপাদান

হলকি নেভিগেশন বার তৈরির একটি অন্য পদ্ধতি হল, <li> উপাদানকে ফ্লটিং করা এবং নেভিগেশন লিঙ্ককে সাজানো:

উদাহরণ

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ ব্যাখ্যা:

  • float: left; - float ব্যবহার করে ব্লক উপাদানকে পারস্পরিকভাবে সরিয়ে যাওয়ার জন্য
  • display: block; - লিঙ্ককে ব্লক উপাদান হিসাবে দেখাতে সমগ্র লিঙ্ক এলাকা ক্লিকযোগ্য করে (শুধুমাত্র টেক্সট নয়), এবং আমরা পুলবিন্দু (যদি প্রয়োজন, তবে উচ্চতা, প্রস্থ, মার্গ ইত্যাদি) নির্দিষ্ট করতে পারি
  • padding: 8px; - ব্লক উপাদানকে সুন্দরতর করুন
  • background-color: #dddddd; - প্রত্যেক উপাদানে গ্রীষ্মকমল প্রক্ষেপণ যোগ করুন

পরামর্শ:সম্পূর্ণ প্রস্থ প্রক্ষেপণ সহ, background-color-কে <ul> এ যুক্ত করুন না, প্রত্যেক <a> উপাদানের জন্য:

উদাহরণ

ul {
  background-color: #dddddd;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

হলকি নেভিগেশন বার প্রদর্শন

কালো প্রক্ষেপণ সহ মূল হলকি নেভিগেশন বার তৈরি করুন এবং ব্যবহারকারী লিঙ্কের উপর মাউস নিয়ে যাওয়ার সময় লিঙ্কের প্রক্ষেপণ পরিবর্তন করুন:

উদাহরণ

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */
li a:hover {
  background-color: #111;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

活动/当前导航链接

向当前链接添加 "active" 类，这样用户就知道他/她在哪个页面上：

উদাহরণ

.active {
  background-color: #4CAF50;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

右对齐链接

通过将列表项向右浮动来右对齐链接（float:right;）：

উদাহরণ

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

边框分隔栏

将 border-right 属性添加到

  • ，以创建链接分隔符：

    উদাহরণ

    /* 为所有列表项添加灰色右边框，最后一项（last-child）除外 */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

    স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

    • 固定的导航栏

    使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此：

    固定在顶部

    ul {
  position: fixed;
  টপ: ০;
  width: 100%;
}

    স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

    固定在底部

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

    স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

    নোট:固定定位在移动设备上可能无法正常工作。

    灰色水平导航栏

    带有细灰色边框的灰色水平导航栏的实例

    উদাহরণ

    ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

    স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

    স্টিকি নেভিগেশন

    উপরোক্ত <ul> কে যোগ করুন পোজিশন: স্টিকি;স্টিকি নেভিগেশন বার তৈরি করতে。

    স্টিকি ইলেমেন্টটি সরবরাহের অবস্থান অনুযায়ী অপরিবর্তনীয় এবং স্থায়ীর মধ্যে ট্রান্সফর করে। এটি অপরিবর্তনীয় অবস্থানে থাকে, পর্যন্ত দৃশ্যক্ষেত্রে দেওয়া অবস্থানটি পাওয়া যায় - তবে তাকে উপযুক্ত স্থানে “স্টিকি” করে দেওয়া হয় (যেমন position:fixed)。

    উদাহরণ

    ul {
  পোজিশন: -webkit-sticky; /* সাফারি */
  পোজিশন: স্টিকি;
  টপ: ০;
}

    স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

    নোট:ইন্টারনেট এক্সপ্লোরার, এডজ এবং ১৫ এবং আরও পুরানী সংস্করণগুলি স্টিকি লোকেশনকে সমর্থন করে না। সাফারির জন্য -webkit- প্রিফিক্স প্রয়োজন (উপরের উদাহরণ দেখুন)। আপনাকেও নিশ্চিতভাবে নির্দিষ্ট করতে হবে টপ、রাইট、বটম বা লেফট অন্তত একটি, যাতে স্টিকি লোকেশন কার্যকর হয়

    আরও ইনস্ট্যান্স

    রেসপনসিভ টপ নেভিগেশন
    CSS মিডিয়া কোয়াইয়ার ব্যবহার করে রেসপনসিভ টপ নেভিগেশন তৈরি করতে কিভাবে
    রেসপনসিভ সাইড নেভিগেশন
    CSS মিডিয়া কোয়াইয়ার ব্যবহার করে রেসপনসিভ সাইড নেভিগেশন তৈরি করতে কিভাবে
    ড্রপডাউন নেভিগেশন
    নেভিগেশন বার এক্সডাউন মেনু যোগ করতে কিভাবে