Untermenüs verbergen-ich kriegs nicht hin

LamaGeli · 24.05.2011

Irgendwo muss da wohl noch "display: none" hin............aber wo.
Hier der CSS Code:

HTML:

@charset "utf-8";


body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(Images/MilkwayEarthBG.jpg);
    background-repeat: no-repeat;
    background-color: #000;
}    


ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;    
    padding-right: 15px;
    padding-left: 15px; 
}
a img { 
    border: none;
}

a:link {
    color:#414958;
    text-decoration: underline; 
}
a:visited {
    color: #4E5869;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}


.container {
    width: 80%;
    max-width: 1260px;
    min-width: 720px;
    font-size: 12px;
    background-position: center top;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    background-size: 100%;
}

.header {
    display: block;
    padding: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 20px #CACACA;
    -webkit-box-shadow:inset 0 0 20px #CACACA;
    box-shadow:inset 0 0 20px #CACACA;
    background-image: url(Images/TW_Text2.png);
    background-position: right center;
    background-repeat: no-repeat;
    border: 2px solid #666
}

    

.sidebar1 {
    float: left;
    width: 22%;
    color: #FFF;
    margin-top: 15px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 20px #CACACA;
    -webkit-box-shadow:inset 0 0 20px #CACACA;
    box-shadow:inset 0 0 20px #CACACA;
    background: #000000; /* Fallback IE 6-8 */
    background: rgba(0, 0, 0, .6);
    border: 2px solid #666;
    padding-top: 15px;
}
.content {
    float: right;
    width: 73%;
    padding: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 20px #CACACA;
    -webkit-box-shadow:inset 0 0 20px #CACACA;
    box-shadow:inset 0 0 20px #CACACA;
    background: #000000; /* Fallback IE 6-8 */
    background: rgba(0, 0, 0, .6);
    color: #FFF;
    margin-top: 15px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
    border: 2px solid #666;
}


.content ul, .content ol { 
    padding: 0 15px 15px 40px; 
}


ul.nav {
    list-style: none; 
    margin-bottom: 15px; 
}
ul.nav li {
    list-style-type: none;
    
}

ul.nav a, ul.nav a:visited { 
    display: block;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 12px #CACACA;
    -webkit-box-shadow:inset 0 0 12px #CACACA;
    box-shadow:inset 0 0 12px #CACACA;
    border: 1px solid #666;/* Fallback IE 6-8 */
    border: 1px solid rgba(0, 0, 0, .6);
    
    text-decoration: none;
    color: #9CF;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    margin-top: 5px;
    margin-right: 8px;
    margin-bottom: 5px;
    margin-left: 8px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
    color:  #FFF;
    background: #009; /* Fallback IE 6-8 */
    background: rgba(0, 0, 153, .6);
    -moz-box-shadow:inset 0 0 20px #9CF;
    -webkit-box-shadow:inset 0 0 20px #9CF;
    box-shadow:inset 0 0 20px #9CF;
}
  

.footer {
    padding: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 20px #CACACA;
    -webkit-box-shadow:inset 0 0 20px #CACACA;
    box-shadow:inset 0 0 20px #CACACA;
    clear: both; 
    color: #FFF;
    border: 2px solid #666;
    width: 73%;
    float: right;
}


.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

...und hier der html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D_Animation</title>
<link href="Stylesheet_Easy.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
  <div class="header"><a href="#"><img src="Images/Logo_Ani1RKl.gif" id="Insert_logo"  /></a> 
    <!-- end .header --></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">3D Animation</a>
      <ul>
      <li><a href="#">3D_Untermenü_1</a></li>
      <li><a href="#">3D_Untermenü_2</a></li>
      <li><a href="#">3D_Untermenü_3</a></li>
      <li><a href="#">3D_Untermenü_4</a></li>
    </ul>
      <li><a href="#">360° Präsentation</a>
      <ul>
      <li><a href="#">360°_Untermenü_1</a></li>
      <li><a href="#">360°_Untermenü_2</a></li>
    </ul>
      <li><a href="#">Impressum</a></li>
    </ul>
    <p> Diese Links sind noch nicht aktiv</p>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Headline</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, </p>
    <h2>little Headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, </p>
    <h3>ittleHeadline</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, </p>
    
    </div>
  <div class="footer">
    <p>Hier kommen die Füße rein :-) </p>
    <!-- end .footer --></div>
  <!-- end .container --></div>

