Community

9dots.de Webdesign Board

 

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 

 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 


Navigation to Subnavigation ala myug.de

 
Neues Thema eröffnen   Neue Antwort erstellen    9dots.de Webdesign Community Foren-Übersicht -> Coding-Support
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
crovean
Mitglied
Mitglied


Angemeldet: 26.04.2006
Beiträge: 125

Interessen: Grafikgestaltung - Programmieren

BeitragVerfasst am: 20.11.2008, 13:16    Titel: Navigation to Subnavigation ala myug.de Antworten mit Zitat
Hi Ich bin's nochmal innerhalb von zwei Tagen, wieder mit einer Frage bezüglich der myug.de Seite Smilie (Nichts falsches Denken, ist nur ein gutes Beispiel für gut umgesetzten Code).

Ich wollte Fragen wie dieses Dropdown Menu von der Navigation mit Mouseover zur Subnavigation oder auch ohne Mouseover halt für eine Subnavi funktioniert? Denn ich kenne dieses einfache DropDown Menü mit Java aber ich weiss nicht wie das jetzt mit der Navigation also einem Navi Punkt auf Subnavi mit mehreren Springt?

Wäre super wenn mir da jemand helfen könnte, ich hab auch schon google.de genutzt, aber da kam nichts was ich benötige an Verwertbarem bei rum.

Grüße
Simon, und Danke im vorraus
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden AIM-Name Yahoo Messenger MSN Messenger
Julianwaf
Mitglied
Mitglied


Angemeldet: 03.11.2005
Beiträge: 385
Wohnort: - / Land: NRW

BeitragVerfasst am: 20.11.2008, 13:27    Titel: Antworten mit Zitat
Ich versteh deine Frage nicht wirklich!
Was suchst du genau?
Das man nach dem klick noch den Hover aktiviert hat --> Array?
Oder das beim überfahren eines Punktes mit der Maus die Subnavi geladen wird?
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden Website dieses Benutzers besuchen
AEQUITAS
Mitglied
Mitglied


Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen

BeitragVerfasst am: 20.11.2008, 13:34    Titel: Antworten mit Zitat
Ist eigentlich sehr einfach mit CSS zu realisisieren.

Du hast dein Hauptmenü in einer Liste, ungefähr so:

<ul id="hauptmenu">
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
</ul>

Dann kannst du das ganze verschachteln und ein Dropdownmenü einbauen und das an jeden beliebigen Menüpunkt.

Ungefähr so:

<ul id="hauptmenu">
<li>Menüpunkt 1
<ul class="untermenu">
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
</ul>
</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3
<ul class="untermenu">
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
</ul>
</li>
<li>Menüpunkt 4</li>
</ul>

Wichtig ist, dass du dann da spätestens Class nimmst, da das Untermenü ja öfters vor kommt.

Das wäre eigentlich auch schon der html Teil. Du musst das ganze dann natürlich noch mit Links versehen und so weiter.

Dann zu CSS auch sehr einfach. Dort passt du das natürlich an, wie du das benötigst, ob untereinander oder nebeneinander, ist ja mit css sehr einfach zu händeln. Ich hab da jetzt einfach so was reingeschrieben.

#hauptmenu {
display:boxed;
margin:0;
padding:0;
}

#hauptmenu li {
margin:5px 0;
padding:0;
}

Im Untermenü trägst du dann display:none; ein, damit es erstmal unsichtbar ist.

.untermenu {
display:none;
margin:0;
padding:0;
}

.untermenu li {
margin:5px 0;
padding:0;
}

Zu guter letzt musst du das ja dann noch "öffnen". Das geht auch sehr einfach mit dieser verschachtelten Schreibweise:

ul#hauptmenu li:hover ul.untermenu {
display:block;
}

Das ul müsstest du auch optional weglassen können, ich schreibe es halt immer mit. Dann gilt es bei dir auch für divs und so weiter. Ich habs halt nur für die Listen so deklariert.

Mit dem stückchen Code sagst du halt, dass der das entsprechende Untermenü, was verschachtelt im entsprechenden Listenpunkt sitzt, anzeigen soll.

Somit bist du auch schon fertig und es sollte einwandfrei auf allen Browsern laufen. Jedenfalls gehts bei mir mit Firefox 1,2,3 , Safari, Opera, Chrome und IE 6,7.

Viel Spaß beim ausprobieren.

// Achja, wenn du fragen hast, einfach stellen!
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
crovean
Mitglied
Mitglied


Angemeldet: 26.04.2006
Beiträge: 125

Interessen: Grafikgestaltung - Programmieren

BeitragVerfasst am: 20.11.2008, 14:11    Titel: Antworten mit Zitat
Gut soweit nachvollziehbar, also ich hab da nun Menübilder und wenn man darüber fährt soll es in einer Leiste aufgehen und man sollte dann darauf klicken können, Beispiel:



|Button1| |Button1| |Button1| |Button1|
--------- --------- --------- ---------


--- Submenulink 1 --- Submenulink 2 --- Submenulink 3 etc.


d.h. wenn man über den Button 1 faehrt das dann die Submenu punkte für Button 1 Aufgehenh, ebenso bei den anderen, das breuchte ich für 4 Menu punkte. -- und Frage: wie kann ich das Submenu denn so ausgeben lassen das es Waagerecht ist.


Danke schonmal im Vorraus und für das was du schon geschrieben hast, Danke für die mühe Winken
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden AIM-Name Yahoo Messenger MSN Messenger
deLiTe.
Mitglied
Mitglied


Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy

BeitragVerfasst am: 20.11.2008, 15:24    Titel: Antworten mit Zitat
crovean hat folgendes geschrieben:
wie kann ich das Submenu denn so ausgeben lassen das es Waagerecht ist.

Ist das dein Ernst? Geschockt
float: left; (bzw. manchmal display:inline;) oder versteh ich die Frage falsch?

Vom CSS-Guru Stu Nichols findest du hier viele Beispiele, nennt sich übrigens "drop-line":
http://www.cssplay.co.uk/menus/

http://www.cssplay.co.uk/menus/pro_dropline.html

Nur was die IE-Hacks angeht, das wird haarig...
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
AEQUITAS
Mitglied
Mitglied


Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen

BeitragVerfasst am: 20.11.2008, 15:46    Titel: Antworten mit Zitat
machs mit float:left;

#hauptmenu li {
float:left;
}

musst halt immer anständig clearen.

<li><a href="">< img src="deinegrafik.jpg" alt="Alternativ Text" / ></a></li>

fertig, grafik eingebunden.

formartier das ganze noch in css und du bist fertig.

#hauptmenu li img {
width:px;
height:px;
cursor:pointer;
border:0px;
}

fertig.

// ich musste beim img-tag die leerzeichen einfügen, da mir das phpboard das hier sonst nicht anzeigt.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
crovean
Mitglied
Mitglied


Angemeldet: 26.04.2006
Beiträge: 125

Interessen: Grafikgestaltung - Programmieren

BeitragVerfasst am: 20.11.2008, 16:06    Titel: Antworten mit Zitat
ich weiss es nicht ob ich das jetzt falsch verstehe, aber - also: Ich habe die Grafiken worüber man gehen soll mit der Maus dafür das, die Menüs erscheinen in Tabellenform, und ich muss ja etwas angeben dafür das eine bestimme Grafik, ein bestimmtes menü ausgibt, und das genau weiss ich nicht.

Rest denke ich komme ich klar.

Danke an euch
Grüße Simon
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden AIM-Name Yahoo Messenger MSN Messenger
AEQUITAS
Mitglied
Mitglied


Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen

BeitragVerfasst am: 20.11.2008, 16:12    Titel: Antworten mit Zitat
Ja, du musst die Grafiken einfach in die li-Tags vom Hauptmenü einbinden. Dann sieht man Grafiken, statt Text und wenn du dann mit der Maus über die Grafik gehst, wird das entsprechende Untermenü geöffnet, eigentlich ganz einfach.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
crovean
Mitglied
Mitglied


Angemeldet: 26.04.2006
Beiträge: 125

Interessen: Grafikgestaltung - Programmieren

BeitragVerfasst am: 20.11.2008, 16:36    Titel: Antworten mit Zitat
Meine CSS:

.untermenu1 {
display:none;
margin:0;
padding:0;
}

.untermenu1 li {
margin:5px 0;
padding:0;
color:#CCCCCC;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
float:left;
}

ul#hauptmenu1 li:hover ul.untermenu1 {
display:block;
}

#hauptmenu1 {
display:boxed;
margin:0;
padding:0;
}


#hauptmenu1 li img {
width:69px;
height:32px;
cursor:pointer;
border:0px;
}



-------------


Mein HTML Bei dem Image was Hauptmenu1 sein soll womit dann später das untermenu1 aufgehen soll sobald man darüber fährt:

<ul class="hauptmenu1">< li >< img src ="Bilder/nav_news.jpg" width="69" height="32" border="0" />< /li >< ul ></ td >
-------------

Das untermenu1 in HTML:

<ul class="untermenu1"> Menupunkt 1 Menupunkt 2 Menupunkt 3 </ul>


Wie muss ich das nun machen das, dass Funktioniert? Smilie
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden AIM-Name Yahoo Messenger MSN Messenger
AEQUITAS
Mitglied
Mitglied


Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen

BeitragVerfasst am: 20.11.2008, 16:57    Titel: Antworten mit Zitat
<ul class="hauptmenu">
<li>
<ul class="untermenu">
<li></li>
</ul>
</li>
</ul>

wie meine oben geschriebene aufbauweise. bin jetzt vortrinken.
toll student zu sein. Smilie
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    9dots.de Webdesign Community Foren-Übersicht -> Coding-Support Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Board Software by phpBB © 2001, 2005 phpBB Group. Impressum
Dominik Wuttke - Moritz Münchmeyer - Joachim Nagel GbR.
AGB