horizontale liste in vertikaler liste

darthfly · 03.02.2010

Ich habe folgenden code:
CSS Datei:
body {
color:#000000;
bgcolor=#FFFFFF;
link=#FF0000;
alink=#FF0000;
vlink=#FF0000;
font-size:15pt;
}

#navigation {
text-align:center; /* Textausrichtung */
margin-top:10px; /* Außenabstand oben */
margin-bottom:10px; /* Außenabstand unten */
margin-left:20px; /* Außenabstand links */
margin-right:15px; /* Außenabstand rechts */

}

#navigation li {
float:left; /* Anordnung links */
background-color:silver; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:15px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
list-style-type:none;
}

html Datei:
<script type="text/javascript">
function switchlayer(Layer_Name)
{
var GECKO = document.getElementById? 1:0 ;
var NS = document.layers? 1:0 ;
var IE = document.all? 1:0 ;

if (GECKO)
{document.getElementById(Layer_Name).style.display=
(document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';}
else if (NS)
{document.layers[Layer_Name].display=(document.layers[Layer_Name].display==
'block') ? 'none' : 'block';}
else if (IE)
{document.all[Layer_Name].style.display=(document.all[Layer_Name].style.display==
'block') ? 'none' : 'block';}
}
</script>

<div id="navigation">
<ul >
<li><a href="untermenu.php" onclick="javascript:switchlayer('Bewerbungsunterlagen');
return false;">Bewerbungsunterlagen</a></span></li>
<ul id="Bewerbungsunterlagen" type="circle" style="display:none;">
<li>
<ul>
<li><a href="untermenu.php" onclick="javascript:switchlayer('person');
return false;">Person</a></li>
<ul id=Person type="circle" style="display:none;">
<li><a href="">Projekt 2</a></li>
<li><a href="">Projekt 2</a></li>
<li><a href="">Projekt 2</a></li>
</ul>
</li>
<li><a href="">Projekt 2</a></li>
<li><a href="">Projekt 2</a></li>
<li><a href="">Projekt 2</a></li>

</ul>
</ul>
</div>

Das Ergebniss ist eine liste die sich beim anklicken des Elementes "Bewerbungsunterlagen" nach rechts aufklickt. Nun enthält diese liste einen weiteren menü Punkt "Person". Hier klappt eine weitere liste auf. Diese soll aber nach unten aufklappen, als art drop down liste. hab zwar schon einiges zum thema pulldown menü gefunden, aber irgenwie weiß ich nicht, was ich daraus auf mein problem übertragen muss. kann mir mal einer nen einfachen tipp geben, wie ich mein code ändern muss?

MyBad · 04.02.2010

AW: horizontale liste in vertikaler liste

Du kannst nicht innerhalb von einer Liste nach einem geschlossenen </li> eine neue <ul> starten.

Also:

FALSCH

HTML:

<ul id="main_menu">
  <li><a href="#">Punkt 1</a></li>
  <li><a href="#">Punkt 2</a></li>
  <ul class="sub_menu_1">
    <li><a href="#">Unterpunkt 1</a></li>
  </ul>
  <li><a href="#">Punkt 3</a></li>
</ul>

RICHTIG

HTML:

<ul id="main_menu">
  <li><a href="#">Punkt 1</a></li>
  <li>
     <a href="#">Punkt 2</a>
     <ul id="sub_menu_1" class="sub_menu">
       <li><a href="#">Unterpunkt 1</a></li>
     </ul>
  </li>
  <li><a href="#">Punkt 3</a></li>
</ul>

Dann kannst du per CSS die <li></li> der Klasse "sub_menu" noch auf display:block; setze und schon hast du die Listenpunkte des Untermenüs wieder untereinander.

Der erste Part hatte nichts mit der Formatierung zu tun... es wäre lediglich falscher Quelltext. Hoffe ich hab dich nicht verwirrt.

darthfly · 04.02.2010

AW: horizontale liste in vertikaler liste

irgendwie klappt deine Antwort nicht.
1.problem wenn ich die <ul> in ein weiteres <li> packe, gibt es ein zusätzliches Grafisches objekt welches stört.

also hab ich die <li> wieder entfernt.

dann hab ich das Untermenü folgendermaßen geändert:
<ul id="person" class="sub_menu" type="circle" style="display:none" ;>
<li><a href="">Projekt a</a></li>
<li><a href="">Projekt b</a></li>
<li><a href="">Projekt c</a></li>
</ul>

und in der css datei steht jetzt folgendes:
#navigation li {
float:left; /* Anordnung links */
background-color:silver; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:15px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
list-style-type:none;
}
#sub_menu li {
background-color:blue; /* Hintergrundfarbe */
border-top:1px grex solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:15px red solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px orange solid; /* Rahmenfarbe unten */
border-right:2px green solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
list-style-type:none;

}
aber die formatierung des submenu li wird nicht übernommen. selbst wenn ich da schreibe
#sub_menu ul li { oder
#sub_menu ul {
wird diese formatierung nicht angezeigt. und wenn ich das <div id=navigation> rausnehmen und die erste ul folgendermaßen änder:
<ul class="navigation"> dann übergeht er die formatierung des
#navigation li und auch die grafischen elemente werden nicht mehr angezeigt.

