mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 06:22 Benutzername: Passwort: Auto-Login

Thema: mein Problem: CSS/JavaScript-DropDown-Navigation vom 14.04.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> mein Problem: CSS/JavaScript-DropDown-Navigation
Seite: 1, 2  Weiter
Autor Nachricht
macfriend
Threadersteller

Dabei seit: 01.04.2007
Ort: Augsburg
Alter: -
Geschlecht: Männlich
Verfasst Sa 14.04.2007 20:08
Titel

mein Problem: CSS/JavaScript-DropDown-Navigation

Antworten mit Zitat Zum Seitenanfang

Hi,

vorab möchte ich mich entschuldigen, da ich beim Rumsuchen hier auf mgi schon den einen oder anderen Thread zu diesem Thema gefunden (und auch intensiv gelesen) habe – aber mein Problem bzgl. der Herstellung oder besser gesagt bzgl. des Verständnisses der Codierung einer CSS/JavaScript-DropDown-Navigation weiterhin besteht.
Da hat mich auch das ausführliche Googeln nicht weitergebracht.

Aber nun genug geschwafelt – ich habe folgendes Problem:

Ich bin dabei diese Website herzustellen, habe mir innerhalb der letzten Wochen die Grundlagen des CSS-Layoutens autodidaktisch angeeignet, bilde mir ein, ein in Aufbau und Funktion der Mainnavigation von RTL.de ähnelndes Navigationsmenü haben zu wollen und habe keine Ahnung wie man das auf möglichst einfache-, für einen Anfänger auf diesem Gebiet leicht verständliche-, dennoch professionelle- und multibrowserkompatible- und auf einem möglichst übersichtlichen, basierendem Quellcode codieren kann.
Ich habe beim Stöbern durchs Internet diese Seite gefunden, den Quelltext der dort vorgestellten Navigationsstruktur in meinen künftigen Internetauftritt eingebaut und ihn optisch und ins Layout passend angeglichen.
Das hat noch funktioniert. Ich habe dazu, wie ihr sie hier sehen könnt,

