Skocz do zawartości
ZuKoR

[CSS3] Animowane menu bez użycia JS!

Polecane posty

ZuKoR

Witam, jest to mój pierwszy poradnik a zaledwie 4 post na forum.
Pokażę wam jak zrobić animowane i ładnie wyglądające menu z użyciem CSS3.
 

Artykuł przeznaczony dla osób znających podstawy HTML i CSS.


Najpierw zajmijmy się kodem HTML, menu jest w formie listy, dzięki temu jest przejrzyste.

     <ul id="menu">
      <a href="index.html"><li>Strona główna</li></a>
      <a href="#"><li>Odnośnik II</li></a>
      <a href="#"><li>Odnośnik III</li></a>
      <a href="#"><li>Odnośnik IV</li></a>
      <a href="#"><li>Odniśnik V</li></a>
     </ul>

Teraz czas na kod CSS:

#menu {
    list-style-type: none;
    height: 50px; float: right;
    margin-top: 15px; } #menu li {
    height: 50px;
    background: url(menu.png);
    min-width: 120px; float: left;
    text-align: center; -webkit-transition: height 1s ease-in-out; -moz-transition: height 1s ease-in-out; -o-transition: height 1s ease-in-out; -ms-transition: height 1s ease-in-out;    
    transition: height 1s ease-in-out; // Te 5 linijek tekstu odpowiada za animację. } #menu li:hover {
    height: 55px; } #menu a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    margin-top: 20;
    font-family: Verdana;
    line-height: 45px; }

Potrzebny jest tylko jeden obrazek. [Załącznik]

*Aby zmienić prędkość animacji (Szybsza animacja mnie przycina) wystarczy edytować jednostki:

 -webkit-transition: height 1s ease-in-out; -moz-transition: height 1s ease-in-out; -o-transition: height 1s ease-in-out; -ms-transition: height 1s ease-in-out;    
    transition: height 1s ease-in-out;

Na przykładowo:

 -webkit-transition: height 0.5s ease-in-out; -moz-transition: height 0.5s ease-in-out; -o-transition: height 0.5s ease-in-out; -ms-transition: height 0.5s ease-in-out;    
    transition: height 0.5s ease-in-out;

Demo: [link]


Pozdrawiam, ZuKoR. 

Edytowano przez Michael

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Ultra

W dobie JavaScript i JQuery, nie widzę sensu robienia w CSS animacji - no ale ok, całkiem fajnie to wygląda, ale moim zdaniem w JQ było by to szybsze i wygodniejsze. 3maj browara.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość
Temat jest zablokowany i nie można w nim pisać.
  • Podobna zawartość

    • Gość
      Przez Gość
      Witam. Postanowiłem uczyć się PHP itd., a najlepiej wg mnie uczyć się w praktyce, więc zacząłem pisać sobie stronę. Część HTML i CSS skończyłem, więc teraz zaczynają się niewiadome i czarna magia. 
      Zawsze mnie zastanawiało jak wygląda struktura strony gdzie są skrypty PHP wczytywane z bazy danych i zewnętrznych plików (newsy, komentarze itd.). Więc, nie wiedząc kompletnie nic, przerobiłem index.php na stronę gdzie wszystko jest includowane z zewnętrznych plików (header.php, navigation.php, news.php [co obecnie robi za treść strony głównej] i footer.php). I w zasadzie nie wiem jak to poprawnie rozwiązać. Myślałem, by może czymś co znam pod nazwą $_GET przeładowywać treści index.php, że np. kliknięcie w link "Regulaminy" zamieni include news.php w include regulamin.php czy coś, ale tak jak mówię, niewiele się na tym znam. 
    • pBartnik
      Przez pBartnik
      Witajcie! Z tej strony ResidenT [ResidenT.xaa.pl].
      Wykonam Dla Ciebie:
      - Instalacja silników takich jak: phpBB by Przemo, MyBB. - Kodowanie przy użyciu HTML, CSS. - Instalacja modyfikacji pod silnik: phpBB by Przemo. Loga  - Tworzenie kopi zapasowych. - Przenoszenie bazy danych z hostingu na inny hosting. - Zabezpieczenie forum lub stronki. - Edycja forum lub strony (tzw. odświeżenie) pod względem wyglądu jak i kodu. Kontakt: ResidenT [ResidenT.xaa.pl]
    • Zevcore
      Przez Zevcore
      Witam, kompletnie moja przeglądarka nie reguje na RWD CSS3 media queries 
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> .slider-items { width: 1000px; height: 350px; margin: 0px auto; position: relative; overflow: hidden; } @media screen and (min-width: 400px) { .slider-items { width: 300px; height: 150px; } } Jeżeli wejdę w F12 w chrome i wybiorę jakieś urządzenie to slider całkowicie nie reaguje na media.
×
×
  • Utwórz nowe...