der Flo(H): Untermenü in Navi verschiebt auch das Menü

SELF-Forum

Untermenü in Navi verschiebt auch das Menü

der Flo(H)
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich versuche gerade verzweifelt die Navigation einer Seite anzupassen. Die Navigation besteht aus 6 Menüpunkten die jeweils ein untermenü besitzen, das aufklappt, sobald man mit der Maus darüberfährt.

Mein Problem dabei ist, dass die Punkte im Untermenü oft länger sind als der Menüpunkt selbst, weshalb ich die größe des aufklappenden Menüs angepasst habe. Leider verschiebt sich jetzt auch die ganze Navigation und es entseht ein freier Platz zwischen den Haupt-Menüpunkten und die ganze Navigation verrutscht.

Leider weiß ich nicht was ich dazu ändern muss.
Hier mal der Code:

<!--
  function montre(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="block";
  } else if (document.all) {
    document.all[id].style.display="block";
  } else if (document.layers) {
    document.layers[id].display="block";
  } }

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

Und das beispiel eines Menüpunkts:

<li id="topic2"><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="link">Menüpunkt</a>

<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
  <li><a href="link">Submenüpunkt 1</a></li>
  <li><a href="link">Submenüpunkt 2</a></li>
  <li><a href="link">Submenüpunkt 3</a></li>
  <li><a href="link">Submenüpunkt 4</a></li>
  </ul>
 </li>

Ich hoffe ihr könnt mir da weiterhelfen.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Untermenü in Navi verschiebt auch das Menü

    Ingo Turski Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Mein Problem dabei ist, dass die Punkte im Untermenü oft länger sind als der Menüpunkt selbst, weshalb ich die größe des aufklappenden Menüs angepasst habe. Leider verschiebt sich jetzt auch die ganze Navigation und es entseht ein freier Platz zwischen den Haupt-Menüpunkten und die ganze Navigation verrutscht.

    Du hast ein CSS-Problem und der Javascript-Code, der die Menüpunkte ein- und ausblendet, ist hierbei irrelevant.
    Stelle bitte eine Beispielseite online.

    freundliche Grüße
    Ingo

    --
    [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Untermenü in Navi verschiebt auch das Menü

      der Flo(H)
      – Informationen zu den Bewertungsregeln

      Hab gerade leider keine Möglichkeit das online zu stellen,
      aber ich poste einfach mal hier den Quelltext.

      Schonmal danke für die Hilfe!

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Menu</title>

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script type="text/javascript">
      <!--
        function montre(id) {
         if (document.getElementById) {
          document.getElementById(id).style.display="block";
        } else if (document.all) {
          document.all[id].style.display="block";
        } else if (document.layers) {
          document.layers[id].display="block";
        } }

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

      //-->
      </script>
      <style type="text/css">
      <!--
      body {padding: 0; font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}

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

      div.menu {
       position: absolute;
       \width:781px;
       w\idth:780px;
       top: 0px;
       z-index: 3;
      }

      #topic1 {
       width:60px;
      }
      #topic2 {
       width:170px;
      }
      #topic3 {
       width:180px;
      }
      #topic4 {
       width:180px;
      }
      #topic5 {
       width:100px;
      }
      #topic6 {
       width:87px;
      }

      div.menu li {
       font-size:10px;
       text-align:center;
       float:left;
       font-weight:bold;
      }

      div.menu a {
       margin: 0 0px;
       height: 20px;
       display: block;
       text-align: center;
       font-weight: bold;
       border: 0px solid gray;
       text-decoration: none;
       color: #FFF;
       BACKGROUND-COLOR: #3F6D32;
       TEXT-INDENT: 5px;
      }

      div.menu a:hover {
       background: #1d3317;
       border: 1px solid gray;
      }

      #smenu1 {
       display: none;
       float: left;
       width: 60px;
       font-size: 12px;
      }
      #smenu2{
       display: none;
       float: left;
       width: 180px;
       font-size: 12px;
      }
      #smenu3{
       display: none;
       float: left;
       width: 180px;
       font-size: 12px;
      }
      #smenu4{
       display: none;
       float: left;
       width: 180px;
       font-size: 12px;
      }
      #smenu5{
       display: none;
       float: left;
       width: 160px;
       font-size: 12px;
      }
      #smenu6{
       display: none;
       float: left;
       width: 87px;
       font-size: 12px;
      }

      #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a {
       font-weight: normal;
       border-top: 0 none;
      }

      .site {
       position: absolute;
       z-index: 1;
       top : 70px;
       left : 10px;
       color: #000;
       background-color: #ddd;
       padding: 5px;
       border: 1px solid gray;
      }

      .mentions {
       position: absolute;
       top : 300px;
       left : 10px;
       color: #000;
       background-color: #ddd;
      }
      a {
       text-decoration: none;
       color: #222;
      }

      -->
      </style></head>

      <body>

      <div class="menu">
      <ul>
       <li id="topic1"><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="index.jsp">Home</a>
        <ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"></ul>
       </li>
       <li id="topic2"><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="">Beispiel Menüpunkt 1</a>
        <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
        <li><a href="">Subtopic 1</a></li>
        <li><a href="">Subtopic 2</a></li>
        <li><a href="">Subtopic 3</a></li>
        <li><a href="">Subtopic 4</a></li>
        <li><a href="">Subtopic 5</a></li>
        <li><a href="">Subtopic 6</a></li>
        </ul>
       </li>
       <li id="topic3"><a onmouseover="montre('smenu3');" onmouseout="cache('smenu3');" href="">Beispiel Menüpunkt 2</a>
        <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subtopic 1</a></li>
        <li><a href="">Subtopic 2</a></li>
        <li><a href="">Subtopic 3</a></li>
        <li><a href="">Subtopic 4</a></li>
        <li><a href="">Subtopic 5</a></li>
        <li><a href="">Subtopic 6</a></li>
        </ul>
       </li>
       <li id="topic4"><a onmouseover="montre('smenu4');" onmouseout="cache('smenu4');" href="">Beispiel Menüpunkt 3</a>
        <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        <li><a href="">Subtopic 1</a></li>
        <li><a href="">Subtopic 2</a></li>
        </ul>
       </li>
       <li id="topic5"><a onmouseover="montre('smenu5');" onmouseout="cache('smenu5');" href="">Menüpunkt</a>
        <ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
        <li><a href="">Subtopic 1</a></li>
        <li><a href="">Subtopic 2</a></li>
        <li><a href="">Subtopic 3</a></li>
        <li><a href="">Subtopic 4</a></li>
        <li><a href="">Subtopic 5</a></li>
        <li><a href="">Subtopic 6</a></li>
        </ul>
       </li>
       <li id="topic6"><a onmouseover="montre('smenu6');" onmouseout="cache('smenu6');" href="">&Uuml;ber uns</a>
        <ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
        <li><a href="">Subtopic 1</a></li>
        <li><a href="">Subtopic 2</a></li>
        <li><a href="">Subtopic 3</a></li>
        </ul>
       </li>
      </ul>
      </div>

      </body></html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln