如何创建：大型菜单

学习如何创建大型菜单（导航栏中的全宽下拉菜单）。

创建大型菜单

创建一个下拉菜单，当用户将鼠标移动到导航栏中的元素上时会显示该菜单。

第一步 - 添加 HTML：

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      <a href="#">Link 3</a>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <div class="column">
          <h3>Category 2</h3>
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <div class="column">
          
Category 3
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      <a href="#">Link 3</a>
    <a href="#">Link 3</a>
  <a href="#">Link 3</a>
<a href="#">Link 3</a>

例子解释：

</div>

ဖြိုဖျက် စာရင်း အကွက် အသား (ဥပမာ <div class="dropdown-content">) ကို ဖွင့်လိုက် ရန် အရာ တခုခု ကို အသုံးပြုလိုက် ပါ။ ဥပမာ <button> သို့မဟုတ် <a> သို့မဟုတ် <p> အသား。

အခြေခံ အကွက် <div class="dropdown"> အသား ကို အချက်အလက် ပုံစံ နှင့် အကွက် အသား (<div class="dropdown-content">) ကို စတင် ပေါင်းစပ် ပြီး ဖြိုဖျက် စာရင်း အသား ကို အခြေခံ အကွက် ကို အခြေခံ အကွက် ပြုလုပ်ပါ。

ဒုတိယ အပိုင်း - အခြေခံ စီစဥ် ပြုလုပ်:

/* လက်တင် အကွက် */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* လက်တင် အချက် အသား */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ဖြိုဖျက် စာရင်း အကွက် */
.dropdown {
  float: left;
  overflow: hidden;
}
/* ဖြိုဖျက် စာရင်း အချက် */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* ကျွန်ုပ် မိုးစ်ချက် အချိန် အာကာသ အာကာသ အား အရေးကြီး */
  margin: 0; /* ကျွန်ုပ် မိုးစ်ချက် အချိန် အာကာသ အာကာသ အား အရေးကြီး */
}
/* မိုးစ်ချက် ခေါ် ဖိုးထုတ် ဖြင့် လက်တင် ပေါ် အသား အပြာရောင် အော်ပရောဂျက် ပြုလုပ် */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* ဖြိုဖျက် စာရင်း အသား (ပြန်လည် မှတ်သားခြင်း) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ကြီးမားသော အမှတ်အသား အော်ပရောဂျက် (လိုလားချင်လျှင်) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 创建三个等宽的列，并使其并排浮动 */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* 为列内的链接设置样式 */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* 鼠标悬停时添加背景颜色 */
.column a:hover {
  background-color: #ddd;
}
/* 清除列后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားလုပ်ကြည်း

例子解释：

我们已经为导航栏和导航栏链接设置了背景色、内边距等样式。

我们为下拉菜单按钮设置了背景色、内边距等样式。

.dropdown-content 类包含实际的下拉菜单。它默认是隐藏的，将在鼠标悬停时显示（见下文）。它被定位在下拉菜单按钮的正下方，并且宽度设置为 100%，以覆盖整个屏幕。

我们没有使用边框，而是使用了 box-shadow 属性，使下拉菜单看起来像一个“卡片”。我们还使用 z-index 将下拉菜单放置在其他元素的前面。

:hover အသုံးပြုသည် ဖြစ်ပါသည်။ အသုံးပြုသည် ဖြစ်ပါသည်။

.column အကိုးအခံ အော်လက်ဆာ အတွက် သုံးလုံး အစီအစဉ် ပေါင်းစပ် ဖြင့် တပ်ဆင်ခြင်း အသုံးပြု သည် ဖြစ်ပါသည်။ အမျိုးမျိုးသော အမျိုးအစား ကို ပြပြောဆိုရန် ဖြစ်ပါသည်。

ပါဝင်သော စာမျက်နှာ

ပရိုဂရမ်CSS 下拉菜单

ပရိုဂရမ်ပြီးနောက် အပြန်ပြောင်းတည်တံ့ သုံးနိုင်သော အခြေခံ အမြန်မြတ် အသုံးပြ� အမြန်မြတ် အော်လက်ဆာ ကို ဖန်တီးခြင်း

ပရိုဂရမ်CSS 导航栏

ပရိုဂရမ်ပြီးနောက် အပြန်ပြောင်းတည်တံ့ သုံးနိုင်သော အခြေခံ အမြန်မြတ် အသုံးပြု အမြန်မြတ် ပေါ်ခန်း ကို ဖန်တီးခြင်း