bob777
Goto Top

Dock Icons . auf Web Basis ?

Moin

Der Effekt wie man über die Dock Icons Leiste mit der Maus drüber wandert ist echt schick.. kann man das in eine Webseite einbinden ... a b c d ........ und so weiter.. dass das auch wenig Ressourcen frisst und schnell funktioniert ?

images

Content-ID: 667018

Url: https://administrator.de/contentid/667018

Ausgedruckt am: 21.11.2024 um 19:11 Uhr

BirdyB
BirdyB 23.05.2021 um 23:01:43 Uhr
Goto Top
Moin,
wie wäre es mit CSS und hover:
https://www.w3schools.com/cssref/sel_hover.asp

VG
bob777
bob777 23.05.2021 aktualisiert um 23:51:01 Uhr
Goto Top
Hm.. sehe es noch nicht.. vll. das https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more ...

und wird es gehen dass wenn man a b c d .. in reihe hat aber über a drüber geht mit der Maus .. a verwindet und ein Wort erscheint .mit dem Effekt etwas grösser zu werden
EvilMoe
EvilMoe 24.05.2021 um 01:14:28 Uhr
Goto Top
Abend

Klar geht das. Wie der Kollege oben schon sagte, kannst du das mit CSS/Hover erledigen. Eventuell benötigst du auch JavaScript.
BirdyB
BirdyB 24.05.2021 um 08:52:25 Uhr
Goto Top
Du kannst doch auch das Icon per CSS vergrößern. Das geht genauso.
Einzige Knobelaufgabe bleibt die teilweise Vergrößerung der nebenliegenden Icons. Da müsste man ggf. mit etwas JS nachhelfen…
bob777
bob777 24.05.2021 aktualisiert um 10:54:53 Uhr
Goto Top
Und das kann auch anklickbar sein als Link.. ? Die Links sollten wie bei Flarum in etwa aufpoppen (start a disscusion) die Seite nicht neu geladen werden.. .. ich versuche zu verstehen was ich dafür brauchen werde.. machen ist noch ne andere nummer

Über Prozentangaben kann man wohl Links und Rechts die grösse vergeben von dem wo die Maus drüber wandert.. .. aber darf keine Ressourcen.. fressen ..
BirdyB
BirdyB 24.05.2021 um 11:54:16 Uhr
Goto Top
Zitat von @bob777:

Und das kann auch anklickbar sein als Link.. ?
Natürlich… Warum auch nicht? Alles auf einer Seite ist anklickbar und kann eine Aktion auslösen.
Die Links sollten wie bei Flarum in etwa aufpoppen (start a disscusion) die Seite nicht neu geladen werden.. .. ich versuche zu verstehen was ich dafür brauchen werde.. machen ist noch ne andere nummer
Es muss auch nicht immer die ganze Seite neu geladen werden… AJAX und jQuery sind deine passenden Suchbegriffe…
Über Prozentangaben kann man wohl Links und Rechts die grösse vergeben von dem wo die Maus drüber wandert.. .. aber darf keine Ressourcen.. fressen ..
Was meinst du mit „Ressourcen fressen“?
Serverseitig? Oder auf dem Client?
Die meisten Seiten, die du täglich betrachtest, werden deutlich mehr Dinge tun als das Bisschen, was du gerade vor hast…
148121
148121 24.05.2021 aktualisiert um 13:47:37 Uhr
Goto Top
Ist auch ohne irgendwelche schweren Javascript Libraries schnell gebacken face-wink.
https://jsfiddle.net/wrbhLctj/
Geht natürlich auch von unten nach oben resized mit etwas CSS abgewandelt
https://jsfiddle.net/t4n7u6a0/

Animationen habe ich wegen deiner Ausführung "Ressourcen sparend" mal weggelassen, den Spaß an der eigenen Entwicklung will ich dir nicht auch noch nehmen :-P.

Gruß w.
bob777
bob777 24.05.2021 aktualisiert um 13:55:18 Uhr
Goto Top
Erlaube mir das etwas schwerer zumachen .. Ja das kommt in die Richtung aber da fehlt einiges dass es das ist.

Es muss eine Leiste sein .. viel kleiner so 5-10px dick (habe es versucht da einzutragen frisst er nicht weil die Icons bestimmt grösser sind .. ..
Muss aber einfacher sein und nur alle 10 der selben icons ein neues ... dann wieder die selben 10.. .. wir brauchen max nur 3 icons .. in der leiste .. an sich kann es auch i l | sein die die leiste ausmachen .. jeder aber diese Zeichen/icons soll bei längerem drüberfahren zum link werden den man anklicken kann.. Ressourcen fressend.. weil es bis 1000 gehen soll ..

wenn das passt dann kann man damit arbeiten und vll. taugt es für mehr
148121
148121 24.05.2021 aktualisiert um 14:33:45 Uhr
Goto Top
Zitat von @bob777:
Es muss eine Leiste sein .. viel kleiner so 5-10px dick
Na dafür kannst du ja die Werte im CSS ganz einfach anpassen, wofür ist das denn sonst da face-smile?!
(habe es versucht da einzutragen frisst er nicht weil die Icons bestimmt grösser sind .. ..
Dann hast du es falsch gemacht, die Icon-Größe passt sich automatisch an die des umgebenden DIVs an (inherit).
Guckst du die zweite Variante von oben in "kleiner"
https://jsfiddle.net/fw37ke2c/
Wenn du jetzt vergleichst kannst du es auch selbst anpassen.

Muss aber einfacher sein und nur alle 10 der selben icons ein neues ... dann wieder die selben 10.. .. wir brauchen max nur 3 icons .. in der leiste .. an sich kann es auch i l | sein die die leiste ausmachen .. jeder aber diese Zeichen/icons soll bei längerem drüberfahren zum link werden den man anklicken kann.. Ressourcen fressend.. weil es bis 1000 gehen soll ..
Links sind schon drin, brauchst du nur die Raute durch deine Links austauschen. Mit nem Mac-Dock hat die Beschreibung ehrlich gesagt fast gar nichts zu tun ...

wenn das passt dann kann man damit arbeiten und vll. taugt es für mehr
Was für was taugt ist immer den Anforderungen geschuldet, und das war ja nur als Beispiel gedacht, wir kannten deine Anforderungen ja nicht, bisl CSS lernen wäre vielleicht mal angebracht ... selbst ist der Mann.

p.s. zumindest mal ein "Danke" hätte nicht weh getan face-confused!

Viel Spaß noch
Tschö mit ö.
bob777
bob777 24.05.2021 aktualisiert um 15:37:16 Uhr
Goto Top
Mein Dank und Bewunderung ist Respekt an dich! und was ihr so macht ...

Mein html und php ist so mies dassich nie das ende der Geschichte erreichen kann.. ohne fremde Hilfe .. an sich wollte ich nur rausfinden ob das machbar ist .. weil in jeden Link viel Info kommen soll. an sich ist das hier das Skelet ... auf dem muss noch der ganze Körper ...