und wenn ich das float:left: von #navigation li nach #sub_menu ul li verschiebe zeigt er alles untereinander an.

Ach ja:
Wo ich komplett deinen code genommen hab, war das ergebnis fast so wie ich es haben wollte, nur der Drop down effekt fehlt.

darthfly · 04.02.2010

AW: horizontale liste in vertikaler liste

ich hab meinen orginalen code nochmal angesehen, das 2. <ul> war in einem <li> eingeschlossen.

MyBad · 04.02.2010

AW: horizontale liste in vertikaler liste

ja, aber es fehlte das öffnende <li>!

Für den DropDown-Effekt musst du auf JavaScript zurückgreifen. Schau dir mal diese Tutorial an. Es zeigt einen DropDown-Effekt mit jQuery.

darthfly · 04.02.2010

AW: horizontale liste in vertikaler liste

und so sieht es aus, wenn ich meinem code das hauptmenu ul auch noch in ein <li> packe.

MyBad · 04.02.2010

AW: horizontale liste in vertikaler liste

Warum willst du denn das Hauptmenü noch von einem li umschließen lassen????

Du brauchst nur die submenüs in die jeweiligen li des Hauptmenü zu packen. Schau dir doch einfach mal das Tutorial an, dass ich gerade verlinkt habe. Da steht der komplette HTML und CSS Aufbau beschrieben.

darthfly · 04.02.2010

AW: horizontale liste in vertikaler liste

so sah mein orginal code aus
...
<div id="navigation">
<ul > 1.ul
<li><a href="untermenu.php" onclick="javascript:switchlayer('Bewerbungsunterla gen');
return false;">Bewerbungsunterlagen</a></li>
<ul id="Bewerbungsunterlagen" type="circle" style="display:none;"> 2.ul
<li>
<ul> 3.ul
<li><a href="untermenu.php" onclick="javascript:switchlayer('person');
return false;">Person</a></li>
<ul id=Person type="circle" style="display:none;"> 4.ul
...
er macht ja das was er soll, nur nicht so wie ich es will. das zwischen dem 1+2 und 3 und 4 kein li steht muss wohl am javascript liegen, das hab ich selber so übernommen, nicht selber geschrieben. das sorgt meines wissens für den drop down effekt.

darthfly · 04.02.2010

AW: horizontale liste in vertikaler liste

vielleicht geht beides auch gar nicht. Das heißt entweder drop down effekt nach unten ODER zur seite.
unter finde ich nix

MyBad · 04.02.2010

AW: horizontale liste in vertikaler liste

