Dropdownmenü zur Seite ausklappen

_Hendi_

_Hendi_

PC-Selbstbauer(in)
Dropdownmenü zur Seite ausklappen

Hi, ich habe gestern schon den ganzen Tag rumprobiert und bin mitlerweile nicht wirklich weitergekommen aber umso verwirrter. Ich möchte folgendes realisieren: Gewissermaßen ein Dropdownmenü, das zur Seite aufgeht also die Links sitzen nicht untereinander sondern nebeneinander. Das mit dem Nebeneinander habe ich einfach durch display:inline gelöst. Nun ist es aber so, das die Liste (mit den nebeneinander liegenden Links) dauerhaft angezeigt wird also sie lässt sich nicht mehr ein oder ausblenden. Das mit dem untereinadner einblenden hat immer gut funktioniert aber sobald ich die Links nebeneinadner hatte, ging gar nichts mehr.

(jeweils die entsprechenden Auschnitte)

html:

Code: 
 <ul id="test0">
	<li><a href="#">test0</a>
		<ul>
			<li><a href="#">test1</a></li> 
			<li><a href="#">test2</a></li>
			<li><a href="#">test3</a></li>
			<li><a href="#">test4</a></li>
		</ul>
	</li>
    </ul>


css: (untereinander)

Code: 
#test0    {position:relative; z-index:4; width:400px; height:25px; top:-120px; left:500px; font-size:130%; }



#test0, #test0 ul      { margin:0; padding:0; list-style-type: none; }
/*#test0 ul li         { display: inline; }*/
/*#test0 ul li a:hover { color:#FFF; }*/
#test0 a             { display:block; width:10px;}
#test0 li            { float:left; width:400px;}
#test0 li ul         { position: absolute; width:500px; left:-999px; /*top:-10px; display: inline;*/ } 
#test0 li:hover ul   {left: auto; }

Was muss ich ändern, das das ganze auch nebeneinader funktioniert? float:left greift iwie nicht und auch display:inline zerstört jedesmal alles.

Wäre für Hilfe sehr dankbar

LG, _Hendi_
 
AW: Dropdownmenü zur Seite ausklappen

Code: 
#test0    {position:relative; z-index:4; width:400px; height:25px; top:-120px; left:500px; font-size:130%; }
#test0, #test0 ul      { margin:0; padding:0; list-style-type: none; }
#test0 a             { display:block; width:10px;}
#test0 li            { float:left; width:400px;}
#test0 li ul         { position: absolute; width:500px; left:-999px; /*top:-10px; display: inline;*/ } 

/* Here comes teh hover */
#test0 li ul   { display:none; }
#test0 li a:hover ul   { display:block; left: auto; }
/* Ich würde hier die Pseudo-Klasse :hover auf den a-tag legen, damit dies auch für Steinzeitalter-Menschen im IE funktioniert */

Versuche es mal damit, gibt natürlich auch JS Dropdowns wenn es zu ungenau ist für deinen Zweck.
 
AW: Dropdownmenü zur Seite ausklappen

Danke, habe es gerade ausprobiert aber leider funktioniert es auch nicht :( Es wird einfach nichts angezeigt wenn ich über den Schriftzug test01 fahre. Es öffnet sich weder nach unten noch zur Seite. Gibts es vieleicht eine gute Seite,wo solche JavaScripte zu finden sind?
 
AW: Dropdownmenü zur Seite ausklappen

Ja, stimmt, war mein Fehler, hier der Hover Code für dein HTML Markup.
Code: 
#test0 li ul { display:none }
#test0 li:hover ul   { display:block; left: auto; }
 
Zuletzt bearbeitet:
AW: Dropdownmenü zur Seite ausklappen

Danke, also nach unten ausklappen geht jetzt aber das hatte ich ja auch schon, zur Seite leider immer noch nicht :(
 
AW: Dropdownmenü zur Seite ausklappen

_Hendi_ schrieb:
Hi, ich habe gestern schon den ganzen Tag rumprobiert und bin mitlerweile nicht wirklich weitergekommen aber umso verwirrter. Ich möchte folgendes realisieren: Gewissermaßen ein Dropdownmenü, das zur Seite aufgeht also die Links sitzen nicht untereinander sondern nebeneinander. Das mit dem Nebeneinander habe ich einfach durch display:inline gelöst. Nun ist es aber so, das die Liste (mit den nebeneinander liegenden Links) dauerhaft angezeigt wird also sie lässt sich nicht mehr ein oder ausblenden. Das mit dem untereinadner einblenden hat immer gut funktioniert aber sobald ich die Links nebeneinadner hatte, ging gar nichts mehr.

(jeweils die entsprechenden Auschnitte)

html:

Code: 
 <ul id="test0">
	<li><a href="#">test0</a>
		<ul>
			<li><a href="#">test1</a></li> 
			<li><a href="#">test2</a></li>
			<li><a href="#">test3</a></li>
			<li><a href="#">test4</a></li>
		</ul>
	</li>
    </ul>


css: (untereinander)

Code: 
#test0    {position:relative; z-index:4; width:400px; height:25px; top:-120px; left:500px; font-size:130%; }



#test0, #test0 ul      { margin:0; padding:0; list-style-type: none; }
/*#test0 ul li         { display: inline; }*/
/*#test0 ul li a:hover { color:#FFF; }*/
#test0 a             { display:block; width:10px;}
#test0 li            { float:left; width:400px;}
#test0 li ul         { position: absolute; width:500px; left:-999px; /*top:-10px; display: inline;*/ } 
#test0 li:hover ul   {left: auto; }

Was muss ich ändern, das das ganze auch nebeneinader funktioniert? float:left greift iwie nicht und auch display:inline zerstört jedesmal alles.

Wäre für Hilfe sehr dankbar

LG, _Hendi_
Zum Vergrößern anklicken....

Hi, ich möchte auch gerne helfen!

Leider ist mir nicht 100%ig klar was du meinst: Ist es so?

Zustand 1:
- nur test0 sichtbar

Zustand2: (beim überfahren des Links mit der Maus)

test0
test1 test2 test3 test4 <-- diese 4 Links werden horizontal unter test0 sichtbar


Möchtest du das ganze etwas animiert haben?
 
AW: Dropdownmenü zur Seite ausklappen

So, ich habe einfach mal was animiertes gemacht:

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PCGH - animiertes Dropdown-Menü</title>

<style type="text/css">
ul
{
    list-style-type:none;
}

a
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    text-decoration:none;
    color:#000000;
}

a:hover,
a:active
{
    color:#F00F00;
}

#test0 li
{
    display:inline;
}


ul#menu li ul#test0
{
    opacity:0;
    height:0;
    padding-left:0;
}

ul#menu li:hover ul#test0,
ul#menu li:active ul#test0
{
    -moz-transition:750ms opacity 250ms ease-in-out,
                    500ms padding-left 100ms ease-in-out,
                    500ms height 100ms ease-in-out;
    -webkit-transition:750ms opacity 250ms ease-in-out,
                        500ms padding-left 100ms ease-in-out,
                        500ms height 100ms ease-in-out;
    -o-transition:750ms opacity 250ms ease-in-out,
                  500ms padding-left 100ms ease-in-out,
                  500ms height 100ms ease-in-out;
    opacity:1;
    padding-left:16px;
    height:20px;
}
</style>
</head>

<body>
 <ul id="menu">
    <li><a href="#">test0</a>
        <ul id="test0">
            <li><a href="#">test1</a></li> 
            <li><a href="#">test2</a></li>
            <li><a href="#">test3</a></li>
            <li><a href="#">test4</a></li>
        </ul>
    </li>
    <li><a href="#">test5</a></li>
</ul>
</body>
</html>

MfG miles
 
AW: Dropdownmenü zur Seite ausklappen

@milesdavis Ja genau. Also ich habe gerade deine Testseite mit der Anmation ausprobiert und ... es funktioniert :) :) :) genau so wie ich mir das vorgestellt habe :) Bist echt klasse und tausend Damk!!!:daumen: jetzt werde ich das mal in meine Seite einbauen und hoffen das es dann auch noch so schön funktioniert :ugly:

MFG Hendi
 
AW: Dropdownmenü zur Seite ausklappen

_Hendi_ schrieb:
@milesdavis Ja genau. Also ich habe gerade deine Testseite mit der Anmation ausprobiert und ... es funktioniert :) :) :) genau so wie ich mir das vorgestellt habe :) Bist echt klasse und tausend Damk!!!:daumen: jetzt werde ich das mal in meine Seite einbauen und hoffen das es dann auch noch so schön funktioniert :ugly:

MFG Hendi
Zum Vergrößern anklicken....

Kein Problem, ich helfe gerne!
 
AW: Dropdownmenü zur Seite ausklappen

