Kiedy zasiadasz przy świątecznym stole robisz to jak zręczny akrobata. Gorzej jest kiedy chcesz się z niego wydostać po skromnych dwunastu posiłkach. Wszyscy obok zaczynają się krzywić, bo muszą się przesuwać na boki wraz z krzesłami. Efekt ten można zaobserwować również na co dzień, kiedy na swojej stronie testujesz menu nawigacyjne z piękną czcionką. I wszystko jest dobrze, dopóki mysz nie będzie najeżdżać na wybrane opcje, które pogrubiają się. Wszystkie opcje na prawo od wybranej przesuwają się w prawo jak niezadowoleni członkowie Twojej rodziny.
Odpychające ciocie.
Zacznijmy od kodu. Stworzymy proste menu nawigacyjne oparte na liście nienumerowanej. Wewnątrz elementów listy będą podlinkowane pozycje i to je będziemy stylowować po najechaniu.
<nav>
<ul>
<li><a href="#">Główna</a></li>
<li><a href="#">Środkowa</a></li>
<li><a href="#">Poboczna</a></li>
</ul>
</nav>
+
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
padding: 0 5px;
}
li a:hover {
font-weight: bold;
}
I nieprzyjemny efekt, który pewnie znasz:
Co można zakombinować, aby działało to lepiej? Można nie boldować...bez sensu. Można ustalić stałą szerokość pozycji menu... nie przesadzajmy! Może pozycjonować absolutnie linki? Nieee... wtedy LI nic nie rozepchnie i będą mieć zerową szerokość.
Groch z kapustą.
Trzeba zamieszać tak, aby pozycja menu miała taką szerokość jakby tam już był użyty font w bold. Oczywiście nie będzie nadawać tego stylu przed najechaniem myszy, bo nie o to chodzi. Nie możemy też wstawić tam dodatkowego elementu z tym samym tekstem, bo pozycja będzie wyglądać jak zduplikowana. Hmm... a jakby go jednak wstawić, ale tak aby nie było go widać? Nie możemy ustawić display:none, bo nie uzyskamy tego czego chcemy. Nie uzyskamy też nadając opacity:0, visibility:hidden, font-size:0, width:0. Ale, ale, co prawda nie width, ale height ustawimy na 0 i tym sprytnym ruchem unieruchomimy sąsiadów pozycji.
Przebudujmy więc nasz HTML:
<nav>
<ul>
<li><a href="#" data-text="Główna">Główna</a></li>
<li><a href="#" data-text="Środkowa">Środkowa</a></li>
<li><a href="#" data-text="Poboczna">Poboczna</a></li>
</ul>
</nav>
+
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
padding: 0 5px;
position: relative;
}
li a:before {
content: attr(data-text);
display: block;
height: 0;
overflow: hidden;
}
li a:hover,
li a:before {
font-weight: bold;
}
Atrybut data-text będzie potrzebny, aby dla pseudoelementu ustawić zawartość tekstową identyczną z pozycją. Oprócz wysokości, nadaliśmy style overflow:hidden, bo inaczej tekst wystawałby poza element i mielibyśmy jednak zduplikowany tekst w pozycjach. Pseudolement ma nadany bold dla fontu, aby już na wstępie rozepchnąć każdą pozycję do takiej szerokości, jaką będzie mieć po najechaniu.
Do przeczytania niebawem. Bez nadęcia!