.menutitle{ background-color:#653515; color:#ccc; font-size: 11pt; font-family: arial; text-indent: 4px; width:147px; margin-bottom: 2px; padding: 2px; }
.submenu{ color: #ccc; font-size: 10pt; font-family: arial; margin-bottom: 0.2em; padding-left: 7px; }

die reine CSS-Formatierung der Struktur in meine basic.css geschoben und sie mit dem Quellcode meiner Seite verlinkt.
Die vorgefertigte Navigationsstruktur besteht aus einem vertikalen DropDown-System, welches durch Klicks auf die "Schaltflächen" der Überbegriffe normale Hotwords preisgibt.
Mein wunsch ist es nun, statt (bzw. in Verbindung mit ihnen) der Hotwords ebensolche "Schaltflächen" zu erhalten, wie sie aktuell die Überbegriffe unterlegen.
Dabei sollen die "neuen Schaltflächen" wie auch die der bereits Bestehenden, frei beschriftbar werden. Die Schrift soll aber wie ebenfalls bei den bereits bestehenden Schaltflächen der Fall, mit der unterligenden eigentlichen "Schaltfläche" eine Linkeinheit bilden, bei welcher es später egal ist ob der User direkt auf den Schriftzug, oder auf die Fläche klickt.
Weiterhin wäre es mein Wunsch dass jede "Schaltfläche" des Navigationsmenüs einen Rollover-Effekt bekommt, welcher die Schriftfarbe ändern soll.
Da ich von JavaScript- und so intensiv auch von CSS keine Ahnung habe, mich der Code der kopierten Navigationsstruktur mit seinen vielen if`s und else`s total verwirrt, mich meine Online-Recherchen wie ja oben bereits erwähnt nicht weiter-, sondern mich ausschließlich auf andere Themen bezogene Seiten geführt haben, ich eigentlich schon ganz gerne wissen würde was der Code meiner Website bewirkt und ich selbst bei SelfHTML keine wirkliche Hilfe bekommen habe, bitte ich nun die Profis unter euch für mich da zusein, mir zu helfen und mich zu unterstützen.

Das wäre wirklich sehr nett von euch.

Viele Grüße und herzlichen Dank bereits im Voraus.

macfriend

Ps.: Wenn ich mal was im Bereich der Fotografie für euch tun kann, dann lasst es mich einfach wissen.
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst So 15.04.2007 16:42
Titel

Antworten mit Zitat Zum Seitenanfang

Dies sollte sogar mit 100 Menu-Levels funktionieren.

Code:
<html>
<head>
<title>myRTL</title>

<style type="text/css">#menu ul { display: none; }</style>

<script type="text/javascript">
Menu = function() {

  var opened = Array();

  this.click = function( ids ) {
   
    for( l = 0; l < 2; l++ ) {
      for( var i = 0; i < opened.length; i++ )
        document.getElementById( opened[i] ).style.display =
          ( l == 0 ) ? 'none' : 'block';
      opened = ids;
    }     
  }
}

var m = new Menu();
</script>

</head>

<body>
<ul id="menu">

  <!-- Heim (1 Level) -->
  <li><a href="/">Heim</a></li>
 
  <!-- Kontakt (2 Level) -->
  <li>
    <a href="#" onclick="m.click(Array('kontakt'))">Kontakt</a>
    <ul id="kontakt">
      <li><a href="ich.html">Mich</a></li>
      <li><a href="es.html">Es</a></li>
    </ul>
  </li>

  <!-- Galerie (3 Level) -->
  <li>
    <a href="#" onclick="m.click(Array('galerie'))">Galerie</a>
    <ul id="galerie">
      <li>
        <a href="#" onclick="m.click(Array('galerie','landschaft'))">Landschaft</a>
        <ul id="landschaft">
          <li><a href="berg.jpg">Berg</a></li>
          <li><a href="see.jpg">See</a></li>
        </ul>
      </li>
      <li>
        <a href="#" onclick="m.click(Array('galerie','personen'))">Personen</a>
        <ul id="personen">
          <li><a href="ich.jpg">Ich</a></li>
          <li><a href="du.jpg">Du</a></li>
        </ul>
      </li>

    </ul>
  </li>

</ul>

</body>
</html>


Formatieren duerfte ja kein Ding sein...
  View user's profile Private Nachricht senden
Anzeige
Anzeige
macfriend
Threadersteller

Dabei seit: 01.04.2007
Ort: Augsburg
Alter: -
Geschlecht: Männlich
Verfasst So 15.04.2007 18:34
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Schachbrett,

vielen Dank erstmal für deine Mühe den Code zu schreiben und dafür, ihn mir zur Verfügung zu stellen.
Leider habe ich aber trotzdem noch drei Probleme:

1. Ich weiss nicht wie bzw. womit und an welcher Stelle ich die Verbindung zwischen deinem Code, welchen ich jetzt offline in meinen Quelltext eingebaut habe mit der basic.css verknüpfen soll, so dass ich dann im CSS-Editor von GoLive die Formatierung vornehmen kann.

2. Eigentlich hätte ich gerne Schaltflächen anstelle der einfachen Hotwords gehabt.

und 3. Ich verstehe leider die Programmierung des Codes nicht. Denn ich weiss nicht welche Funktion welcher Codeschnipsel hat. Ich würde es aber gerne verstehen, da ich vielleicht, wenn ich es einmal gut drauf habe, selbst einmal Änderungen daran vornehmen möchte, ohne dann wieder Hilfe von anderen in Anspruch nehmen zu müssen.

Könntest du da vielleicht nochmal helfen? Das wäre super!

Gruß macfriend
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst So 15.04.2007 18:51
Titel

Antworten mit Zitat Zum Seitenanfang

Hast du ihn denn mal ausprobiert?
  View user's profile Private Nachricht senden
macfriend
Threadersteller

Dabei seit: 01.04.2007
Ort: Augsburg
Alter: -
Geschlecht: Männlich
Verfasst So 15.04.2007 18:53
Titel

Antworten mit Zitat Zum Seitenanfang

Ja, ausprobiert schon. Da werden mir aber nur Hotwords auf schwarzem Untergrund dargestellt.
  View user's profile Private Nachricht senden
macfriend
Threadersteller

Dabei seit: 01.04.2007
Ort: Augsburg
Alter: -
Geschlecht: Männlich
Verfasst So 15.04.2007 18:59
Titel

Antworten mit Zitat Zum Seitenanfang

Was mache ich falsch? Mache ich was falsch?
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Mo 16.04.2007 07:56
Titel

Antworten mit Zitat Zum Seitenanfang

Nur keine Hektik. *hehe*

1) Schneid dir den Quelltext doch mal aus und Teste den in einer Extra-Datei. Dann siehst du ja, ob es so funktioniert wie du es wolltest -- war mir da nach deinen lyrischen Ausfuehrungen nicht so sicher...

2) Wenn es so richtig ist, dann passe das Menu einfach an deine Anforderungen an. Es gibt ja ein einfaches Beispiel fuer jede Menutiefe! Das Prinzip sollte schon zu verstehen sein - und die Funktion hat ja nur vier Zeilen (mit nur einem IF Lächel )!

99) Um das Aussehen kuemmerst du dich erst am Schluss, mit CSS ist das echt kein Ding!
  View user's profile Private Nachricht senden
macfriend
Threadersteller

Dabei seit: 01.04.2007
Ort: Augsburg
Alter: -
Geschlecht: Männlich
Verfasst Mo 16.04.2007 13:13
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo schachbrett,

in der GoLive-Vorschau wird dein Script so dargestellt - wenn man auf "Galerie" klickt.


Was ich jedoch möchte ist, dass die Sub-Menüpunkte der aktuellen Navigation meiner Website vomfotozumbild.de im Aussehen und in der Anordnung identisch mit den Überbegriffen meiner bisherigen Navigation werden, die Switch-Funktion dabei wie bisher bestehen bleibt, lediglich die Untergrundfarbe meiner Sub-Menüpunkte sich etwas von der der Überbegriffe abhebt, die Beschriftungen "aller Navigationspunkte" also einschließlich der Überbegriffe einen Rollover-Effekt bekommen, die Flächen sowie die Textlinks der einzelnen Sub-Menüpunkte zu einem gemeinsamen (quasi als Linkeinheit) Link werden und die Sub-Menüschaltflächen entgegen deines Vorschlages keinen Einzug haben.
Denn es muss ja alles in die linke Spalte meines Layouts passen.

Sorry, aber das war einfach noch nicht das was ich wollte.
Vielleicht kannst du dir ja jetzt eher vorstellen was ich will.

Viele Grüße und vielen Dank nochmal

macfriend
  View user's profile Private Nachricht senden
 
Ähnliche Themen Javascript-Navigation Problem mit Schriftfarbe
Navigation: Dropdown liste.
CSS Javascript Dropdown menü
JavaScript-Dropdown-Menü
[JavaScript] 2 Dropdown Menüs
Probleme mit Dropdown-Menü (Javascript)
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.