Umgestaltung einer vertikalen Navigation in eine horizontale

mj23 · 7. Juli 2009

Hallo zusammen,

kann mir eventuelle jemand sagen wie man die folgende vertikale Navigationsleiste zu einer horizontalen umgestalten kann und wie man in die Leiste Elemente wie Startseite, Impressum etc einfügt, denn so wie der Code jetzt ist, ist die Leiste ja leer.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- ausklappbare Navigationsleiste -->
<html>
  <head>
    <title>Listing 8.6</title>
    <script type="text/javascript">
      var n4, ie, w3c;




      function init()
      {
        n4 = document.layers;
        ie = document.all;
        w3c = document.documentElement;
      }




      function showNav()
      {
        if(ie)
        {
          document.all.naviBar.style.visibility = 'visible';
        }
        else if(w3c)
        {
          document.getElementById('naviBar').style.visibility = 'visible';
        }
        else
        {
          alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
        }
      }




      function hideNav()
      {
        if(ie)
        {
          document.all.naviBar.style.visibility = 'hidden';
        }
        else if(w3c)
        {
          document.getElementById('naviBar').style.visibility = 'hidden';
        }
        else
        {
          alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
        }
      }




    </script>
    <style type="text/css">
        body        { margin-left:40px; }
        #leftBorder { background-color:#336699;
                      width:25px; height:100%;
                      position:absolute;
                      left:0px; top:0px; }
        #naviBar    { background-color:#336699;
                      width:150px; height:250px;
                      position:absolute;
                      left:0px; top:50px;
                      padding:5px;
                      visibility:hidden; }
        a           { color:#FFFFFF; }
    </style>
  </head>
  <body onLoad="init()">




    <div id="leftBorder" onMouseOver="showNav()" onMouseOut="hideNav()">
    </div>
    <div id="naviBar" onMouseOver="showNav()" onMouseOut="hideNav()">
      <a href="http://www._.de/">_</a><br>
      <a href="http://www._.de/">_</a><br>
      <a href="http://www._.de/">_</a>
    </div>




    <h1>Ausklappbare Navigationsleiste</h1>
    <p>Wenn Sie den Mauscursor an den linken Seitenrand bewegen, klappt die Navigationsleiste auf und Sie k&ouml;nnen einen Verweis anklicken.</p>
  </body>
</html>

Alles anzeigen

Vielen Dank an euch!

Gruß
Sven

lauras · 7. Juli 2009

Hey.

Ich hab dir den Code umgeschrieben, versuch ihn aber zu verstehen, ich hab die Änderungen kommentiert!

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- ausklappbare Navigationsleiste -->
<html>
  <head>
    <title>Listing 8.6</title>
    <script type="text/javascript">
      var n4, ie, w3c;




      function init()
      {
        n4 = document.layers;
        ie = document.all;
        w3c = document.documentElement;
      }




      function showNav()
      {
        if(ie)
        {
          document.all.naviBar.style.visibility = 'visible';




        }
        else if(w3c)
        {
          document.getElementById('naviBar').style.visibility = 'visible';
        }
        else
        {
          alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
        }
      }




      function hideNav()
      {
        if(ie)
        {
          document.all.naviBar.style.visibility = 'hidden';
        }
        else if(w3c)
        {
          document.getElementById('naviBar').style.visibility = 'hidden';
        }
        else
        {
          alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
        }
      }




    </script>










    <style type="text/css">




        * {
            margin: 0px;
            padding: 0px;
        }




        #topBorder {
            background-color:#336699;
            width:100%;  /* Breite des oberen Randes */
            height: 10px; /* Höhe des oberen Randes */
            position:absolute;
            left:0px; top:0px;




            }




        #naviBar {
            background-color:#336699;
            width: auto;   /* bewirkt, dass das Container immer die richtige Größe hat */
            height: auto;  /* bewirkt, dass das Container immer die richtige Größe hat */
            position:absolute;
            right:0px; top:25px; /* positioniert in der rechten oberen Ecke. Linke obere Ecke: statt right: 0px; --> left: 0px;  */
            padding:5px;
            visibility:hidden;
            }
        a {
            color:#FFFFFF;
            }




        ul {
            list-style-type: none; /* macht die Listenpunkte weg */
        }
        li {
            float: left; /* bewirkt, dass die Listenpunkte nebeneinander stehen können */
            margin: 3px 10px;
        }







    </style>







  </head>
















  <body onload="init()">




    <div id="topBorder" onmouseover="showNav()" onmouseout="hideNav()">
    </div>
    <div id="naviBar" onmouseover="showNav()" onmouseout="hideNav()">
    <ul>
      <li><a href="http://www._.de/">Startseite</a></li>  <!-- Hier die Listenpunkte einfügen -->
      <li><a href="http://www._.de/">Impressum</a></li>
      <li><a href="http://www._.de/">Sonstiges</a></li>
    </ul>
    </div>




    <h1>Ausklappbare Navigationsleiste</h1>
    <p>Wenn Sie den Mauscursor an den linken Seitenrand bewegen, klappt die Navigationsleiste auf und Sie k&ouml;nnen einen Verweis anklicken.</p>
  </body>
</html>

Alles anzeigen

Nochmal was nebenbei: Wenn du dir so einen Code aus dem Internet oder sonstwo herholst, achte wenigstens auf Qualität! Das ist kein konformes (X)HTML mehr gewesen, und sehr sauber war der Code auch nicht.
Außerdem ist im Javascript ein Fehler. Wenn man nämlich mit der Maus aus dem Balken herausfährt, ist das Menu wieder weg. Kann man also nicht anklicken.

