Animiertes Menü

Status
Nicht offen für weitere Antworten.
re: Animiertes Menü

Und ich sage dir, das erste Submenü wird sehr wohl angezeigt, nur liegt es unter dem Zweiten, und ist durch die Hintergrundfarben verdeckt.

Überzeuge dich mit diesem Stylesheet, in dem ich alle Angaben zur Hintergrundfarbe auskommentiert habe:

Code:
/* CSS Document */
 #navcontainer { }
#navcontainer a { text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;}


#navcontainer ul
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}

#navcontainer li { display: inline; }

/*1st level elements*/
#navcontainer ul
{
border-top: 0px solid #36c;
border-bottom: 1px solid #000000;
/*background-color:#666666;*/
padding: 1px 0;
margin-bottom: 0em;
}

#navcontainer li { margin: 0 0 0px; }

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
/*background-color: #666666;*/
border: 0px solid #000000;
color: #000;
padding: 0px 5px;
font-size:13px;
}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{
/*background-color:#950000;*/
border: 0px solid black;
color: #000;
}

/*current Link*/
#navcontainer ul a#current,
#navcontainer ul a#current:link,
#navcontainer ul a#current:visited { font-weight: bold; }

/*Second and subsequent levels*/
#navcontainer ul ul
{
font-size: 80%;
position: absolute;
top: 19px;
left: 0;
width: 100%;
border-top: none;
/*background-color:#950000;*/
}

#navcontainer ul ul li { display: inline; }

#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
/*background-color:#950000;*/
border: 0px solid #95b1bb;
color: #000;
}

#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
/*background-color:#950000;*/
border: 0px solid black;
color: #000;
}

/*current Link*/
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visited { font-weight: bold; }

Das zweite Submenü lässt sich mit der CSS-Eigenschaft display:none ausblenden.

Zudem muß eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben / verwendet werden.

Code:
<div id="navcontainer">
     <ul id="navlist">
         <li id="active"><a href="#" id="current">Aktuelles</a>
             <ul>
                 <li id="subactive"><a href="#" id="subcurrent">News</a></li>
                 <li><a href="#">Termine</a></li>
                 <li><a href="#">FTC Huus</a></li>
             </ul>
         </li>
         <li><a href="#">Fussball</a>
                <ul style="display:none;">
                    <li><a href="#">I.Herren</a></li>
                    <li><a href="#">II.Herren</a></li>
                    <li><a href="#">A-Jgd</a></li>
                    <li><a href="#">B-Jgd</a></li>
                    <li><a href="#">C-Jgd</a></li>
                    <li><a href="#">D-Jgd</a></li>
                    <li><a href="#">E-Jgd</a></li>
                    <li><a href="#">F-Jgd</a></li>
                    <li><a href="#">G-Jgd</a></li>
                </ul>
         </li>
     </ul>
</div>
 
re: Animiertes Menü

Tatsache du hast Recht. :rolleyes:

Hm wie meinst du das mit dem einmaligen Vergeben.
Das 2te Untermenü sollte ja eigentlich erst aufgerufen werden, wenn ich auf die 2te Kategorie klicke.
Ich steig da nicht so durch.
Bitte noch einen Tip :)

Gruß
Moleman
 
re: Animiertes Menü

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="menu.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
<!--
var maincat = new Array();
maincat[0] = 'subnav1';
maincat[1] = 'subnav2';
// maincat[2] = 'subnav3';
// usw.

