• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dynamische Schnellleiste (eng:Drop-down menues)

Imbericle

Imbericle

Blogger
Ich würd auf meiner Seite gerne Dynamische Schnellleisten einbauen
sollte so aussehen(nur wagrecht angeordnet.) Klick drauf!
Ich habe deswegen da son Code zusammen geschnippselt, der zusammen gesetzt so aussieht:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>




<script type="text/css"
   <!--
   li:hover ul { display: block; }

   ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 150px;
        border-bottom: 1px solid #ccc;
        }

        ul li a {
        display: block;
        text-decoration: none;
        color: #777;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        border-bottom: 0;
        }

        li ul {
        position: absolute;
        left: 149px;
        top: 0;
        display: none;
        }

        ul li {
        position: relative;
        }

        ul li a {
        display: block;
        text-decoration: none;
        color: #777;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        border-bottom: 0;
        }
  
   -->
</script>

</head>


<body>
<ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Beispiel 1 mit Dynamischer Leiste</a>
      <ul>
        <li><a href="#">Untermenü Beispiel 1.1</a></li>
        <li><a href="#">Untermenü Beispiel 1.2</a></li>
        <li><a href="#">Untermenü Beispiel 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Beispiel 2 mit Dynamischer Leiste</a>
      <ul>
        <li><a href="#">Untermenü Beispiel 2.1</a></li>
        <li><a href="#">Untermenü Beispiel 2.2</a></li>
        <li><a href="#">Untermenü Beispiel 2.3</a></li>
        <li><a href="#">Untermenü Beispiel 2.4</a></li>
        <li><a href="#">Untermenü Beispiel 2.5</a></li>
      </ul>
    </li>
    <li><a href="#">Beispiel 3 mit Dynamischer Leiste</a>
      <ul>
        <li><a href="#">Untermenü Beispiel 3.1</a></li>
        <li><a href="#">Untermenü Beispiel 3.2</a></li>
        <li><a href="#">Untermenü Beispiel 3.3</a></li>
        <li><a href="#">Untermenü Beispiel 3.4</a></li>
      </ul>
    </li>
  </ul>
    <script type="text/javascript">
    startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
        (" over", "");
   }
   }
  }
 }
}
<ul id="nav">
window.onload=startList;

</script>
</body>
</html>


Im Browser sieht es allerdings so aus:
tte_Dynamische_leiste.jpg



Kann mir jemand der sich gut auskennt mir sagen warum es net funzt?
 
Dein <script>-Tag ist nicht geschlossen, das ">" fehlt. Daher gehören die ganzen CSS-Angaben zum Tag.
 
Ehm ich hab die Klammern des CSS zugemacht, doch es hat nix gebracht
Ich hab's mir jetzt noch xmal durchgelesen doch nichts gefunden.
Hier der verbesserte Code nochmals.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>




<script type="text/css">

   <!--
   li:hover ul { display: block; }

   ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 150px;
        border-bottom: 1px solid #ccc;
        }

        ul li a {
        display: block;
        text-decoration: none;
        color: #777;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        border-bottom: 0;
        }

        li ul {
        position: absolute;
        left: 149px;
        top: 0;
        display: none;
        }

        ul li {
        position: relative;
        }

        ul li a {
        display: block;
        text-decoration: none;
        color: #777;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        border-bottom: 0;
        }
        
   -->
</script>

</head>


<body>
<ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Beispiel 1 mit Dynamischer Leiste</a>
      <ul>
        <li><a href="#">Untermenü Beispiel 1.1</a></li>
        <li><a href="#">Untermenü Beispiel 1.2</a></li>
        <li><a href="#">Untermenü Beispiel 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Beispiel 2 mit Dynamischer Leiste</a>
      <ul>
        <li><a href="#">Untermenü Beispiel 2.1</a></li>
        <li><a href="#">Untermenü Beispiel 2.2</a></li>
        <li><a href="#">Untermenü Beispiel 2.3</a></li>
        <li><a href="#">Untermenü Beispiel 2.4</a></li>
        <li><a href="#">Untermenü Beispiel 2.5</a></li>
      </ul>
    </li>
    <li><a href="#">Beispiel 3 mit Dynamischer Leiste</a>
      <ul>
        <li><a href="#">Untermenü Beispiel 3.1</a></li>
        <li><a href="#">Untermenü Beispiel 3.2</a></li>
        <li><a href="#">Untermenü Beispiel 3.3</a></li>
        <li><a href="#">Untermenü Beispiel 3.4</a></li>
      </ul>
    </li>
  </ul>
    <script type="text/javascript">
    startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
        (" over", "");
   }
   }
  }
 }
}
<ul id="nav">
window.onload=startList;

