<b>kostenlose REGISTRIERUNG</b>

GFX-Sector - HTML, CSS


 
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Dropdown-Menü mit Hover Effekt und Bildern » Hallo Gast [Anmelden|kostenlos Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen

HTML, CSS

Einfache Scriptsprachen und deren Layout mit HTML und CSS
Seiten (2): [1] 2 nächste » Neues Thema erstellen Antwort erstellen

Dropdown-Menü mit Hover Effekt und Bildern

     Deutsche Version  English version
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Spacer
Dropdown-Menü mit Hover Effekt und Bildern

Dropdown-Menü mit Hover Effekt und Bildern

      

Hallo Leute,

ich möchte für meine Webseite ein Dropdown-Menü einbauen, welches allerding nicht aus Buchstaben sondern aus Bildern bestehen, die verlinkt sind. Ein Beispiel seht ihr auf http://www.gronkh.de .

Da ich mich zwar mit Wordpress auskenne aber nur den HTML-Teil kenne, würde ich mich freuen, wenn ihr mir helfen würdet smile .

Achja, meine Webseite ist: www.gaccom.de</a>


Mit freundlichen Grüßen,

Stefan Kallay
www.gaccom.de
Dropdown-Menü mit Hover Effekt und Bildern 24.01.2015 23:43 JanusR ist offline Beiträge von JanusR suchen

misha misha ist männlich
riverside blues


Avatar von misha

Dabei seit: 21.07.2012
Beiträge: 2.633
Classing-Rank: Solid Moderate

Guthaben: 168.780 Sector Coins
Aktienbestand: 0 Stück


Bereiche: GFX-Sector
Frage stellen

Spacer
      

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
<link rel="alternate" type="application/rss+xml" title="GACC &raquo; Feed" href="http://www.gaccom.de/feed/" />
<link rel="alternate" type="application/rss+xml" title="GACC &raquo; Kommentar-Feed" href="http://www.gaccom.de/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="GACC &raquo; Startseite Kommentar-Feed" href="http://www.gaccom.de/home-2/feed/" />
<link rel='stylesheet' id='img-lightbox-css-css'  href='http://www.gaccom.de/wp-content/plugins/wp-product-review/css/lightbox.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='flexslider-css'  href='http://www.gaccom.de/wp-content/plugins/cherry-plugin/lib/js/FlexSlider/flexslider.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='owl-carousel-css'  href='http://www.gaccom.de/wp-content/plugins/cherry-plugin/lib/js/owl-carousel/owl.carousel.css?ver=1.24' type='text/css' media='all' />
<link rel='stylesheet' id='owl-theme-css'  href='http://www.gaccom.de/wp-content/p..." href="http://www.gaccom.de/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.gaccom.de/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.1" />
<link rel='shortlink' href='http://wp.me/P4apJ1-1V0' />
<link rel='stylesheet' id='cwp-pac-frontpage-stylesheet-css'  href='http://www.gaccom.de/wp-content/plugins/wp-product-review/css/frontpage.css?ver=4.1' type='text/css' media='all' />
<link rel='stylesheet' id='cwp-pac-widget-stylesheet-css'  href='http://www.gaccom.de/wp-content/plugins/wp-product-review/css/cwppos-widget.css?ver=4.1' type='text/css' media='all' />
<link rel='stylesheet' id='jqueryui-css'  href='http://www.gaccom.de/wp-content/plugins/wp-product-review/css/jquery-ui.css?ver=4.1' type='text/css' media='all' />
<link rel='stylesheet' id='cwp-pac-fontawesome-stylesheet-css'  href='http://www.gaccom.de/wp-content/plugins/wp-product-review/css/font-awesome.min.css?ver=4.1' type='text/css' media='all' />


code:
1:
2:
3:
4:
5:
6:
7:
8:
<link rel='stylesheet' id='paged-post-style-css'  href='http://www.gaccom.de/wp-content/plugins/paged-post-slider/paged-post.css?ver=4.1' type='text/css' media='all' />
<link rel='stylesheet' id='wp-pagenavi-css'  href='http://www.gaccom.de/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='stylesheet' id='theme52169-css'  href='http://www.gaccom.de/wp-content/themes/theme52169/main-style.css' type='text/css' media='all' />
<link rel='stylesheet' id='magnific-popup-css'  href='http://www.gaccom.de/wp-content/themes/CherryFramework/css/magnific-popup.css?ver=0.9.3' type='text/css' media='all' />
<link rel='stylesheet' id='genericons-css'  href='http://www.gaccom.de/wp-content/plugins/jetpack/_inc/genericons/genericons/genericons.css?ver=3.1' type='text/css' media='all' />
<link rel='stylesheet' id='mpce-theme-css'  href='http://www.gaccom.de/wp-content/plugins/motopress-content-editor/includes/css/theme.css?ver=1.5.8' type='text/css' media='all' />
<link rel='stylesheet' id='mpce-bootstrap-grid-css'  href='http://www.gaccom.de/wp-content/plugins/motopress-content-editor/bootstrap/bootstrap-grid.min.css?ver=1.5.8' type='text/css' media='all' />
<link rel='stylesheet' id='jetpack_css-css'  href='http://www.gaccom.de/wp-content/plugins/jetpack/css/jetpack.css?ver=3.3' type='text/css' media='all' />


usw

ist das normal bei Wordpress? wtf

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 00:08 misha ist offline Beiträge von misha suchen Skype Screennamen von misha: Misha

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Themenstarter Thema begonnen von JanusR
Spacer
      

Ich denke mal schon^^... Was ist das überhaupt? CSS? Kenne mich da null aus...

Muss aber richtig sein weil z.B. Giga,GameOne,Gronkh/PlayMassive alle Wordpress benutzen smile .

Hast Du da was, was mir hilft?

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von JanusR: 25.01.2015 00:40.

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 00:38 JanusR ist offline Beiträge von JanusR suchen

flipper flipper ist männlich
Abwedler


Avatar von flipper

Dabei seit: 22.11.2008
Beiträge: 171

Guthaben: 485 Sector Coins
Aktienbestand: 0 Stück

Programm: MS-DOS

Spacer
      

Ja das ist normal für Wordpress und Wordpress ist das meistbenutzte CMS atm.
Ich fürchte das wird recht schwer, ohne sich da mit der Materie auszukennen.
Prinzipiell musst du wenigstens CSS können, aber wenn du willst, dass es auch im Internet Explorer läuft, sollte es in Javascript bzw jQuery geschrieben sein, da viele neue CSS Attribute und Selectoren, die man für sowas brauchen kann, nicht unterstütz werden, auch nicht in älteren Browser-Versionen generell.


Realisier das ganze erstmal in HTML und CSS - Du baust dir dein Gerüst und blendest dann mit dem Hover-Statement per z.B display:block den Teil ein, der gezeigt werden soll. Das kann in dem Fall alles sein, es ist also egal ob das eine Liste oder ein Div ist, Hauptsache die Strukur aussendrum stimmt.

Wenn es nicht in absolut allen Browsern laufen soll, kannst du im Prinzip dein Gerüst nach diesem Tutorial erstellen und anpassen:
http://designyourweb.info/so-gehts-ein-s...u-erstellen/346
(Habe es nicht komplett durchgelesen, aber der Code sieht okay aus)
Statt der li Elementen in der geschachtelten <ul> kannst du dann einfach deinen Content da reinpacken.

Das ganze allerdings bei Wordpress dynamisch einzubinden, sodass es automatisch deinen Content an die richtige Stelle läd dürfte nicht ganz so einfach werden. Da müsste ich jetzt genau wissen was du machen willst.

Falls dir das alles ein bisschen zu viel Arbeit ist, dann gibt es jede Menge Wordpress Plugins zu kaufen (so 5-10 Dollar teuer, also praktisch nix), die genau das machen, was du willst.
Habe mit den Sachen von Envato relativ gute Erfahrungen gemacht, aber die sind natürlich nie zu 100% genau auf deinen speziellen Wunsch abgestimmt. Kannst ja mal hier durchschauen was es so gibt: http://codecanyon.net/search?utf8=%E2%9C..._min=&platform=

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 01:49 flipper ist offline Beiträge von flipper suchen

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Themenstarter Thema begonnen von JanusR
Spacer
      

Die Plugins bringen nichts... Habe schon alle infrage kommenden Personen drt angefragt, alle sagen "No, this is not possible with this plugin..." unglücklich ...

CSS kenne ich mich leider null aus, wie gesagt... Ich möchte, wie gesagt das EXAKT bzw. wenigstens annähernd wie Playmassive.de haben. Natürlich andere Bilder xD...

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 11:10 JanusR ist offline Beiträge von JanusR suchen

Thanatos Thanatos ist männlich
Designartist


Avatar von Thanatos

Dabei seit: 02.05.2010
Beiträge: 1.261

Guthaben: 1.030 Sector Coins
Aktienbestand: 0 Stück

Wohnort: Berlin
Programm: Photoshop, Wordpress, Joomla

Spacer
      

Deine Seite ist zusätzlich responsive im Gegensatz zu Gronkhs Seite was das ganze nochmal erschwert. (Aufm Handy willste ja nicht 10 Bilder untereinander als Menü haben)

Plugins gibt es sicher dafür (bin mir sicher auf Gronkhs seite wird auch ein Plugin verwendet):

http://lmgtfy.com/?q=wordpress+menu+with+images+plugin

Ansonsten hard coden. Gib den li's deines Menüs Hintergrundbilder per css

#menu-item-7835 {background: url(meinbild.jpg) no-repeat;}



Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von Thanatos: 25.01.2015 11:49.

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 11:47 Thanatos ist offline Beiträge von Thanatos suchen

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Themenstarter Thema begonnen von JanusR
Spacer
      

Mobil, habe ich ein anderes "Theme" durch ein Plugin smile . Da muss man sich keine Sorgen drüber machen smile .

Ja, Gronkh benutzt auch ein Plugin, nur habe ich nicht rausgefunden welches...

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 12:22 JanusR ist offline Beiträge von JanusR suchen

flipper flipper ist männlich
Abwedler


Avatar von flipper

Dabei seit: 22.11.2008
Beiträge: 171

Guthaben: 485 Sector Coins
Aktienbestand: 0 Stück

Programm: MS-DOS

Spacer
      

Zitat:
Original von JanusR
Mobil, habe ich ein anderes "Theme" durch ein Plugin smile . Da muss man sich keine Sorgen drüber machen smile .

Ja, Gronkh benutzt auch ein Plugin, nur habe ich nicht rausgefunden welches...

Wie gesagt es führt kein anderer weg dran vorbei. Du kaufst es oder du machst es selber - das ist so komplex da wird dir hier niemand mal auf die schnelle ein paar Code-Schnipsel geben können und alles läuft. Das Tutorial was ich vorher geschickt habe geht in die Richtung - aber wie gesagt da musst du halt trotzdem CSS lernen (woran du eh als Webseitenbetreiber nicht vorbeikommst).

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 12:44 flipper ist offline Beiträge von flipper suchen

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Themenstarter Thema begonnen von JanusR
Spacer
      

Wieso soll ich als Webseitenbetreiber CSS können? Wie gesagt, die Plugin sind nicht dafür gemacht. Und mir fehlt das Verständniss uns die Zeit und Willen das zu lernen...

Habe nun ein Plugin gefinden, nur ist das Problem, das in das Theme einzubinden unglücklich ...

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 12:49 JanusR ist offline Beiträge von JanusR suchen

flipper flipper ist männlich
Abwedler


Avatar von flipper

Dabei seit: 22.11.2008
Beiträge: 171

Guthaben: 485 Sector Coins
Aktienbestand: 0 Stück

Programm: MS-DOS

Spacer
      

Zitat:
Original von JanusR
Wieso soll ich als Webseitenbetreiber CSS können?

Genau für solche Situationen. Wenn du das Hobbymäßig macht führt gar kein Weg dran vorbei - ausser die Webseite soll für immer so bleiben, wie sie gerade ist. Selbst wenn du nur ein Theme anpassen willst, brauchst du da Grundkentnisse. Wenn es natürlich beruflich ist, kannst du das auch eine Agentur machen lassen - in dem Fall musst du aber ordentlich dafür blechen. CSS ist wirklich nicht sonderlich schwer und lässt sich auch sehr schnell lernen

Wo hast du das Plugin her? Wenn es ein gekauftes ist, sollte eigentlich eine Doku dabei sein, wie du es installieren und anpassen kannst. Wenn du das Plugin gerade verlinkst, kannst ich selber mal reinschauen.

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 12:56 flipper ist offline Beiträge von flipper suchen

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Themenstarter Thema begonnen von JanusR
Spacer
      

Habe dieses genommen smile ...

https://wordpress.org/plugins/menu-image/

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 13:37 JanusR ist offline Beiträge von JanusR suchen

flipper flipper ist männlich
Abwedler


Avatar von flipper

Dabei seit: 22.11.2008
Beiträge: 171

Guthaben: 485 Sector Coins
Aktienbestand: 0 Stück

Programm: MS-DOS

Spacer
      

Zitat:
Original von JanusR
Habe dieses genommen smile ...

https://wordpress.org/plugins/menu-image/

Bin mir nicht sicher ob das wirklich das ist, was du möchtest.
Damit kannst du lediglich Bilder vor den Text in der Nav hauen und es ist troztdem noch eine Liste.

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 14:11 flipper ist offline Beiträge von flipper suchen

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Themenstarter Thema begonnen von JanusR
Spacer
      

Hmm schien mir aber möglich zu sein, daraus Sub-Menüs zu machen. Nur eben ist noch das Problem, das ich das über den Header möchte...

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 14:36 JanusR ist offline Beiträge von JanusR suchen

Thanatos Thanatos ist männlich
Designartist


Avatar von Thanatos

Dabei seit: 02.05.2010
Beiträge: 1.261

Guthaben: 1.030 Sector Coins
Aktienbestand: 0 Stück

Wohnort: Berlin
Programm: Photoshop, Wordpress, Joomla

Spacer
      

Du kannst den Text aus den links entfernen mit text-indent: -9999px; so würde man dann nur die Bilder sehen. Aber auch hierfür sind CSS Kentnisse erforderlich. Btw. beim genaueren Blick glaube ich nicht dass Gronkhs menü mit einem extra plugin gemacht wurde. Zumindest keins das offiziell zu haben ist.

Um die Position deiner Navigation zu ändern musst du die Templatestruktur verändern...frag doch denjenigen der dir die Seite erstellt hat. Ansonsten kann ich dir ein Angebot machen und die Arbeit für dich übernehmen.



Dieser Beitrag wurde 3 mal editiert, zum letzten Mal von Thanatos: 25.01.2015 15:14.

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 15:07 Thanatos ist offline Beiträge von Thanatos suchen

JanusR
Filtertester


JanusR hat kein Avatar

Dabei seit: 09.04.2010
Beiträge: 9

Guthaben: 130 Sector Coins
Aktienbestand: 0 Stück


Themenstarter Thema begonnen von JanusR
Spacer
      

Was würdest denn verlangen? Die wo die "Seite" erstellt haben verlangen 49$ was für meine Verhältnisse definitiv zu teuer ist...

Dropdown-Menü mit Hover Effekt und Bildern 25.01.2015 15:29 JanusR ist offline Beiträge von JanusR suchen
 
Spacer
   
GFX-Sector
unregistriert


 hat kein Avatar


Spacer

Hat dir das Thema gefallen?


Wenn dir das Thema Dropdown-Menü mit Hover Effekt und Bildern im Bereich HTML, CSS gefallen hat, würden wir uns sehr freuen, wenn Du Dich bei uns kostenlos registrieren oder anmelden würdest!

  • √ kostenlose Mitgliedschaft
  • √ Zugriff auf über 800 kostenlose Photoshop Tutorials
  • √ Zugriff auf über 100 GB Photoshop-Ressourcen (Brushes, Render, PSDs, ...)
  • √ große und aktive Battle-Section
  • √ konstruktives Feedback zu GFX-Werken
  • √ einzigartiges Design
  • √ eines der größten Grafikplattformen in Deutschland
  • √ uneingeschränkte Nutzung des Forums
  • √ werbefreies Forum nach Registrierung

Jetzt kostenlos registrieren und alle Vorteile als registriertes Mitglied genießen!

Neuer Beitrag 25.01.2015 20:34  
Seiten (2): [1] 2 nächste » Baumstruktur | Brettstruktur
Neues Thema erstellen Antwort erstellen
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Dropdown-Menü mit Hover Effekt und Bildern

Thematisch passende Themen zu Dropdown-Menü mit Hover Effekt und Bildern
Thread
Was macht ihr mit euren Homepage Designs (Forum: Archiv)
Ankündigung: SotW Regeln und Informationen (Forum: SOTW-Ankündigungen)
2 Wallpaper und 5 Sigs (Forum: Signaturen/Avatare)
Brushen und Blenden??? (Forum: Fragen & Probleme)
Hallöchen Alle miteinander! :) (Forum: Vorstellungen)