function show(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
//-->
</script>
</head>
<body>
<div id="navcontainer">
     <ul id="navlist">
         <li id="active"><a href="#" id="current" onclick="show('subnav1');">Aktuelles</a>
             <ul id="subnav1" style="display:block;">
                 <li id="subactive"><a href="#" id="subcurrent">News</a></li>
                 <li><a href="#">Termine</a></li>
                 <li><a href="#">FTC Huus</a></li>
             </ul>
         </li>
         <li><a href="#" onclick="show('subnav2');">Fussball</a>
                <ul id="subnav2" style="display:none;">
                    <li><a href="#">I.Herren</a></li>
                    <li><a href="#">II.Herren</a></li>
                    <li><a href="#">A-Jgd</a></li>
                    <li><a href="#">B-Jgd</a></li>
                    <li><a href="#">C-Jgd</a></li>
                    <li><a href="#">D-Jgd</a></li>
                    <li><a href="#">E-Jgd</a></li>
                    <li><a href="#">F-Jgd</a></li>
                    <li><a href="#">G-Jgd</a></li>
                </ul>
         </li>
     </ul>
</div>
</body>
</html>
Du hast die IDs #current, #subnavlist, #subcurrent jeweils doppelt verwendet, was nicht zulässig ist, und beispielsweise beim Einsatz von Javascript zu Fehlermeldungen führt; deshalb eindeutig. Deine ID-Card gibt's ja auch nur einmal ;)
 
re: Animiertes Menü

Ich glaube auf den Code wär ich nicht so schnell gekommen...
Danke schön schon mal.
aber eine Frage noch, wäre es auch möglich schon beim scroll-over über den Menüpunkt die Unterpunkte anzuzeigen?

Danke und Gruß
Moleman
 
re: Animiertes Menü

Hierfür hatte dir Gumbo in seinem Post doch schon einen interessanten Link empfohlen ;)

Ansonsten ersetze mal den onclick-Eventhandler durch onmouseover.
 
re: Animiertes Menü

Ok danke, habe es hinbekommen.
Ich bedanke mich bei allen und erkläre das Thema für erledigt!

Gruß
Moleman2
 
re: Animiertes Menü

Hi,

hier das aktuelle Menü:
http://www.csc-hollen.de/ftc/menutest.htm

ok es sind nun doch noch 2 Fragen offen.

1.Wie bekomme ich es hin, dass die obere Kategorie rot bleibt, wenn ich einen Link dadrunter der aktiven Kategorie gewählt habe

und

2. Wie schaffe ich es, dass das Untermenü nie ganz verschwindet. (Das passiert, wenn ich über eine obere Kategorie 2mal fahre.

Danke und Gruß
Moleman2
 
re: Animiertes Menü

Zu deiner ersten Frage fällt mir derzeit keine Lösung ein.

Das Problem mit den Untermenüs bekommst du folgendermaßen in den Griff:

Code:
function show(divid)
{
        if(document.getElementById(divid).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }

                document.getElementById(divid).style.display="block";
        }
        else
        {
                document.getElementById(divid).style.display="block";
        }
}
Da sich ein animiertes Menü mit der Auszeichnungssprache HTML alleine nicht realisieren lässt, und das Thema Javascript-lastig ist, schiebe ich den Thread mal in das entsprechende Board.
 
re: Animiertes Menü

Hi,

wenn der Linkpunkt rot bleiben soll, wenn er aktiv ist, speicherst Du das aktuell aktive Objekt in einer Variablen. Wird
die Funktion erneut aufgerufen, prüfst Du ob es sich um das gleiche Objekt handelt (Farbe nicht ändern) oder um ein
anderes (Farbe zurücksetzen, neues Element aktivieren).

Hierfür musst Du allerdings zunächst das auslösende Link-Objekt ermittelt. Im Beispiel erledigt die Funktion getLink
diese Aufgabe.

Damit kannst Du nun beim Seitenaufruf im onload-Event angeben, welcher Menüpunkt aktiv sein soll (im Bsp. Punkt drei).
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
/* CSS Document */
#navcontainer { }
#navcontainer a {
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF
}

#navcontainer ul
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}

#navcontainer li { display: inline; }

/*1st level elements*/
#navcontainer ul
{
border-top: 0px solid #36c;
border-bottom: 0px solid #000000;
padding: 1px 0px;
margin-bottom: 0em;
}

#navcontainer li {
margin: 0 0 0px;
background: url(bg.gif);
}

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
border: 0px solid #000000;
color: #FFFFFF;
padding: 0px 8px;
font-size:13px;
}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{
background-color:#990000;
border: 0px solid black;
color: #FFFFFF;
}

/*current Link*/
#navcontainer ul a#current,
#navcontainer ul a#current:link,
#navcontainer ul a#current:visited { font-weight: bold }

/*Second and subsequent levels*/
#navcontainer ul ul
{
font-size: 80%;
position: absolute;
top: 19px;
left: 0;
width: 100%;
border-top: none;
color:#FFFFFF;
background-color:#990000;
padding: 2px 0px;
}

#navcontainer ul ul li { display:inline}

#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
background-color:#990000;
color: #FFFFFF;
}

#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
background-color:#990000;
color: #FFFFFF;
}