</script>
</body>
</html>
Ich denke eher das es an Javascript liegt, das da irgendwo der Fehler ist, und ich mich damit am wenigsten auskenne. Ich habe Javascript in den bodybereich gesetzt, das ist doch korrekt, oder?
Hier ist der Javascript Code:
Code: 
    <script type="text/javascript">
    startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
        (" over", "");
   }
   }
  }
 }
}
<ul id="nav">
window.onload=startList;

</script>
 
Das css wird in <style> geschrieben nicht in <script>.

Das Javascript dient nur dem IE5-6. Er kennt :hover nur für <a>

Du kannst es in einem Conditional Comment einfügen um es vor anderen Browsern zu verstecken:
Code: 
<!--[if lt IE 7]>
 <script type="text/javascript">
 /* <![CDATA[ */
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("men");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
 /* ]]> */
</script>
<![endif]-->

Das Script fügt nur eine Klasse (.over) in alle <li> ein die mit der Maus überfahren werden (onmouseover) und sich im Element #men befinden.
Das css für .over mußt du selber schreiben. Das macht dieses Script nicht.

Hier findest du die Beschreibung zu diesem Menü:
A List Apart: Articles: Suckerfish Dropdowns
 
wieder ein problem
da dynamische Leisten in Frames irgendwie net funzen musste ich mich von Frames trenen.
Ich habe dabei beim Verbinden meiner navleiste und meiner überschrift n problem
Wenn ich mir nur die dynamische schnell leiste ansehe sieht das so aus, schön wagrecht wie ich es haben will:
navleiste_trocken.jpg

wenn ich die beiden nun mixe sieht das so aus:
rschrift_nav_verkehrt.jpg


Ich will aber das das genauso ist vertikal ist wie zuvor.
Was muss ich hinzufügen damit es wieder wagrecht wird, und die untermenüs am anfang versteckt sind!?!

Hier der Code der Navileiste
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Horizontal</title>

<style type="text/css" media="screen">
<!--


ul, li
{
        list-style-type: none;
        padding: 0px;
        margin: 0px;
}

.menu
{
        position: absolute;
        z-index: 3;
        top: 10px;
}

.menu li
{
        width: 160px;
        float: left;
}

.menu a
{
        border: 1px solid #EF3C2A;
        background-color: #C62919;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        cursor: default;
        margin: 0px 2px;
        display: block;
        height: 20px;
        color: #000;
}

.menu a:hover
{
        background-color: #DD2714;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
        font-size: 14px;
        display: none;
        width: 140px;
        float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
        font-weight: normal;
        padding-top: 2px;
        border-top: 0px;
        cursor: pointer;
}
-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
        with (document)
        {
                if (getElementById)
                        getElementById(id).style.display = 'block';
                else if (all)
                        all[id].style.display = 'block';
                else
                        layers[id].display = 'block';
        }
}

function cache(id)
{
        with (document)
        {
                if (getElementById)
                        getElementById(id).style.display = 'none';
                else if (all)
                        all[id].style.display = 'none';
                else
                        layers[id].display = 'none';
        }
}
//-->
</script>

</head>
<body>

<div class="menu">
  <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"><img src="../../../Pictures/Buttons/Startseite angeklickt.gif" alt="" border="0" width="156" height="26"></a>
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');"><img src="../../../Pictures/Buttons/Über mich.gif" alt="" border="0" width="156" height="26"></a>
      <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
        <li><a href="">Subkategorie 2.1</a></li>
        <li><a href="">Subkategorie 2.2</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subkategorie 3.1</a></li>
        <li><a href="">Subkategorie 3.2</a></li>
        <li><a href="">Subkategorie 3.3</a></li>
        <li><a href="">Subkategorie 3.4</a></li>
        <li><a href="">Subkategorie 3.5</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
      <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        <li><a href="">Subkategorie 4.1</a></li>
        <li><a href="">Subkategorie 4.2</a></li>
        <li><a href="">Subkategorie 4.3</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>
