Horizontal Navigation Bar ng CSS

Horizontal na navigation bar

May dalawang paraan upang bumuo ng horizontal na navigation bar: gamit angInlineorFloatListahan ng item.

Inline na listahan ng item

Isa pang paraan upang bumuo ng horizontal na navigation bar ay gumamit ng <li> elemento bilang inline sa labas ng nakaraang code sa kabanata sa 'standard':

样例

li {
  display: inline;
}

Try It Yourself

Halimbawa ng paliwanag:

display: inline; - Sa kabilang paraan, ang <li> elemento ay elemento ng bloke sa karamihan ng mga kaso. Dito, tinatanggal namin ang mga pampahid ng bawat listahan ng item bago at pagkatapos, upang maipakita sila sa isang linya.

Float na listahan ng item

Isa pang paraan upang bumuo ng horizontal na navigation bar ay magfloat sa <li> elemento at magbigay ng layout sa navigation link:

样例

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

Try It Yourself

Halimbawa ng paliwanag:

  • float: left; - Gamit ang float upang ilipat ang bloke na elemento sa tabi ng isa’t isa
  • display: block; - Ang pagpapakita ng link bilang bloke na elemento ay nagbibigay ng buong lugar ng link na klikable (hindi lamang ang teksto), at pinahihintulutan namin na magbigay ng pad (kung kailangan, pati na rin ang taas, lapad, marga at iba pa)
  • padding: 8px; - Magiging maganda ang bloke na elemento
  • background-color: #dddddd; - Magdagdag ng asul na kulay ng background sa bawat elemento

Pag-iisip:Kung gusto ng buong lapad na kulay ng background, magdagdag ng background-color sa <ul> sa halip na sa bawat <a> elemento:

样例

ul {
  background-color: #dddddd;
}

Try It Yourself

Halimbawa ng horizontal na navigation bar

Buhatin ang pangunahing pagsasagot sa horizontal na navigation bar na may malamig na kulay ng background, at magbabago ang kulay ng background ng link kapag inililipat ang mouse sa ibabaw nito:

样例

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;
}

Try It Yourself

活动/当前导航链接

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

样例

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

Try It Yourself

右对齐链接

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

样例

<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a class="active" href="#about">关于</a></li>
</ul>

Try It Yourself

边框分隔栏

将 border-right 属性添加到 <li>，以创建链接分隔符：

样例

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

Try It Yourself

固定导航栏

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

固定在顶部

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

Try It Yourself

固定在底部

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

Try It Yourself

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

灰色水平导航栏

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

样例

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

Try It Yourself

粘性导航栏

为 <ul> 添加 position: sticky;，以创建粘性导航栏。

粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

样例

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Try It Yourself

Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example above). You must also specify top,right,bottom or left At least one, to make the sticky positioning work.

More Examples

Responsive Top Navigation Bar
How to Create a Responsive Top Navigation Using CSS Media Queries.
Responsive Side Navigation Bar
How to Create a Responsive Side Navigation Using CSS Media Queries.
Dropdown Navigation Bar
How to Add Dropdown Menus in the Navigation Bar.