current Link
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visited { font-weight:bold}
 //-->
</style>

<script type="text/javascript">
<!--
var maincat = new Array();
maincat[0] = 'subnav1';
maincat[1] = 'subnav2';
maincat[2] = 'subnav3';
maincat[3] = 'subnav4';
maincat[4] = 'subnav5';
maincat[5] = 'subnav6';
maincat[6] = 'subnav7';
// usw.


var objOld = null;
function show(divid){
  if(document.getElementById(divid).style.display=="none"){
    for(i=0;i<maincat.length;i++){
      document.getElementById(maincat[i]).style.display = "none";
    }

    // Auslösendes Link-Element ermitteln
    objLink = getLink(divid);

    document.getElementById(divid).style.display = "block";

    if(objOld != objLink)
    	objLink.style.background = "#990000";
    if(objOld != null)
    	objOld.style.background = "";

    objOld = objLink;
  }
}

// Auslösenden Link-Objekt zur aktuellen ID ermitteln
function getLink(strID){
  var objTmp = document.getElementById(strID).previousSibling;

  // Solange prüfen bis der vorherige Knoten ein Link ist
  while(objTmp.nodeName.toLowerCase() != "a"){
    objTmp = objTmp.previousSibling;
  }

  return objTmp;
}
//-->
</script>
</head>
<body onload="show('subnav3');">
<div id="navcontainer">
     <ul id="navlist">
         <li id="active"><a href="#" onclick="getLink('subnav1');" id="current" onmouseover="show('subnav1');">Aktuelles</a>

             <ul id="subnav1" style="display:block;">
                 <li id="subactive"><a href="#" id="subcurrent">News</a></li>
                 <li><a href="#">Termine</a></li>
                 <li><a href="#">FTC Huus</a></li>
             </ul>
         </li>
         <li><a href="#" onmouseover="show('subnav2');">Fussball</a>

                <ul id="subnav2" style="display:none;">
                    <li><a href="#">I.Herren</a></li>
                    <li><a href="#">II.Herren</a></li>
                    <li><a href="#">A-Jgd</a></li>
                    <li><a href="#">B-Jgd</a></li>
                    <li><a href="#">C-Jgd</a></li>

                    <li><a href="#">D-Jgd</a></li>
                    <li><a href="#">E-Jgd</a></li>
                    <li><a href="#">F-Jgd</a></li>
                    <li><a href="#">G-Jgd</a></li>
                </ul>
         </li>
		  <li><a href="#" onmouseover="show('subnav3');">Volleyball</a>

                <ul id="subnav3" style="display:none;">
                    <li><a href="#">I.Damen</a></li>
                    <li><a href="#">A-Jgd</a></li>
                    <li><a href="#">B-Jgd</a></li>
                    <li><a href="#">C-Jgd</a></li>
                </ul>
         </li>

		 <li><a href="#" onmouseover="show('subnav4');">Tennis</a>
                <ul id="subnav4" style="display:none;">
                    <li><a href="#">Mitglieder</a></li>
                    <li><a href="#">Gelände</a></li>
                    <li><a href="#">Trainingszeiten</a></li>
                </ul>
         </li>

		 <li><a href="#" onmouseover="show('subnav5');">Gymnastik</a>
                <ul id="subnav5" style="display:none;">
                    <li><a href="#">Dienstag</a></li>
                    <li><a href="#">Mittwoch</a></li>
                </ul>
         </li>
		 <li><a href="#" onmouseover="show('subnav6');">Community</a>

                <ul id="subnav6" style="display:none;">
                    <li><a href="#">Gästebuch</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Chat</a></li>
                </ul>
         </li>
		 <li><a href="#" onmouseover="show('subnav7');">Impressum</a>

                <ul id="subnav7" style="display:none;">
                    <li><a href="#">Disclaimer</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
         </li>
     </ul>
</div>
</body>
</html>
Ciao
Quaese
 
re: Animiertes Menü

Hallo,

ja schon mal vielen Dank. Das klappt super soweit.
Allerdings habe ich jetzt noch ein letztes Problem.

Und zwar soll das Untermenü einer Kategorie solange zu sehen sein, bis ich eine andere Oberkategorie anklicke.
Momentan verschwindet das Untermenü wenn ich über eine andere Oberkategorie fahre.

Gruß
Moleman
 
Status
Nicht offen für weitere Antworten.
Zurück