Menu einblenden mittels JavaScript

[Peter Klein]

Hallo

Ich arbeite an diversen Unterseiten bei uns in der Firma. Diese unterscheiden sich vom Aufbau her nicht sehr viel als die Hauptseiten.Die besagten Unterseiten sind noch nicht öffentlich und bitte daher auf den Code der u.a. Seite schauen.

Es soll oben im Menu immer nur ein Punkt zu sehen sein, bis dahin kein Problem steht soweit alles.Wir arbeiten u.a. mit Prototype und Scriptaculous, da diese auch im Rails Framework integriert sind das wir nutzen.

Und die anderen Menupunkte sollen per Javascript beim hovern des statischen Menupunktes eingeblendet werden.
Da ich JavaScript nur sehr sehr begrenzt kann, es aber lernen möchte/sollte, bräuchte ich Ansätze und Hilfe für die Umsetzung.


Link: Absolventa


Peter

 

[Sven Mintel]

Moin Peter,

so recht werde ich nicht schlau aus deiner Beschreibung :-(

Meinst du einfach sowas: http://www.wappler.eu/dropdownmenu/

Willst du wirklich ein JS-basiertes Menu verwenden, es gibt da wunderbare Sachen auf CSS-Basis?

 

[Peter Klein]

Hi Sven,

Es soll kein normales Flyout- KlappMenu sein,
für das Vorhaben welches wir haben klappt das nicht mit CSS.

Es gibt 7 Seiten, auf jeder Seite ist ein Menupunkt zu sehen, der eine Kategorie darstellt. Wenn ein User sich dabei verklickt hat, sollen die anderen Menupunkte eingeblendet werden.
Wiederum müssen die Positionierungskoordinaten jedesmal anders sein da das Menu ja sozusagen nicht statisch ist.

Ich habe zwar einige hier sitzen, die das können, aber da ich mich in JavaScript weiter reinlesen muss, und auch möchte, versuche ich mittels Hilfe aus diesem Forum Hilfe zu bekommen. Falls ich es nicht hinbekomme, kann ich meine Programmierer immer noch fragen;-)

Ich hoffe ich konnte es jetz etwas besser beschreiben.

Peter

 

[Maik]

Es gibt 7 Seiten, auf jeder Seite ist ein Menupunkt zu sehen, der eine Kategorie darstellt.

Moin,

kannst du mir / uns bitte mal auf die Sprünge helfen, um welche sieben Seiten es sich hierbei konkret handelt?

Im oberen horizontalen Menü zähle ich sechs Menüpunkte (Startseite, Über Uns, FAQ, Blog, Partner & Für Unternehmen) und im Footer-Bereich finden sich fünf weitere Links (Presse, Kontakt, Datenschutzbestimmungen, Nutzungsbedingungen & Impressum) - nun heißt es wohl: "Aus elf mach sieben" ... doch welche nun?

Und wieso sollen in den einzelnen Kategorie-Seiten die übrigen sechs Verweise erst dann erscheinen, wenn über den einen Menüpunkt gefahren wird bzw. der Seitenbesucher sich "verklickt" (verlaufen?) hat?

Alles irgendwie noch nicht so recht über- und durchschaubar

mfg Maik

 

[Peter Klein]

Hi

Die besagten Unterseiten sind noch nicht öffentlich und bitte daher auf den Code der u.a. Seite schauen.

Der Code für Footer und Headbereich ist exakt gleich, bis auf die Sache mit dem einblenden und ausblenden der einzelnen Menupunkte.

Auch sind die Bezeichnungen anders als auf der Hauptseite.

Habe einen Screen angehangen, dort wo der grüne Bereich ist sollen die ausgeblendeten Menupunkte eingeblendet werden.
Der Menupunkt im roten Bereich ist immer verschieden, jenachdem auf welcher Seite man sich befindet, somit können auch die nrestlichen Menupunkte nicht statisch sein.

Hoffe es hilft etwas weiter.

Peter

 

[Maik]

Darf ich mal fragen, wozu das Ganze überhaupt gut sein soll?

Wenn ich eine Website betrete, erwarte ich, dass die Seitennavigation mich durch das mehr oder weniger unbekannte und umfangreiche Angebot führt, und mir auf jeder einzelnen Projektseite mit einem Blick eine Orientierung bietet, wo ich mich derzeit befinde, welche Kategorien ich schon besucht habe, und was es noch alles zu Entdecken gibt.

"Web2.0" und alles, was da so an "Dynamik" und "Interaktion" geboten wird, ist ja schön und gut, aber meines Erachtens sollte die Hauptnavigation eine zentrale "Anlaufstelle" des Internetauftritts darstellen, die für den Besucher in allen Projektseiten direkt sicht- und greifbar ist, und ihn durch solche "Versteckspiele" nicht in die Irre führt.

Ansonsten müsstet Ihr auf allen Seiten Eures Internetangebots einen deutlichen und nicht-übersehbaren Hinweis platzieren, der dem Besucher eine "Gebrauchsanleitung" mit auf den Weg gibt, wo die übrigen Menüpunkte zu finden und, wie sie zu aktivieren sind.

Meiner Meinung nach alles andere als benutzerfreundlich.

*justmy2cents*

mfg Maik

 

[Peter Klein]

Diese Seiten werden nur von Usern zu sehen sein die durch bestimmte Kritrien durch unsere Partner auf diese Seiten umgeleitet werden.

Sozusagen würde ich sie unter interne Seiten einordnen.

Es wird auch nur in seltenen Fällen angeklickt, und nur in den Fällen falls sich der User verklickt hat, bzw die Kategorie nicht auf ihn zutrifft. Wobei wir dies bei den meisten der Fälle von vornherein wissen und der USer auf die richtige Seite umgeleitet wird.

Aber Ausnahmen gibt es ja immer.

 

[Sven Mintel]

Also wenn du es wirklich so meinst, wie ich langsam glaube(Maiks Ausführungen würde ich mich unbedingt anschliessen :-()....hier ein Beispiel:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author"             content="doktormolle">
<meta name="date"               content="2008-10-24">
<title>Test</title>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
  document.getElementsByTagName('HTML')[0].className='prototyped';
</script>
<style type="text/css">
<!--
.prototyped a{
  visibility:hidden;
  }  

#menu a{
  display:block;
  width:100px;text-align:center;
  border:1px solid #000;
  float:left;
  }

#menu.over a,
#menu .show{
  visibility:visible;
  }

-->
</style>
</head>
<body>

<div id="menu">
  <a href="">foo</a>
  <a href="" class="show">bar</a>
  <a href="">foobar</a>
</div>
<script type="text/javascript">
<!--
  Event.observe(document,'mouseover', function(event) 
    {
      element=event.element();
      if(!element.descendantOf('menu') && element!=$('menu'))
        {
          $('menu').removeClassName('over');
        }
      else
        {
          $('menu').addClassName('over');
        }
    }
  );
//-->
</script>
</body>
</html>

Es wird der mouseover-Event des Dokumentes überwacht.
Feuert er im "Menu", wird Selbiges komplett angezeigt, wenn nicht...alles ungewollte versteckt.
Der Link mit dem Klassennamen "show" wird immer angezeigt.
Das wars eigentlich schon.


Damit die Sache ohne JS benutzbar bleibt, wird eingangs per JS dem HTML-Element ein Klassenname verpasst und über diesen als Selektor die Links verborgen.