Wie nennt man...?

[ohnoitsroger]

Hallo, ich hab ne Frage, vielleicht kann mir ja jemand sagen nach was ich suchen muss...

Und zwar will ich bei einem Text (Kapitel I) wenn man mit der Maus darüber geht das dann eine Art drop menü aufscheint wo man dann auf verschiedene Link-Grafiken klicken kann bzw. wenns zu kompliziert wird einfach das selbe mit Text.
Natürlich sollte es auch in der Mobilen Version funktionieren...

Warum? Meine Shop Seite zeigt "TitelXXX - Teil 1" und dazu kommen circa 8 Kapitel mit den jeweiligen Händlerlinks und alles nacheinander aufzulisten würde einfach zu viel Platz brauchen...

Ich hoffe ich hab es verständlich und ausführlich erklärt was ich meine...

Liebe Grüße
ohnoitsroger

 

[LeCub]

Ich glaube, dass du ein Dropdown-Menü meinst. Siehe z.B. http://codepen.io/search/pens?q=dropdown&limit=all&type=type-pens.
Du hast aber glaube Ich das falsche Forum erwischt, eventuell wäre das Off-Topic Board passender :-)

 

[SpiceLab]

Und zwar will ich bei einem Text (Kapitel I) wenn man mit der Maus darüber geht das dann eine Art drop menü aufscheint wo man dann auf verschiedene Link-Grafiken klicken kann bzw. wenns zu kompliziert wird einfach das selbe mit Text.
Natürlich sollte es auch in der Mobilen Version funktionieren...

Warum? Meine Shop Seite zeigt "TitelXXX - Teil 1" und dazu kommen circa 8 Kapitel mit den jeweiligen Händlerlinks und alles nacheinander aufzulisten würde einfach zu viel Platz brauchen...

Das kann ein Dropdown-, aber auch ein Droplist-Menu sein :)

Hier eine kleine Auswahl an Beispielen von Responsive Menus (by Stu Nicholls):

1. Untermenüs öffnen sich beim reinen Überfahren der Menüpunkte:
   • http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-menu.html
   • http://www.cssplay.co.uk/menus/cssplay-responsive-droplist.html
   • http://www.cssplay.co.uk/menus/cssplay-responsive-droplist-touch-screen.html
2. Untermenüs öffnen sich beim Klicken der Menüpunkte (wegen mobiler Geräte zu präferieren, da diese mit :hover ihre Probleme haben):
   • http://www.cssplay.co.uk/menus/cssplay-responsive-click-tap-multi-level-menu.html
   • http://www.cssplay.co.uk/menus/cssplay-responsive-click-droplist-menu.html
   • http://www.cssplay.co.uk/menus/cssplay-responsive-click-droplist-menu-v2.html

Da es sich bei Dir um eine gewerbliche Seite handelt, müsstest Du den Copyright-Hinweisen zufolge, den Autor per Email um Erlaubnis bitten, und ihn mit einer kleine Spende unterstützen.

Moderation:: Das Thema wird von 'Sonstiges - ASP / Perl / ...' nach 'CSS' verschoben.

 

[Marv]

Hallo,

da sich deine Beschreibung nicht nach Menü anhört, ist eventuell ein Tooltip das was du suchst.
Beispiel1 - Dort auf das Bild über dem Button "Ajax" beim Abschnitt "Display Anything". Dann taucht auch eine Auflistung mit weiteren Alben auf. Ist ja quasi das was du auch suchst.
Oder Beispiel 2 .

Wenn du dir so etwas vorgestellt hast ist also auch das Stichwort "Tooltip" etwas für dich.

 

[ohnoitsroger]

Danke für die Hilfe! Also am ehesten trifft das mit Tooltip meine Vorstellung.
Hab da auch was gefunden was es perfekt treffen würde, naja fast perfekt...

http://ajaxian.com/archives/tooltipjs-creating-simple-tooltips


Kann ich dort statt dem Beschreibungstext oder auch dem kompletten Text auch nur zB.
Amazon
Thalia
Weltbild...

mit Link verwenden, bzw worauf sollte ich achten?


Liebe Grüße und nochmals Danke!

 

[Marv]

Hallo,
das Tooltip-Widget bei deinem Link scheint nicht mehr aktuell / vorhanden zu sein.

Du kannst in dem Tooltip im Prinzip alles verwenden was du möchtest.

Hier mal ein kleines Beispiel mit Links, dass du auch ohne Javascript erzeugen kannst.
Statt "Thalia" etc. könntest du dann auch ein Bild eines Buttons innerhalb des Links einfügen:


CSS:

.product-title {
  position: relative;
}

.product-title:hover .tooltip {
    display: block;
}

.tooltip {
  display: none;
  position: absolute;
  width:200px;
  background: #666;
}

.tooltip-item {
  display: block;
  height: 40px;
  background: #999;
  margin: 10px;
}

<div class="product-title">
  TitelXXX - Teil 1
  <div class="tooltip">
    <a class="tooltip-item" target="_blank" href="http://google.de">Amazon</a>
    <a class="tooltip-item" target="_blank" href="http://google.de">Thalia</a>
    <a class="tooltip-item" target="_blank" href="http://google.de">Weltbild</a>
  </div>
</div>