Menü aufbauen (Javascript)

Ralf-2011 · 12.07.2011, 07:27

Hallo,

hatte vor langer Zeit mal ein schickes Menü gesehen, was ich nun leider net mehr finde.

Hab mal schnell eins skiziert um zu zeigen wie es ca. aussah.

Sowas würd ich auch gern machen, meine Frage ist nun gibt es da schon was von JQuery und Co? Eine Art PlugIn?

Also ist so gedacht wenn man mit dem Cursor auf einen Menüpunkt geht, das diese auch im Streifen schräg nach oben unterlegt wird (natürlich mit fertigen Grafiken)

Äh ja hoffe ihr könnt euch das vorstellen...so früh am Morgen

ChrisB · 12.07.2011, 09:33

Zitat:

Zitat von Ralf-2011

Sowas würd ich auch gern machen, meine Frage ist nun gibt es da schon was von JQuery und Co? Eine Art PlugIn?

Um ein Hintergrundbild auszuwechseln bzw. einzublenden ...?

Ralf-2011 · 12.07.2011, 09:43

Ähm ich denk schon...hab nochmal zwei Grafiken angehängt

Grafik 1: Erstaufruf
Grafik 2: Hover auf Band

Hab das grad so gemacht das ich die DIVs absolute positioniere, und dann eben mit Javascript ein- und ausblende

mquadrat · 12.07.2011, 10:09

Leg doch das Bild per z-index hinter dein Menü und beim mouseover der Menüpunkte verschiebst du das dann eben um einen passenden Offset. Dann haste gleich noch ne Animation dabei.

ChrisB · 12.07.2011, 10:18

Zitat:

Zitat von mquadrat

Leg doch das Bild per z-index hinter dein Menü

Da es nur Verzierung ist, sollte es sowieso als Hintergrundbild eingesetzt werden.

Ralf-2011 · 12.07.2011, 11:42

Naja hab das ja als background-img per css.

mermshaus · 13.07.2011, 04:42

Geht's darum, dass ein Menüeintrag auch aktiviert/ausgewählt werden können soll, wenn sein zugehöriger „schräger Streifen“ mit der Maus überfahren wird? Alles, was nicht rechteckig ist, ist immer etwas problematisch.

Ralf-2011 · 13.07.2011, 08:58

Also das mit dem dem Schrägstreifen ist mehr oder weniger nur Schönheit

das Submenü wird untendrunter gesetzt

ich dachte da gibts was von JQuery, derzeit hab ich es so. das ich ich für jeden Menüpunkt extra bei Hover eine Div mit der Grafik einblende.

Ralf-2011 · 13.07.2011, 20:52

So hab da mal bissl gebastelt. Also der Effect ist erstmal fürn Arsch

PHP-Code:

  function showandhide(myid,big)

{

    if(document.getElementById("sub_community").style.display =="none")

    {

        if(myid=="sub_community")

        {

        document.getElementById("sub_community").style.display = "block";

        document.getElementById("main_community").className= "main_menu main_active"+(big?' big_menu':'');

/* TEST        

    $j("#sub_community").hover(function(){

        $j("#hover").offset({left:50});

    }, function() {

        $j("#hover").offset({left:0});

    }); 

*/

        } 

    }

    else

    {

        if(myid!="sub_community")

        {

        document.getElementById("sub_community").style.display = "none";

        document.getElementById("main_community").className= "main_menu"+(big?' big_size':''); 

        } 

    }

}

PHP-Code:

  <div id="hover"></div> <!-- DIV mit dem Hover Bild-->

<div id="main_community" onmouseover="showandhide('sub_community',true)" onmouseout="showandhide('sub_'+menustart,true)" class="main_menu big_size main_active big_menu"><a class="main_text" href="">Community</a></div>

Leider richtet sich der offset nach dem Bildschirmrand, den so wie es jetzt im Code ist, rutscht das bild außerhelb der Webseite.

Hab so auch mal im Netz geschaut, irgendwie hat keiner sowas

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JavaScript menü erstellen	xXAutomatikkXx	JavaScript, Ajax und mehr	4	07.06.2011 14:50
[Erledigt] CSS Drop Down Menu mit Zend Framework	MLang	PHP-Fortgeschrittene	8	22.04.2011 22:12
[Erledigt] CSS und Javascript Dropdown Menu IE PROBLEM	unreal87	HTML, Usability und Barrierefreiheit	3	19.05.2010 19:20
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
benötigen ein Javascript Auswahl Menü (und mehr)	nbg12	Beitragsarchiv	0	22.08.2009 11:26
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
[Erledigt] Menü mit CSS und JavaScript	vollkommenegal	HTML, Usability und Barrierefreiheit	18	12.11.2008 13:50
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
JavaScript Navigations Menü	andiR	HTML, Usability und Barrierefreiheit	4	30.08.2006 12:28
javascript: aufklapp menu (mit <span>)	bona	HTML, Usability und Barrierefreiheit	5	28.02.2006 14:08
[Erledigt] Mouseover Menü in Javascript und PHP Lösung ?		PHP Tipps 2005-2	4	20.07.2005 08:48
Aufklappbares Menü mit css und javaScript !?		HTML, Usability und Barrierefreiheit	2	04.07.2005 13:56
Baum Menü mit JavaScript	L.Croft	HTML, Usability und Barrierefreiheit	6	13.02.2005 14:56