darthfly schrieb:
so sah mein orginal code aus
...
<div id="navigation">
<ul > 1.ul
<li><a href="untermenu.php" onclick="javascript:switchlayer('Bewerbungsunterla gen');
return false;">Bewerbungsunterlagen</a></li>
<ul id="Bewerbungsunterlagen" type="circle" style="display:none;"> 2.ul
<li>
<ul> 3.ul
<li><a href="untermenu.php" onclick="javascript:switchlayer('person');
return false;">Person</a></li>
<ul id=Person type="circle" style="display:none;"> 4.ul
...
er macht ja das was er soll, nur nicht so wie ich es will. das zwischen dem 1+2 und 3 und 4 kein li steht muss wohl am javascript liegen, das hab ich selber so übernommen, nicht selber geschrieben. das sorgt meines wissens für den drop down effekt.

Der ganze Code ist voller Fehler. Von welcher Quelle hast du den denn? Mach es so wie im bereits verlinkten Tutorial oder halte dich an den Aufbau den ich dir geschrieben habe. Javascript ist nur für die Darstellung des DropDowns bei einem Event (z. B. MouseOver) zuständig. Dein Originalquelltext ist allerdings völliger Müll. Das störende Element ensteht durch den fehlerhaften Quelltext.

EDIT:
Ich habe eben noch ein mal flott etwas erstellt. Ist nicht optimal sondern soll nur als kleines Beispiel dienen:

HTML (innerhalb des Body):

HTML:

<ul id="main_menu">
    
    	<li><a href="#">Menuepunkt 1</a></li>
        
        <li>
        	<a href="#" onclick="show_menu('sub_menu_1'); return false;">Menuepunkt 2 mit Sub-Navigation</a>
            <ul id="sub_menu_1" class="sub" style="display: none;">
            
            	<li><a href="#">Submenuepunkt 1</a></li>
                
                <li><a href="#">Submenuepunkt 2</a></li>
                
                <li><a href="#">Submenuepunkt 3</a></li>
                
            </ul>
        </li>
        
        <li><a href="#">Menuepunkt 3</a></li>
    
    </ul>

CSS:

HTML:

#main_menu{}
#main_menu li{ float: left; margin: 0 25px 0 0; }

#main_menu li .sub{}
#main_menu li .sub li{ clear: both; }

JavaScript (Einblendung des Submenues bei klick auf "Menuepunkt 1")

HTML:

function show_menu(id){

	var sm = document.getElementById(id);
	
	sm.setAttribute("style", "display:block;", false); // Submenue anzeigen

}

Wie bereits erwähnt. Das ist nicht optimal. Am besten du nutzt ein JavaScript-Framework (z. B. jQuery). Es bietet einfachere Möglichkeiten.

darthfly · 04.02.2010

AW: horizontale liste in vertikaler liste

Jetzt klappt es fast so wie ich es will, nur 2 sachen mußte ich ändern:
1. deine funktion klappte bei mir gar nicht.Mit welchem browser hast du dir das anzeigen lassen? die funktion die ich vorher hatte, hat das selbe gemacht wie deine, nur bei mir hat die fuktion vorher den Browser abgefragt und dementprechend die if anweisung gesteuert.

2.in deiner zeile:
<a href="#" onclick="show_menu('sub_menu_1'); return false;">Menuepunkt 2 mit Sub-Navigation</a>
war nen syntaxfehler:
<a href="#" onclick="javascript:show_menu('sub_menu_1'); return false;">Menuepunkt 2 mit Sub-Navigation</a> .

So klappt es fast wie ich es will.

Das prob war nicht die liste sondern wohl eher die css datei. ich hab mit css kaum erfahrung. dies ist mein erstes projekt wo ich mit css arbeite, hab vorher immer ohne css gearbeitet.

Muss noch ein bißchen rumbasteln, den eigentlich wolte ich, das sich erst ein menu nach rechts öffnet und die punkte nebeneinander stehen und die untermenüs sich nach unten öffnen und untereinander stehen.

MyBad · 04.02.2010

AW: horizontale liste in vertikaler liste

Wie schon geschrieben, nutze am besten ein JS-Framework wie jQuery. Damit hast du viele Möglichkeiten und kannst dir auch diese doofen Browserabfragen sparen.

Ich arbeite mit dem FF. Soviel ich weiß ist es auch nicht nötig "javascript:" vor den Funktionsaufruf zu schreiben. Aber JavaScript ist auch nicht so 100%ig meine Welt.