Jest to druga część artykułu o ciekawych menu w css. To rozwiązanie jest kontynuacją przykładu drugiego z pierwszej części artykułu. Tym razem stworzymy menu ze stanem current, jak i hover. Ponadto wielkość zakładek zależeć będzie od wielkości tekstu (z drobnym warunkiem, że nie może być dłuższy niż 200px). Najpierw należy pobrać dwa pliki cale0.png i cale.png. Obydwa pliki mają 200px szerokości więc tekst odnośników nie może być dłuższy niż właśnie 200px. Jeśli przewidujemy dłuższy tekst musimy po prostu stworzyć szersze obrazki. Końcowy efekt przedstawia przykład.
Css
Kombinowałam sobie ostatnio trochę z różnymi menu w css. Myślę, że ten artykuł doczeka się kontynuacji. Przedstawię w nim 2 rodzaje menu (lecz zrobione trochę odmienną techniką). Będą to menu zakładkowe. Na początek wykonamy przykład pierwszy.
Pokażę jak stworzyć naprawdę proste menu przy użyciu css. Tak będzie wyglądał efekt końcowy. Zacznijmy od przygotowanie kodu xhtml, który będzie pozbawiony formatowania.
Czy tworzyć pliki css małe (5kb) czy duże (25kb) ? Odpowiedź jest prosta – mniejsze. Bo strona będzie się szybciej ładować i sam plik będzie czytelniejszy. Tym samym jego modyfikacja w przyszłości będzie wygodniejsza. Oczywiście wielkość pliku css zależy też od typu strony tzn. czy robimy spory serwis czy małą stronę informacyjną z kilkoma podstronami. Nie należy też przesadzać i starać się na siłę zoptymalizować kod np. usuwając komentarze. Komentarze pozwolą później łatwiej dotrzeć do właściwej części kodu gdy będziemy chcieli go zmodyfikować. Poniżej przedstawię kilka dróg, dzięki którym możemy uzyskać mniejsze pliki css.