</body>
</html>

Es wär ganz nett, wenn jemand die Lösung für mich wüsste.

Die Untermenüs sollen beim klicken des entsprechenden Obermenüs zum Vorschein kommen.

Danke
Geli

Myhar · 24.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Prinzipiell geht das verstecken der Untermenüs relativ einfach mit folgendem CSS:

HTML:

ul ul{display:none}

Jedoch musst du noch deine HTML Fehler ausbessern, bevor das funktioniert. Du schließt deine <li> Tags nicht.

HTML:

<ul>
    <li>blabla
         <ul><li>Untermenü</li><li>Untermenüpunkt2</li></ul>
    </li>
    <li> blabla2</li>
</ul>

Zum anzeigen der Menüpunkte kannst du mit

HTML:

ul li:hover ul {display:block}

oder:
ul li:focus ul{display:block}

arbeiten, je nachdem was du für einen Effekt erzielen willst
Informiere dich, wofürstehen

L. G.

LamaGeli · 24.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Danke,
die HTML Fehler hab ich ausgebessert.

Dennoch krieg ich es nicht hin mit dem verbergen.
Entweder sind alle Menüs (auch die Oberpunkte) verschwunden und auch durch kein "Display:block" wieder herzuzaubern oder alle, samt der Untermenüs sind zu sehen.

Bitte kann mir jemand sagen wo und wie genau in meinem oben gezeigtem Stylesheet, ich die beiden Anweisungen "Display:block" und "Display:none" eintragen muss.

Danke,
Geli

Myhar · 24.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Du musst die CSS Anweisung erst erstellen:
ul ul {display:none} blendet alle ul, welche in einer ul sind, aus.
wenn du sie zB bei :hover wieder einblenden willst, dann geht das mit
ul li:hover ul {display:block}

L. G.

LamaGeli · 24.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Super tausend Dank,

es funktioniert!!!

Myhar · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Das freut mich, wenn es klappt. Man muss sich seine CSS Selektoren eben nur selber schreiben, dann funktioniert es.
Und ich sehe gerade, ich habe einen Fehler in meinem oberen Post. Es müsste doch eigentlich ul li:hover ul heißen (wenn ich mich in aller frühe nicht schon wieder irre ^^). Das bessere ich auch noch aus.

L. G.

hubspe · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Myhar schrieb:
Das freut mich, wenn es klappt. Man muss sich seine CSS Selektoren eben nur selber schreiben, dann funktioniert es.

display:none ist ebenso wie visibility:hidden leider eine untaugliche Methode, um Untermenüs auszublenden, weil es die Screenreader dann nicht mehr vorlesen.

Da gibts doch schon lange bessere Methoden um Untermenüs ein/auszublenden.

Myhar · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Auch wenn der von dir zitierte Teil meines Beitrages irgendwie nichts mit deiner Aussage zu tun hat, du hast vollkommen Recht. Jedoch habe ich das Gefühl, dass LamaGeli erst am lernen von CSS und HTML ist und deshalb auch einmal mit der 'einfachen' Lösung leben kann. Das es in Hinblick auf Accessibility besser ist, Untermenüs mit zB einem negativen left-Wert aus dem viewport zu entfernen und bei :hover wieder an ihre ursprüngliche Position zu geben ist richtig.

Also für alle die es interessiert:

HTML:

ul ul{position:absolute;left:-9999em}
ul li:hover ul{position:relative;}

So in etwa würde eine screenreader freundlichere Lösung aussehen.
L. G.

hubspe · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Myhar schrieb:
Jedoch habe ich das Gefühl, dass LamaGeli erst am lernen von CSS und HTML ist und deshalb auch einmal mit der 'einfachen' Lösung leben kann. Das es in Hinblick auf Accessibility besser ist, Untermenüs mit zB einem negativen left-Wert aus dem viewport zu entfernen und bei :hover wieder an ihre ursprüngliche Position zu geben ist richtig.

normal ist ein Dropdownmenü ja nix für Anfänger, weil man da gewisse basics schon verstanden haben muss.
Jemand deshalb eine anfängergerechte Lösung zu präsentieren, die eine Besuchergruppe ausschließt, davon halte ich ehrlichgesagt nicht so viel.

