Jak utworzyć menu, które wygląda tak ...
Nie chcę używać obrazów PSD. Wolałbym używać ikon z niektórych pakietów, takich jak FontAwesome, i generować tła / css w CSS.
Wersję menu używającą PSD do generowania obrazów podpowiedzi, a następnie używającą go można znaleźć tutaj .
css
tooltip
css-shapes
ssb
źródło
źródło
Odpowiedzi:
Prawie 3 lata później w końcu znalazłem czas, aby ponownie to sprawdzić i opublikować ulepszoną wersję. Nadal możesz zobaczyć oryginalną odpowiedź na końcu w celach informacyjnych.
Chociaż SVG może być lepszym wyborem, szczególnie dzisiaj, moim celem było utrzymanie go tylko w HTML i CSS, bez JS, bez SVG, bez obrazów (innych niż tło w elemencie głównym).
Demo 2015
Zrzuty ekranu
Chrome 43:
Firefox 38:
IE 11:
Kod
HTML jest dość prosty. Używam hacka do zaznaczania / ukrywania menu.
Używam Sassa, aby zachować logikę i ułatwić zmianę rzeczy w razie potrzeby. Mocno skomentował.
Pokaż fragment kodu
Oryginalna odpowiedź
Moja próba zrobienia czegoś takiego z czystym CSS:
próbny
(kliknij gwiazdkę)
Działa w Chrome, Firefox (nieco dziwny efekt rozmycia po najechaniu kursorem), Opera (końce wyglądają na mniejsze) i Safari (końce wyglądają na mniejsze).
źródło
:focus
drogi” . W rzeczywistości jest to dość stara metoda, po raz pierwszy zobaczyłem ją, którą zastosował Stu Nicholls w swoich eksperymentach na cssplay.co.uk kilka lat temu. W powyższym CSS załatwia sprawę.button:focus + .tip
.Odpowiedź Anny to kopnięcie w dupę! To poważny CSS-fu.
Moje rozwiązanie może nie być tym, czego oczekujesz, ale jest to inne możliwe rozwiązanie. Pracuję teraz nad interfejsem kompasu, który ma podobny styl przycisków w kształcie łuku. Postanowiłem go rozwinąć za pomocą Raphaela i SVG.
Utworzyłem kształt łuku w programie Illustrator, wyeksportowałem dla niego SVG, wziąłem definicję ścieżki łuku z wyeksportowanego pliku SVG i użyłem Raphaela do zbudowania z nim interfejsu.
Oto JSFiddle tego .
Oto JavaScript:
Oto powiązany CSS:
źródło
Innym bardzo dobrym sposobem byłoby użycie JavaScript do pozycjonowania.
DEMO + TUTORIAL na temat tworzenia animowanego menu radialnego
Zaletą tej metody jest to, że możesz użyć dowolnej liczby elementów i będzie ona ustawiać je promieniowo, bez konieczności zmiany jakiegokolwiek CSS.
JavaScript, o którym mowa, to:
źródło