Bin immer noch begeistert von deinem Code und funktioniert tadelos bis ich gerade gemerkt habe, das er im Internet Explorer den Dienst versagt :( in allen anderen Browsern funktioniert er. Weißt du zufällig, woran das liegen kann?

EDIT: deine Demo funktioniert im Internet Explorer, mein integrierter Code jedoch nicht, liegt es vielleicht daran, dass ich eine extra CSS datei habe und es nicht direkt in der html datei steht? habe das broblem nämlich auch schon bei border festgestellt das er das nicht checkt wenns in der extra Datei steht. Wie kann ich das beheben, ohne das ich den ganzen code direkt in die html datei schreibe?
 
AW: Dropdownmenü zur Seite ausklappen

Hallo alle zusammen,

ich habe so ein ähnliches Problem wie _Hendi_ schon beschrieben hat.
Ich muss in meiner Firma per Dreamweaver und ohne jegliche Vorkenntnisse in HTML oder ähnliches fürs Intranet eine Infoplattform basteln, nebenbei versteht sich :P
Habe mich so gut es geht in das schon vorhandene Gerüst reingefuchst aber jetzt komme ich grad echt nicht weiter. Mein Chef meinte das es ja "voll gut" wäre wenn man im Menü, wenn man über einen Menüpunkt fährt, das "Dropdown-Menü" zur Seite ausfährt. Also nach dem ähnlichen Prinzip wenn ich z.B. in Windows per Rechtsklick auf eine Datei gehe und dann "senden an" machen will. Sprich das es nach rechts ausklappt oder so wie schon von Miles oberhalb gebaut wurde. Nach rechts und in einer Reihe ausklappt.
Soweit so gut... aber dank meiner nicht vorhandenen Kenntnisse in diesem Gebiet kann ich das von Miles gebaute Gerüst nicht in meinen HTML-Text einbauen.
Irgendwas muss da vordefniert sein was ich nicht sehe/verstehe. Wäre super wenn ihr mal einen Blick darauf werfen könntet.


<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Navigation</title>
<link rel="stylesheet" type="text/css" href="../links.css">
<style type="text/css">
<!--
ul#Navigation li {
list-style:none;
margin-left:-40px;
right: auto;
}
ul#Navigation li ul {display: none; /* Unternavigation ausblenden */}
ul#Navigation li:hover ul {display: block; /* Unternavigation in modernen Browsern einblenden */}
ul#Navigation li ul li {display: block; margin-left:-30px;margin-bottom:3px}
-->
</style>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block" ; UL.style.backgroundColor = "red";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
</head>
<body bgcolor="#d2d2d2">
<ul id="navigation">
<li><a href="../TEST/TÜV.jpg" target="Inhalt"><img src="../TEST/Startseite QW.png" alt="Startseite" width="120" height="20" border="0" class="Link"></a></li>

<li type="square"><img src="Buttons/Hauptnavigation/Bereiche.gif" alt="Bereiche" width="120" height="20" border="0">
<ul>
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Test.html" target="Inhalt">Lieferanten A</a></li>
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Test.html" target="Inhalt">Lieferanten B</a></li>
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Test.html" target="Inhalt">Lieferanten C</a></li>
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Test.html" target="Inhalt">Lieferanten D</a></li>
</ul>
</menu>
<li><img src="Buttons/Techniknavigation/Sonstiges.gif" alt="Sonstiges">
<ul>
</ul>
</li>
</ul>
</body>
</html>


MfG
Stearix
 
AW: Dropdownmenü zur Seite ausklappen

Das animierte sind CSS3- und HTML5-Spezifikationen, die nicht jeder Browser beherrscht. Im Code findest du Anhängsel wie -o- für Opera - das signalisiert, dass es da noch keinen browserunabhängigen Standard gibt.

Eine bessere Alternative bietet jQuery. Das ist ein modernes Javascript-Framework. Ich bin da selber gerade erst am ausprobieren und Tutorials am durchstöbern. Aber damit lassen sich so Menüs wie z. B. hier realisieren.

Ich mach dir mal was...

EDIT: Der Code ist sowieso fehlerhaft!
 
Zuletzt bearbeitet:
AW: Dropdownmenü zur Seite ausklappen

Wenn CSS3 und HTML5 in Fahrt gekommen ist, dürfte Java und Flash für Web Development zunehmend uninteressanter werden. :daumen:

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts+
Ultimate Horizontal Drop-Down Menu Demo
CSS Horizontal Drop-Down Menu

Ich muss in meiner Firma per Dreamweaver und ohne jegliche Vorkenntnisse in HTML oder ähnliches fürs Intranet eine Infoplattform basteln, nebenbei versteht sich :P
Zum Vergrößern anklicken....
Ich empfand die erste Lernphase von HTML und CSS ungemein schwierig, aber wenn man die Grundkentnisse beherrscht, ist der Rest ein Kinderspiel. Man braucht eben nur die Ideen. Deshalb empfehle ich dir, erst einmal die Grundkentnisse zu lernen, wenn nicht schon vorhanden. Achso, ich code immer mit Webocton Scriptly. Dreamweaver ist zwar genial, lohnt aber im Grunde genommen nur für Profis und enorm komplexe Seiten.

Lernen: Das neue »Little Boxes« - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Gruß
 