Das mit dem display:none; setzt sich dann nämlich meiner Erfahrung nach fest und wird auch im fortgeschrittenen Stadium nicht mehr geändert.

Myhar schrieb:
Also für alle die es interessiert:

HTML:

ul ul{position:absolute;left:-9999em} ul li:hover ul{position:relative;}

So in etwa würde eine screenreader freundlichere Lösung aussehen.
L. G.

naja, dann aber doch eher so:

PHP:

ul ul  {
    position:absolute;
    left:-9999em
}
 ul li:hover ul  {
    left:auto;
}

jackprince · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Der auto Wert wird meines Wissen nicht von allen interpretiert.
Auch scheint vergessen zu werden das ich mit einer Lösung die sich
auf "Hover" verlässt welches nicht auf einem Anker liegt, weit mehr
Nutzer ausschließe als ein paar Screenreader.

Und selbst wenn man nicht an alte IE denkt, wäre mir neu das Smartphones
jetzt "hover" oder "mouseover" auslösen könnten.

Das Konzept sollte also nochmal überdacht werden.

Myhar · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

hubspe schrieb:
normal ist ein Dropdownmenü ja nix für Anfänger, weil man da gewisse basics schon verstanden haben muss.
Jemand deshalb eine anfängergerechte Lösung zu präsentieren, die eine Besuchergruppe ausschließt, davon halte ich ehrlichgesagt nicht so viel.

Das mit dem display:none; setzt sich dann nämlich meiner Erfahrung nach fest und wird auch im fortgeschrittenen Stadium nicht mehr geändert.

Das hängt mit der Motivation zusammen, wie sehr man sich weiterbilden will.
Ich habe auch zuerst einmal das Prinzip mit dem display:none und display:block verstanden und jetzt achte ich trotzdem auf die Zugänglichkeit bei Webseiten.
Aber prinzipiell hast du Recht. Eine Besuchergruppe bei einer Webseite auszuschließen ist prinzipiell zu vermeiden.

hubspe schrieb:
naja, dann aber doch eher so[s.o]

Danke dir vielmals für die Richtigstellung meines Codes. Auch hier hast du Recht. (Ich könnte mich auf zu wenig Schlaf und so ausreden :muede: )

Edit:
wird wohl nicht von allen Browsern unterstützt?
Was die klugen Telefone (smartphones) angeht:
Für die gibt es doch eh eine App ;-P
Ernsthaft: Wenn man mit dem Finger drüberfährt, ist das dann kein :hover? (Besitze selber kein Smartphone). Oder ist das ein :focus Event? Dann kann man das CSS um den :focus Befehl erweitern. (Irgendeine Pseudoklasse muss es da doch geben?)

Und ja li:hover unterstützt der IE6 nicht, jedoch kann man ihm das mittels JS beibringen. Und wenn man es wirklich perfekt machen will, dann kann man standardmäßig alle Menüs anzeigen und erst per JS eine Klasse hinzufügen, durch die dann die Menüs per CSS ein- und ausgeblendet werden.

L. G.

hubspe · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

jackprince schrieb:
Der auto Wert wird meines Wissen nicht von allen interpretiert.

eigentlich schon.
Ältere IE'S haben z.B. bei Positionsangaben von HG-Grafiken unter bestimmten Voraussetzungen ein Problem wenn da z.B. left top steht.
Sie mögen dann Zahlen und wenn es stattdessen 0 0 ist.

jackprince schrieb:
Auch scheint vergessen zu werden das ich mit einer Lösung die sich
auf "Hover" verlässt welches nicht auf einem Anker liegt, weit mehr
Nutzer ausschließe als ein paar Screenreader.
Und selbst wenn man nicht an alte IE denkt, wäre mir neu das Smartphones
jetzt "hover" oder "mouseover" auslösen könnten.

Ja der IE6 kennt :hover nur in Verbindung mit a.
Für den gibts dann den Zuckerfisch.
Beispiel Dropdown

jackprince schrieb:
Das Konzept sollte also nochmal überdacht werden.

Das Konzept der gehovert erscheinenden Sublisten finde ich prinzipiell schei.......
Wenn Submenüs dann sollten die in einer Seitenspalte (oder darunter als Dropline) nach dem Klick auf einen Submenüpunkt stehenbleiben.

Für meine persönlichen Sites käme ein Dropdown was nach dem enthovern wieder verschwindet keinesfalls in Frage.

Myhar schrieb:
Das hängt mit der Motivation zusammen, wie sehr man sich weiterbilden will.

jau, volle Zustimmung.

LamaGeli · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Myhar schrieb:
Und ich sehe gerade, ich habe einen Fehler in meinem oberen Post. Es müsste doch eigentlich ul li:hover ul heißen (wenn ich mich in aller frühe nicht schon wieder irre ^^). Das bessere ich auch noch aus.

L. G.

Ja, das hatte ich schon gemerkt und es mit rumprobieren hinbekommen, als es beim ersten mal nicht klappte

Nun, nachdem es funktioniert, gefällt es mir leider nicht, weil das Untermenü nicht stehen bleibt, sondern nur beim Mausdrüberfahren erscheint.

Ich habe jetzt einen Beispielcode (findet sich hier) gefunden, für das was ich will und werde mal probieren, ob sich das mit meinem Layout verträgt.
Dafür müsste ich aber, so wie ich das versteh, meine ganze bisherige Navigation löschen.
Falls noch jemand weiß, wie ich es mit meinem jetzigen CSS Code so hinbekomm, wie in dem Beispiel, würds mich sehr freuen.

PHP geht bei mir nicht, weils nicht vom Webhoster unterstüzt wird.

Und ja, Ihr habt recht, eigentlich hab ich gar keine Ahnung von CSS. Meine vorigen Webseiten hab ich ausschließlich mit Tabellen gemacht.

Danke,
Geli

Myhar · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Dann kann man dir nur gratulieren, dass du das Problem selber gelöst hast. Sofern du Probleme mit CSS hast wäre es praktisch zu wissen, was deine Probleme konkret sind, dann kann man dir das vielleicht verständlich erklären. Ansonsten findet man auch genügend Material zu CSS bei der Suchmaschine seiner Wahl.

Sofern ich es verstanden habe möchtest du, dass die Navigation auch bei einem Klick sichtbar ist. Das ist mittels JS zu realisieren (Bei dem von dir verlinkten Bsp wird jedes mal eine neue Seite geladen)
Fertiges JS kann ich dir hier gerade nicht präsentieren, aber so kann man es machen:
Jedes mal, wenn der Benutzer auf einen Link klickt, kann man eine Klasse von dem li , welches gerade angeklickt wurde, ein- und ausschalten. Je nach Klasse wird dann eine andere Position im CSS File definiert.
Man kann natürlich auch die Position des ul Elements anstatt der Klasse verändern. Beachten muss man dabei, dass man eventuell bereits sichtbare Menüs wieder ausblendet.

Falls ich dich missverstanden habe und du möchtest, dass auf einer Seite ein bestimmtes Untermenü standardmäßig eingeblendet wird, dann ist das natürlich auch möglich mithilfe von Klassen.

L. G.

LamaGeli · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Ein passendes Javascript Menü hab ich hier gefunden.

Das grundsätzliche Aussehen anzupassen ist wohl kein Problem, aber wie stell ich es an, dass es nicht irgendwo auf der Seite, sondern im container "sidebar" erscheint?
Welche Bezeichnungen müsste ich dann benutzen, damit ich das Aussehen bei aktivem Link bzw. hover ändern kann, denn die Funktion steckt ja jetzt im Javascript, oder?

Danke,
Geli

LamaGeli · 25.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Das grundsätzliche Aussehen anzupassen ist wohl kein Problem, aber wie stell ich es an, dass es nicht irgendwo auf der Seite, sondern im container "sidebar" erscheint?

Das hat sich wundersamerweise irgendwie selbst erledigt. Es ist an die richtige Stelle gelangt.

Jetzt würd ich gerne noch das Javascript auslagern.
Ist das richtig, in das Html Dokument folgendes:
<script type="text/javascript" src="Dateipfad zum script"></script>
in die <Head> Zeile zu schreiben und dann funktioniert das von alleine?

Danke
Geli

Myhar · 26.05.2011

AW: Untermenüs verbergen-ich kriegs nicht hin

Ja, damit liegst du richtig.

L. G.