Man kann so ein Menu auch nur mit CSS machen, das erfordert dann natürlich etwas Arbeit. Wenn du ein aufklappbares Menu möchtest, schau dir doch mal dieses hier an:

http://javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=469

Ist zwar auch mit Javascript, funktioniert aber besser.

Greetz
Laura

mj23 · 7. Juli 2009

Hi Laura,

den anderen Code den du mir vorgeschlagen hast finde ich auch sehr gut, danke dafür. Ich werd mal überlegen welchen ich verwende.

Der code den ich kopiert hatte zum Umschreiben war aus einem Buch, daher dachte ich das er eigentlich fehlerfrei ist, kann man sich aber anscheinend nicht drauf verlassen.

Viele Grüße

Sven

PS1: ach ja Laura,

noch was kann man den code den du mir kopiert hast für kommerzielle zwecke verwenden oder hat man da eventuell rechtliche Probleme?

Gruß

Sven

PS2:
es ist doch richtig das ich ich den Teil des Codes komplett in die CSS-Datei packe die ich schon für die ganzen anderen Sachen angelegt habe:

Code

body
{
	font-family: Verdana, sans-serif;
	font-size: 14px;
	overflow: auto;
	padding: 10px;
	margin: 0px;
}




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




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




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




.menu a
{
	border: 1px solid #888;
	background-color: #fff;
	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: #ccc;
}




#smenu1, #smenu2, #smenu3, #smenu4
{
	font-size: 12px;
	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;
}
//

Alles anzeigen

und den Teil des Codes packe ich in eine gesonderte Javascript-Datei:

Code

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';
	}
}

Alles anzeigen

der Teil kommt dann wohl in die HTML-Datei:

Code

<body>




<div class="menu">
  <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
        <li><a href="">Subkategorie 1.1</a></li>
        <li><a href="">Subkategorie 1.2</a></li>
        <li><a href="">Subkategorie 1.3</a></li>




      </ul>
    </li>




    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</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>

Alles anzeigen

soweit richtig?

Ich versuche den Code dann jetzt mal im Einzelnen zu verstehen!

Viele Grüße

Sven

lauras · 7. Juli 2009

Mh, mit den rechtlichen Dingen kenne ich mich nicht so aus, ich weiß nicht ob du den verwenden darfst.. hast du denn 1:1 kopiert?

Jops, das ist richtig. Musst halt nur aufpassen, dass du die class und id nicht schon in der html hast.

Am einfachsten isses noch, wenn du das Menu per PHP includest, dann hast dus in einer Datei drin und musst nciht alles immer verändern.

Greetz
Laura

PS.: Es gibt hier ne Edit-Funktion, damit kannst du deine Beiträge bearbeiten, sodass du nur einen schreibst
Ich habs mal zusammengefasst...

mj23 · 7. Juli 2009

Hier (<a class="postlink" href="http://javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=469">http://javarea.de/index.php3?opencat=Ja ... ion&id=469</a> ) steht jedenfalls niergendwo etwas das man den Code nicht kopieren. Ein paar Dinge würde ich aber ohnehin noch verändern, z.B. die Farbe des Rahmens etc.

Wie meinst du das genau?

Zitat

Am einfachsten isses noch, wenn du das Menu per PHP includest, dann hast dus in einer Datei drin und musst nciht alles immer verändern.

Gruß
Sven

$$freaky44$$ · 7. Juli 2009

du speicherst deine Daten, statt mit .html mit .php und lagerst die .html Befehle für die Navigation aus der hauptdatei z.B. nach navi.php aus:

PHP

<?php
  include ("navi.php");
?>

Das geht aber nur wenn dein Webserver PHP unterstützt.

lauras · 7. Juli 2009

...was ein halbwegs vernünftiger Webserver tun sollte.

Der Sinn dahinter ist folgender: Wenn du dir ein Menu erstellst, dann bindest du es in jede HTML-Seite deiner Homepage ein.
Wenn du dann jedoch einen Punkt im Menu ändern möchtest hast du (wenn du nicht z.B. die S&E Funktion bei Scriptly ua. benutzt) ein Problem, weil du es njeder Datei ändern musst.

Durch die "Ausgelagerte" Navi hast du nur eine Datei,die du verändern musst, die dann durch einen php-include einfach eingebunden wird.

Ist relativ simpel und erspart meist viel Arbeit

Greetz
Laura

mj23 · 7. Juli 2009

aber wenn ich die navi in eine css-datei auslagere habe ich es doch auch zentral so das ich es nur in dieser Datei ändern muss. dann brauche ich doch garkeine extra php-datei erstellen.

Oder hab ich da jetzt irgendwo ein denkfehler?

gruß
sven

Talwin · 8. Juli 2009

Zitat von "mj23"

aber wenn ich die navi in eine css-datei auslagere habe ich es doch auch zentral so das ich es nur in dieser Datei ändern muss. dann brauche ich doch garkeine extra php-datei erstellen.

Oder hab ich da jetzt irgendwo ein denkfehler?

Ja,

in die CSS Datei kannst Du ja kein HTML auslagern. In die ausgelagerte Datei würde der HTML Teil kommen.

Mal generell zu der von Dir verwendeten Navi:
Leider ist sie abhängig von Javascript, was erstens Besucher ausschließt, die das ausgeschaltet haben und zweitens Suchmaschinen finden die Links nicht.

Schau Dir doch mal das hier an, da findest Du kompetent erstellte Navis.

Gruß Talwin

Umgestaltung einer vertikalen Navigation in eine horizontale

Jetzt mitmachen!

Teilen