Vorheriges Thema anzeigen :: Nchstes Thema anzeigen |
Autor |
Nachricht |
crovean Mitglied
Angemeldet: 26.04.2006 Beitrge: 125
Interessen: Grafikgestaltung - Programmieren
|
Verfasst am: 20.11.2008, 13:16 Titel:
Navigation to Subnavigation ala myug.de |
|
|
|
|
Hi Ich bin's nochmal innerhalb von zwei Tagen, wieder mit einer Frage bezglich der myug.de Seite (Nichts falsches Denken, ist nur ein gutes Beispiel fr gut umgesetzten Code).
Ich wollte Fragen wie dieses Dropdown Menu von der Navigation mit Mouseover zur Subnavigation oder auch ohne Mouseover halt fr 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?
Wre super wenn mir da jemand helfen knnte, ich hab auch schon google.de genutzt, aber da kam nichts was ich bentige an Verwertbarem bei rum.
Gre
Simon, und Danke im vorraus |
|
Nach oben |
|
|
Julianwaf Mitglied
Angemeldet: 03.11.2005 Beitrge: 385 Wohnort: - / Land: NRW
|
Verfasst am: 20.11.2008, 13:27 Titel:
|
|
|
|
|
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 |
|
|
AEQUITAS Mitglied
Angemeldet: 16.08.2005 Beitrge: 513 Wohnort: Kln Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
Verfasst am: 20.11.2008, 13:34 Titel:
|
|
|
|
|
Ist eigentlich sehr einfach mit CSS zu realisisieren.
Du hast dein Hauptmen in einer Liste, ungefhr so:
<ul id="hauptmenu">
<li>Menpunkt 1</li>
<li>Menpunkt 2</li>
<li>Menpunkt 3</li>
<li>Menpunkt 4</li>
</ul>
Dann kannst du das ganze verschachteln und ein Dropdownmen einbauen und das an jeden beliebigen Menpunkt.
Ungefhr so:
<ul id="hauptmenu">
<li>Menpunkt 1
<ul class="untermenu">
<li>Menpunkt 1</li>
<li>Menpunkt 2</li>
<li>Menpunkt 3</li>
<li>Menpunkt 4</li>
</ul>
</li>
<li>Menpunkt 2</li>
<li>Menpunkt 3
<ul class="untermenu">
<li>Menpunkt 1</li>
<li>Menpunkt 2</li>
<li>Menpunkt 3</li>
<li>Menpunkt 4</li>
</ul>
</li>
<li>Menpunkt 4</li>
</ul>
Wichtig ist, dass du dann da sptestens Class nimmst, da das Untermen ja fters vor kommt.
Das wre eigentlich auch schon der html Teil. Du musst das ganze dann natrlich noch mit Links versehen und so weiter.
Dann zu CSS auch sehr einfach. Dort passt du das natrlich an, wie du das bentigst, ob untereinander oder nebeneinander, ist ja mit css sehr einfach zu hndeln. Ich hab da jetzt einfach so was reingeschrieben.
#hauptmenu {
display:boxed;
margin:0;
padding:0;
}
#hauptmenu li {
margin:5px 0;
padding:0;
}
Im Untermen trgst 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 msstest du auch optional weglassen knnen, ich schreibe es halt immer mit. Dann gilt es bei dir auch fr divs und so weiter. Ich habs halt nur fr die Listen so deklariert.
Mit dem stckchen 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 |
|
|
crovean Mitglied
Angemeldet: 26.04.2006 Beitrge: 125
Interessen: Grafikgestaltung - Programmieren
|
Verfasst am: 20.11.2008, 14:11 Titel:
|
|
|
|
|
Gut soweit nachvollziehbar, also ich hab da nun Menbilder und wenn man darber fhrt soll es in einer Leiste aufgehen und man sollte dann darauf klicken knnen, 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 fr Button 1 Aufgehenh, ebenso bei den anderen, das breuchte ich fr 4 Menu punkte. -- und Frage: wie kann ich das Submenu denn so ausgeben lassen das es Waagerecht ist.
Danke schonmal im Vorraus und fr das was du schon geschrieben hast, Danke fr die mhe |
|
Nach oben |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beitrge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 20.11.2008, 15:24 Titel:
|
|
|
|
|
crovean hat folgendes geschrieben: | wie kann ich das Submenu denn so ausgeben lassen das es Waagerecht ist. |
Ist das dein Ernst?
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 |
|
|
AEQUITAS Mitglied
Angemeldet: 16.08.2005 Beitrge: 513 Wohnort: Kln Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
Verfasst am: 20.11.2008, 15:46 Titel:
|
|
|
|
|
machs mit float:left;
#hauptmenu li {
float:left;
}
musst halt immer anstndig 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 einfgen, da mir das phpboard das hier sonst nicht anzeigt. |
|
Nach oben |
|
|
crovean Mitglied
Angemeldet: 26.04.2006 Beitrge: 125
Interessen: Grafikgestaltung - Programmieren
|
Verfasst am: 20.11.2008, 16:06 Titel:
|
|
|
|
|
ich weiss es nicht ob ich das jetzt falsch verstehe, aber - also: Ich habe die Grafiken worber man gehen soll mit der Maus dafr das, die Mens erscheinen in Tabellenform, und ich muss ja etwas angeben dafr das eine bestimme Grafik, ein bestimmtes men ausgibt, und das genau weiss ich nicht.
Rest denke ich komme ich klar.
Danke an euch
Gre Simon |
|
Nach oben |
|
|
AEQUITAS Mitglied
Angemeldet: 16.08.2005 Beitrge: 513 Wohnort: Kln Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
Verfasst am: 20.11.2008, 16:12 Titel:
|
|
|
|
|
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 geffnet, eigentlich ganz einfach. |
|
Nach oben |
|
|
crovean Mitglied
Angemeldet: 26.04.2006 Beitrge: 125
Interessen: Grafikgestaltung - Programmieren
|
Verfasst am: 20.11.2008, 16:36 Titel:
|
|
|
|
|
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 spter das untermenu1 aufgehen soll sobald man darber fhrt:
<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? |
|
Nach oben |
|
|
AEQUITAS Mitglied
Angemeldet: 16.08.2005 Beitrge: 513 Wohnort: Kln Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
Verfasst am: 20.11.2008, 16:57 Titel:
|
|
|
|
|
<ul class="hauptmenu">
<li>
<ul class="untermenu">
<li></li>
</ul>
</li>
</ul>
wie meine oben geschriebene aufbauweise. bin jetzt vortrinken.
toll student zu sein. |
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beitrge: 436162
|
|
Nach oben |
|
|
|