Jak wykonać ładne menu z ukośnymi przyciskami, skew menu

W tym poradniku pokażę jak łatwo i szybko można wykonać ciekawy efekt ukośnego menu, za pomocą funkcji pochylenia – transform: skew oraz zaokrąglenia rogów: border-radius.

Tworząc stronę internetową chcemy, by ładnie się prezentowała. Każdy szczegół jest ważny. Przedstawię jak za pomocą krótkiego kodu html i css można utworzyć ciekawie wyglądające menu. Będzie się prezentować nieco inaczej od większości menu, oryginalniej. Pamiętam jak kiedyś takie menu robiłam za pomocą obrazków, a dodanie kolejnego przycisku było kłopotliwe. Teraz css oferuje bogatą ofertę możliwości, elastyczne skalowanie i dopasowywanie się do przeróżnych urządzeń i rozdzielczości. Tworzenie elementów jako grafika na sztywno, animacje flash, to wszystko przeszło do lamusa. Teraz dodanie kolejnego odnośnika w menu zajmie tylko chwilę.

Zacznijmy od utworzenia pliku index.html. Polecam proste i wygodne edytory kodu jak: Sublime Text 3 oraz Visual Studio Code. Ułatwiają pracę poprzez podkreślanie i dopisywanie kodu. Sprawdzają też jego poprawność, pokazując gdzie i jaki wykonaliśmy błąd. Te pozornie małe programy, posiadają ogrom możliwości ułatwiających pracę z kodem.

W index.html, utworzymy podstawowy szkielet strony:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<nav class="skew-menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">O nas</a></li>
    <li><a href="#">Cennik</a></li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

</body>
</html>

W znacznikach <head> </head> umieściłam kod:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Kod ten odpowiada za dołączenie pliku ze stylami.css, czyli za wygląd menu.

W znacznikach <body> </body> wstawiłam kod do nawigacji, który składa się z klasy „skew-menu” oraz przyciski zawarte w znacznikach <ul> i <li>.

Przejdźmy do utworzenia pliku style.css, ten plik musi znajdować się w tym samym katalogu razem z plikiem index.html.

W style.css wklejamy ten kod:

body {
  font-family: Trebuchet MS, sans-serif;
  background: #FF6B01;
}
.skew-menu {
  text-align: center;
  margin-top: 100px;
}
.skew-menu ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: skew(-25deg);
}
.skew-menu ul li {
  background: #FFFFFF;
  float: left;
  border-right: 1px solid #EEEEEE;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  color: #000000;
  font-size: 17px;
  font-weight: bold;
  transition: all 0.3s linear;
}
.skew-menu ul li:first-child {
  border-radius: 7px 0 0 7px;
}
.skew-menu ul li:last-child {
  border-right: none;
  border-radius: 0 7px 7px 0;
}
.skew-menu ul li:hover {
  background: #EEEEEE;
  color: #FF6B01;
}
.skew-menu ul li a {
  display: block;
  padding: 15px 35px;
  color: inherit;
  text-decoration: none;
  transform: skew(25deg);
}

Objaśnię w skrócie które style służą do wykonania ukośnych przycisków i zaokrągleń oraz inne bardzo ważne właściwości.

body – font i kolor tła strony

.skew-menu – wycentrowanie menu i margines górny 100px

.skew-menu ul – lista menu jest z atrybutem inline-block, który pozwala na wyświetlanie menu w linii, normalnie bez ostylowania to wygląda w ten sposób:

list-style: none; – usuwa style elementu listy, czyli wypunktowanie znika.
transform: skew(-25deg); – ten kod właśnie odpowiada za pochylenie menu, można wpisać dowolną wartość, w zależności od tego jak bardzo chcemy pochylić. Zwróćcie uwagę na wartość minusową, która dotyczy również napisów, zmieńcie wartości i poeksperymentujcie, zobaczycie jak zachowuje się menu i napisy.

.skew-menu ul li – kolor tła menu, float-left jest ważny, wtedy element pływa po lewej stronie zawierającego go bloku.
transition: all 0.3s linear; – efekt płynnego przejścia, bez niego po najechaniu na przyciski tło pokazuje się i znika zbyt szybko i nie ładnie to wygląda.
Reszta to style odpowiadające za kolor obramowania, fontu.

.skew-menu ul li:first-child – tutaj zaokrągla rogi pierwszego przycisku właściwością border-radius, :first-child czyli pierwszy element.

.skew-menu ul li:last-child – tak jak wyżej, właściwość border-radius zaokrągla element, a :last-child to ostatni element w menu.

.skew-menu ul li:hover – :hover czyli efekt po najechaniu na przycisk, zmienia kolor tła oraz napisu

.skew-menu ul li a – odpowiada za element „a” w menu, czyli za link. Ustawia element blokowy – display: block; dodaje paddingi, czyli odstępy w przycisku, tak by nie było ciasno dla napisu. Kolor fonta przypisywany jest ze stylu .skew-menu ul li, dlatego użyto color: inherit; by dziedziczył ze wspomnianej klasy.
transform: skew(25deg); – wartość na plusie prostuje napisy, dając -25 lub usuwając tą linijkę kodu, napisy będą krzywe.

To tyle z objaśnień. Myślę że w prosty sposób wyjaśniłam co jest do czego.
Kombinujcie z różnymi wartościami, kolorami, rozmiarami, by uzyskać odpowiednie dla Waszej witryny menu. Powodzenia! 🙂

Subscribe
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments