Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

kodix

Menu w CSS z podświetleniem liniowym podążającym za linkiem

Promowane odpowiedzi

Witam czy ktos moglby mi wytlumaczyc jak zrobic takie menu jak w zalaczniku?

Pierw moze byc wytlumaczenie a ja sprobuje

Capture.PNG

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

 Możesz to zrobić przy użyciu zwykłego CSS3 z efektem przejścia "transition" albo z dodatkowym kodem JS.

 

Przykład przy użyciu "transition"

 

Menu Hover Line Effect

 

Efekt 1 bez CSS:

#1155 - Menu with line hover effect

 

Efekt 2 bez CSS::

Menu Hover Line Effect

 

Efekt 3 z JS : 

Menu Hover Line Effect

 

  • Lubię to! 2

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


  • Podobna zawartość

    • Przez Qwizi
      Witam, zaczynam bawić się framework'iem Laravel w wersji 5.6. Stawiam wszystko na localhoscie. I mam problem ponieważ nie chce on czytać skryptów css oraz js (domyślne utworzonych przez framework).
       
      Wszystko posiadam w folderze public. Tak pobieram sciezke do stylu 
      <link href="{{ asset('css/app.css') }}" rel="stylesheet">
       
      i wywala bład 404

    • Przez STOLARZ
      W tym poradniku dowiesz się jak dodać rangi użytkowników w CSS.
       
      Przejdź do: ACP Strona główna ->  Style -> (Twój styl) -> twojaklasa.css   
       
      (polecam dodać to do css3.css lub stworzyć nową)
       
      Następnie na końcu dodaj kod css:
      .gid-x { background-color: #3366FF; color: #fff; display: inline-block; height: 15px; line-height: 15px; padding: 3px 5px; border-radius: 3px; font-size: 10px; } gdzie x to ID grupy np. 4 (domyślnie jest to grupa administratora)
      ID grupy możesz sprawdzić, np. w linku edycji grupy
       

       
      Teraz przejdź do:
      Szablony » Twój szablon » opis posta » postbit_classic lub postbit (w zależności od tego jaki masz układ posta)
       
      i zamiast 
      {$post['usertitle'] <br />  Wstaw to:
      <div class="gid-{$post['usergroup']}">{$post['usertitle']}</div> <br />  
      Zapisz efekt powinien wyglądać następująco
       

×