Jak tworzyć: nawigacja w kształcie tabletki

Naucz się, jak używać CSS do tworzenia menu nawigacji w kształcie tabletki.

Utwórz nawigację w kształcie tabletki

Krok 1 - Dodaj HTML:

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Krok 2 - Dodaj CSS:

/* Ustaw styl linków w menu nawigacji tabletki */
.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}
/* Zmień kolor linku przy nawigacji myszy */
.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}
/* Dodaj kolor do aktywnego/obecnego linku */
.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}

Spróbuj sam

Strony związane

Lekcje:Panel nawigacyjny CSS

Lekcje:Jak stworzyć panel nawigacyjny górny