12.07.2011, 07:27
Ralf-2011 Erfahrener Benutzer Registriert seit: 15.06.2011 Beiträge: 106 PHP-Kenntnisse: Anfänger	Menü aufbauen (Javascript) Hallo, hatte vor langer Zeit mal ein schickes Menü gesehen, was ich nun leider net mehr finde. Hab mal schnell eins skiziert um zu zeigen wie es ca. aussah. Sowas würd ich auch gern machen, meine Frage ist nun gibt es da schon was von JQuery und Co? Eine Art PlugIn? Also ist so gedacht wenn man mit dem Cursor auf einen Menüpunkt geht, das diese auch im Streifen schräg nach oben unterlegt wird (natürlich mit fertigen Grafiken) Äh ja hoffe ihr könnt euch das vorstellen...so früh am Morgen Miniaturansicht angehängter Grafiken __________________ Liebe Grüße R.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

12.07.2011, 09:43
Ralf-2011 Erfahrener Benutzer Registriert seit: 15.06.2011 Beiträge: 106 PHP-Kenntnisse: Anfänger	Ähm ich denk schon...hab nochmal zwei Grafiken angehängt Grafik 1: Erstaufruf Grafik 2: Hover auf Band Hab das grad so gemacht das ich die DIVs absolute positioniere, und dann eben mit Javascript ein- und ausblende Miniaturansicht angehängter Grafiken __________________ Liebe Grüße R.

12.07.2011, 10:09
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Leg doch das Bild per z-index hinter dein Menü und beim mouseover der Menüpunkte verschiebst du das dann eben um einen passenden Offset. Dann haste gleich noch ne Animation dabei. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de

12.07.2011, 11:42
Ralf-2011 Erfahrener Benutzer Registriert seit: 15.06.2011 Beiträge: 106 PHP-Kenntnisse: Anfänger	Naja hab das ja als background-img per css. __________________ Liebe Grüße R.

13.07.2011, 04:42
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.727 PHP-Kenntnisse: Fortgeschritten	Geht's darum, dass ein Menüeintrag auch aktiviert/ausgewählt werden können soll, wenn sein zugehöriger „schräger Streifen“ mit der Maus überfahren wird? Alles, was nicht rechteckig ist, ist immer etwas problematisch. __________________ Blog \| Buch \| Kaloa

13.07.2011, 08:58
Ralf-2011 Erfahrener Benutzer Registriert seit: 15.06.2011 Beiträge: 106 PHP-Kenntnisse: Anfänger	Also das mit dem dem Schrägstreifen ist mehr oder weniger nur Schönheit das Submenü wird untendrunter gesetzt ich dachte da gibts was von JQuery, derzeit hab ich es so. das ich ich für jeden Menüpunkt extra bei Hover eine Div mit der Grafik einblende. __________________ Liebe Grüße R.

13.07.2011, 20:52
Ralf-2011 Erfahrener Benutzer Registriert seit: 15.06.2011 Beiträge: 106 PHP-Kenntnisse: Anfänger	So hab da mal bissl gebastelt. Also der Effect ist erstmal fürn Arsch PHP-Code: function showandhide(myid,big) { if(document.getElementById("sub_community").style.display =="none") { if(myid=="sub_community") { document.getElementById("sub_community").style.display = "block"; document.getElementById("main_community").className= "main_menu main_active"+(big?' big_menu':''); /* TEST $j("#sub_community").hover(function(){ $j("#hover").offset({left:50}); }, function() { $j("#hover").offset({left:0}); }); / } } else { if(myid!="sub_community") { document.getElementById("sub_community").style.display = "none"; document.getElementById("main_community").className= "main_menu"+(big?' big_size':''); } } } PHP-Code: `<div id="hover"></div> <!-- DIV mit dem Hover Bild--> <div id="main_community" onmouseover="showandhide('sub_community',true)" onmouseout="showandhide('sub_'+menustart,true)" class="main_menu big_size main_active big_menu"><a class="main_text" href="">Community</a></div>` Leider richtet sich der offset nach dem Bildschirmrand, den so wie es jetzt im Code ist, rutscht das bild außerhelb der Webseite. Hab so auch mal im Netz geschaut, irgendwie hat keiner sowas __________________ Liebe Grüße R.*