AW: Dropdownmenü zur Seite ausklappen

Danke euch beiden schonmal für eure Antworten, ich lese mich da mal ein. Schon allein damit ich die ganze Sache besser verstehe. Ist für mich persönlich immer ziemlich unbefriedigend wenn man da zwar irgendwas "zurechtpfuscht" aber nicht weiß was man da genau überhaupt gemacht hat.
 
AW: Dropdownmenü zur Seite ausklappen

So, im Anhang habe ich ne zip-Datei mit ner HTML und Javascript-Datei.

Ist nicht ganz perfekt, aber man sieht schön wie unkomplizert das ist!
Wie war das nochmal gemeint?

Hauptmenüpunkte vertikal
Untermenüpunkte horizontal

oder umgekehrt?
 

Anhänge

  • jquery Beispiel.zip
    33,3 KB · Aufrufe: 18
AW: Dropdownmenü zur Seite ausklappen

IE ... ich hasse diesen Browser. Immer muss man für den das ganze Zeug annährend extra coden. :ugly:
 
AW: Dropdownmenü zur Seite ausklappen

Ja so wie das in Deinem Beispiel ist ist das schon supi, aber ich kriegs trotzdem nicht hin XD
Habe mal versucht das in meinen Text einzubauen aber ohne Erfolg. Das einzige was passiert, ist das ich jetzt vor den Menüpunkten aufzählungszeichen habe, aber dafür kein Menü aufpopt :(

<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Navigation</title>
<link rel="stylesheet" type="text/css" href="../links.css">
<script type="text/javascript">
$(document).ready(function(){
$("ul.menu > li > a").click(function(){
$(this).next().slideToggle("fast");
});
});
</script>
<style type="text/css">
ul.submenu
{
display:none;
}
ul.submenu li
{
display:inline;
}
</style>
</head>
<body bgcolor="#d2d2d2">
<ul class="menu">
<li><a href="../TEST/TÜV.jpg" target="Inhalt"><img src="../TEST/Startseite QW.png" alt="Startseite" width="120" height="20" border="0" class="Link"></a></li>

<li><img src="Buttons/Hauptnavigation/Bereiche.gif" alt="Bereiche" width="120" height="20" border="0">

<ul class="submenu">
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Qualitätswesen.html" target="Inhalt">Lieferanten</a></li>
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Qualitätswesen.html" target="Inhalt">Lieferanten</a></li>
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Qualitätswesen.html" target="Inhalt">Lieferanten</a></li>
<li><img src="../Bilder/IE.gif" alt="Liste" width="16" height="18"><a href="../Startseiten/Start_Qualitätswesen.html" target="Inhalt">Lieferanten</a></li>
</ul>
</li>
<li><img src="Buttons/Techniknavigation/Sonstiges.gif" alt="Sonstiges"></li>
</ul>
</body>
</html>


Liegt es vllt daran ich Bilder als Menüpunkte habe? weil da wo bei dir überall <a href="..."> steht ist bei mir ja <img src="...>

Oder ist das ganze irgendwie bei mir totaler Müll?!

Edit: Hab grade mal dein gebautes in meine Datei reinkopiert bzw. damit alles von mir ersetzt --> geht trotzdem nicht.
Ist das Problem evtl. das mein angezeigtes Fenster unterteilt ist?
So sieht das im Original aus:
Intranet.JPG
 
Zuletzt bearbeitet:
AW: Dropdownmenü zur Seite ausklappen

auf die schnelle fällt mir die fehlerhafte verwendung vom target attribut in den links auf ...
valide wäre:
_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen.
Zum Vergrößern anklicken....
siehe SELFHTML: HTML/XHTML / Verweise (Links) / Verweise definieren und gestalten

wenn du die bilder mit verlinkt haben willst, müssen diese in den a tag rein, das alt tag liste an den images ist eigentlich als alternativ text gedacht der angezeigt wird wenn das IE.gif nicht geladen werden kann
<link><inhalt der verlinkt wird></link> das img tag hat nix mit den links zu tun, liegt zwar in der liste, aber nicht als verlinkter menuepunkt, verlinkt ist in dem aktuellen fall nur 'Lieferanten'.
 
Zuletzt bearbeitet:
Einloggen o. Registrieren zum Antworten.

Ähnliche Themen

S
[Leser-Test] Lüfter in der Seitenwand Ja oder Nein?
2 3
Antworten
44
Aufrufe
19K
DasFaultier
DasFaultier
G
Htmltabelle Border entfernen
2 3 4
Antworten
65
Aufrufe
9K
k-b
k-b
DarkMo
[Workshop] XVM-Mod
12 13 14
Antworten
270
Aufrufe
127K
DarkMo
DarkMo
Oben Unten
Zurück