und hier der gesamte Code
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Überschrift</title>
<meta name="author" content="Imbericle">
<meta name="editor" content="html-editor phase 5">
<style type="text/css">
<!--

body {
background-color:#00FF4F;
background-position: center top;
  background-repeat:no-repeat;
    background-image:url(../../../Pictures/SternLogo.jpg);
}



#schrift1 {
position: relative;
z-index: 1;
font: bold 3em Verdana;
color: #FC04F9;

}

#schrift2 {
position: absolute;
top: 1px;
left: 1px;
z-index: 2;
color:
#F9FA09;
}
#wrapper
{
width: 389px;
border: 0px solid blue;
margin: 18px auto;

ul, li
{
        list-style-type: none;
        padding: 0px;
        margin: 0px;
}

.menu
{
        position: absolute;
        z-index: 3;
        top: 10px;
}

.menu li
{
        width: 160px;
        float: left;
}

.menu a
{
        border: 1px solid #EF3C2A;
        background-color: #C62919;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        cursor: default;
        margin: 0px 2px;
        display: block;
        height: 20px;
        color: #000;
}

.menu a:hover
{
        background-color: #DD2714;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
        font-size: 14px;
        display: none;
        width: 140px;
        float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
        font-weight: normal;
        padding-top: 2px;
        border-top: 0px;
        cursor: pointer;
}
-->

-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
        with (document)
        {
                if (getElementById)
                        getElementById(id).style.display = 'block';
                else if (all)
                        all[id].style.display = 'block';
                else
                        layers[id].display = 'block';
        }
}

function cache(id)
{
        with (document)
        {
                if (getElementById)
                        getElementById(id).style.display = 'none';
                else if (all)
                        all[id].style.display = 'none';
                else
                        layers[id].display = 'none';
        }

//-->
</script>


</head>
<body text="#000000" bgcolor="#00FF4F" link="#FF0000" alink="#FF0000" vlink="#FF0000">
 <div id="wrapper">
<p><div id="schrift1">Beispiel1111
<div id="schrift2">Beispiel1111</div><!--Ende #schrift2-->
</div><!--Ende #schrift1--></p>

<div class="menu">
  <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"><img src="../../../Pictures/Buttons/Startseite angeklickt.gif" alt="" border="0" width="156" height="26"></a>
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');"><img src="../../../Pictures/Buttons/Über mich.gif" alt="" border="0" width="156" height="26"></a>
      <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
        <li><a href="">Subkategorie 2.1</a></li>
        <li><a href="">Subkategorie 2.2</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subkategorie 3.1</a></li>
        <li><a href="">Subkategorie 3.2</a></li>
        <li><a href="">Subkategorie 3.3</a></li>
        <li><a href="">Subkategorie 3.4</a></li>
        <li><a href="">Subkategorie 3.5</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
      <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        <li><a href="">Subkategorie 4.1</a></li>
        <li><a href="">Subkategorie 4.2</a></li>
        <li><a href="">Subkategorie 4.3</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>
 
nene, die Erklärung ist gut. Ich habe verstanden, was du meinst. Aber das Problem ist, dass man den Quellcode so kaum richtig lesen kann. Könntest du das evtl. irgendwo hochladen und den Link posten, so dass man sich das direkt selbst anschauen kann?

MfG
 
Du hattest eine bewährte Vorlage.
Davon ist nicht mehr viel übrig.

Hier fehlt die schließende Klammer:
Code: 
#wrapper
{
width: 389px;
border: 0px solid blue;
margin: 18px auto;
[COLOR="DarkRed"][B]}[/B][/COLOR]
Dein html enthält Fehler
Der Validator hilft.
 
Ich hatte auch net vor es beizubehalten
Zu
Atlan schrieb:
nene, die Erklärung ist gut. Ich habe verstanden, was du meinst. Aber das Problem ist, dass man den Quellcode so kaum richtig lesen kann. Könntest du das evtl. irgendwo hochladen und den Link posten, so dass man sich das direkt selbst anschauen kann?

MfG
Zum Vergrößern anklicken....

Ja das ist an dem Forum das Problem, es müsste doch relativ einfach sein die Quelltext so einzubauen das man nicht wagrecht scrollen kann, sondern es einfach n seitenumbruch gibt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben