Drop-Down-Navigation von LX, 15.10.2008 14:36

Drop-Down-Navigation

Steffen 15.10.2008 10:38

javascript

Hallo an alle,

bin jetzt schon seit mehreren Tagen dabei an einer Drop-Down-Navi für unsere HP zu basteln. Ist mir auch soweit gelungen, nur fährt sich mein Menu jedes mal wieder zusammen, wenn ich einen Link aus dem Untermenu anklicke, was ich jedoch verhindern will.
Lade euch mal den CSS-Text und den HTML-Code hoch, damit ihr, falls ihr Ideen zu diesem Problem habt, euch vllt melden könnt.

Mfg

Steffen

  
body {  
        margin: 0 auto;  
        padding: 0;  
        font-family: Arial, Verdana, Sans-Serif;  
        background: #E7E7E7;  
}  
a {  
        text-decoration: none;  
        color: #074da5;  
}  
a:hover {  
        color: #808080;  
}  
a img {  
        border: 0;  
}  
h3 {  
        font-size: 1.3em;  
        margin: 0 0 5px 0;  
        padding: 2px 0px 0px 0px;  
        border-bottom: 2px solid #eee;  
}  
.blue {  
        color: #286ea0;  
        font-size: 16px;  
}  
#bg {  
        width: 760px;  
        margin: 0 auto;  
        height: 600px;  
        padding: 6px 10px 0px 10px;  
        background: url(bg.gif) no-repeat;  
}  
#bg2 {  
        padding: 9px 4px 0 2px;  
        color: #E7E7E7;  
        width: 736px;  
  height: 600px;  
}  
#navi {  
        clear: left;  
        float: left;  
        width: 150px;  
        margin: 0 0 10px 0;  
        padding: 0;  
        font-size: 0.9em;  
}  
#navi ul {  
        list-style: none;  
        width: 150px;  
        margin: 0 0 3px 0;  
        padding: 0;  
        font-size: 1.1em;  
        border-right: 2px solid #eee;  
}  
#navi li {  
        margin-bottom: 4px;  
        padding: 0 5px 0 10px;  
}  
#navi li a {  
        font-size: 9pt;  
        font-weight: bold;  
        text-align: right;  
        height: 20px;  
        text-decoration: none;  
        color: #808080;  
        display: block;  
        padding: 6px 10px 0 10px;  
        background: #fff;  
        border-bottom: 1px dotted #ccc;  
}  
#navi li a:hover {  
        color: #286ea0;  
}  
#pic {  
        margin:  0 275px 30px 160px;  
        line-height: 1.4em;  
        background: url(pic3.jpg) repeat-x;  
        height: 153px;  
  width: 570px;  
  position: absolute;  
}  
#pic h2 {  
        margin: 10px 100px 0 5px;  
        font-size: 14px;  
  font-weight: bold;  
        color: #ffffff;  
  border-bottom: 1px solid white;  
}  
#pic p {  
        margin: 10px 0 0 5px;  
        color: #f4f4f4;  
        width: 300px;  
  font-size: 12px;  
  font-style: italic;  
}  
#pic a {  
  margin: 10px 0 0 5px;  
}  
.text {  
        margin: 160px 10px 0 160px;  
        line-height: 1.6em;  
        text-align: left;  
        color: #5D5D5D;  
}  
.text a, #text a:visited {  
        text-decoration: underline;  
}  
.text p {  
        padding: 0;  
        margin: 0;  
}  
#footer {  
        clear: both;  
        color: #808080;  
        background: #FFF;  
        font-size: 0.8em;  
  font-weight: bold;  
        text-align: center;  
        padding: 5px 10px 5px 0;  
        margin: 100px 5px 50px 5px;  
        border: 1px solid #ccc;  
  
  
}  
#footer a {  
        text-decoration: underline;  
        color: #3A6794;  
}  
#footer a:hover {  
        color: #000;  
}  
.d1 {  
clear: left;  
float: left;  
width: 145px;  
margin: 10px 0 10px 5px;  
padding: 0;  
font-size: 16px;  
color: #074da5;  
text-indent: 3px;  
font-weight:bold;  
padding-top: 2px;  
border-bottom: 1px dotted #ccc;  
}  
.d2 {  
clear: left;  
float: left;  
width: 145px;  
margin: 0 0 0 10px;  
padding: 0;  
font-size: 12px;  
color: #074da5;  
text-indent: 3px;  
font-weight:bold;  
padding-top: 2px;  
}

  
<!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" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<meta name="Author" content="Author" />  
<meta name="Robots" content="index,follow" />  
<meta name="Description" content="Description" />  
<meta name="Keywords" content="key, words" />  
<link rel="stylesheet" type="text/css" href="images/style.css" />  
  
  
  
<script language="JavaScript" type="text/javascript">  
  
function outline(id)  
{  
 if(document.getElementById(id).style.display == 'none')  
 {  
  document.getElementById(id).style.display = 'block';  
 }  
 else  
 {  
  document.getElementById(id).style.display = 'none';  
 }  
}  
</script>  
  
</head>  
<body>  
        <div id="bg">  
                <div id="bg2">  
  
                        <div id="navi">  
                        <div class="d1"><a href="javascript:;" onclick="outline('p1'); return false;">4Tek</a></div>  
                         <span id="p1" style="display:none"><div class="d2"><a href="index.html">Vision</a></div><br>  
                         <div class="d2"><a href="leitlinien.html">Leitlinien</a></div><br>  
       <div class="d2"><a href="knowhow.html">KnowHow</a></div><br></span>  
  
                        <div class="d1"><a href="javascript:;" onclick="outline('p2'); return false;">L&ouml;sungen</a></div>  
                         <span id="p2" style="display:none"><div class="d2"><a href="loesungen.html">Konzeption</a></div><br>  
                         <div class="d2"><a href="realisierung.html">Realisierung</a></div><br>  
       <div class="d2"><a href="service.html">Service</a></div><br></span>  
  
                        <div class="d1"><a href="javascript:;" onclick="outline('p3'); return false;">Projekte</a></div>  
       <span id="p3" style="display:none"><div class="d2"><a href="projekte.html">Kunden</a></div><br>  
                         <div class="d2"><a href="callcenter.html">CallCenter-Tool</a></div><br>  
       <div class="d2"><a href="online.html">Online-Ratgeber-Protal</a></div><br>  
                         <div class="d2"><a href="intranet.html">Integriertes Intranet</a></div><br>  
                         <div class="d2"><a href="firewall.html">Firewall-Lösung</a></div><br></span>  
  
                        <div class="d1"><a href="javascript:;" onclick="outline('p4'); return false;">Partner</a></div>  
       <span id="p4" style="display:none"><div class="d2"><a href="partner.html">Microsoft</a></div><br>  
                         <div class="d2"><a href="mcafee.html">McAfee</a></div><br>  
       <div class="d2"><a href="macromedia.html">Macromedia/Allaire</a></div><br>  
                         <div class="d2"><a href="sterling.html">Sterling Commerce</a></div><br></span>  
  
                        <div class="d1"><a href="javascript:;" onclick="outline('p5'); return false;">Kontakt</a></div>  
       <span id="p5" style="display:none"><div class="d2"><a href="kontakt.html">Anschrift</a></div><br>  
                         <div class="d2"><a href="anfahrt.html">Anfahrt</a></div><br>  
       <div class="d2"><a href="#">Mitarbeiter-Login</a></div><br>  
                         <div class="d2"><a href="#">Kunden-Login</a></div><br></span>  
  
      <div class="d1"><a href="sitemap.html">Sitemap</a></div>  
                        </div>  
  
  
  
  
  
                        <div id="pic">  
                        <h2>Vision</h2>  
                        <p>Als IT-Dienstleister und Unternehmensberatung unterst&uuml;tzen wir unsere Kunden.</p>  
                        </div>  
  
                        <div class="text">  
                        <p>Unser Ziel ist die Optimierung unternehmensinterner Prozesse und die langfristige Sicherung des Markterfolges f&uuml;r unsere Kunden.  
                        Die richtige Information zur richtigen Zeit am richtigen Ort. In einer sich permanent und immer schneller ver&auml;ndernden Welt spielen  
                        Informationen eine zentrale Rolle. Ob unternehmensintern oder in der Interaktion mit Kunden, Interessenten oder externen Partnern.  
                        Ob im E-Business oder auf eher klassisch gepr&auml;gten Gesch&auml;ftsfeldern. Bereitstellung, Austausch, Verarbeitung, Speicherung und  
                        Aufbereitung aktueller und zuverl&auml;ssiger Informationen sind entscheidend f&uuml;r den Erfolg eines Unternehmens. Diese Informationen so  
                        aufzubereiten, zu analysieren und darzustellen, dass sie f&uuml;r unsere Kunden einen neuen Wert darstellen, ist unser Ziel.</p>  
                        </div>  
  
                        <div id="footer">4Tek - Gesellschaft f&uuml;r angewandte Informationstechnologien mbH - Luisenstra&szlig;e 30 - 63067 Offenbach am Main  
                        </div>  
                </div>  
        </div>  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Drop-Down-Navigation
LX 15.10.2008 14:36

javascript
– Informationen zu den Bewertungsregeln
Falls Du Dich wundern solltest, warum Du keine Antwort bekommst: Dein Code ist eine derart unsemantische div-Suppe, dass man ihn nicht wirklich lesen möchte. Mache semantisches Markup daraus und komm wieder, falls sich Deine Probleme dadurch nicht bereits gelöst haben sollten. Nichts für ungut.

Gruß, LX

--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Drop-Down-Navigation
  
  molily Homepage des Autors 20.10.2008 00:38
  
  javascript
  – Informationen zu den Bewertungsregeln
  Falls Du Dich wundern solltest, warum Du keine Antwort bekommst: Dein Code
  
  ... hat offenbar nichts mit der Frage zu tun. Der Code tut das, was er soll. Wenn ich die Frage richtig verstehe, geht es darum, dass beim Klick auf einen Menüeintrag zu einem anderen Dokument gesprungen wird, das aber dieselbe Navigation hat. Nur ist bei diesem Folgedokument der Status des Menüs wieder der alte - alle Untermenüs sind zugeklappt.
  
  Dieses Problem steckt nicht im HTML oder CSS, sondern würde z.B. erfordern, dass das Menü serverseitig zusammengebaut wird. Sprich, wenn man auf der Seite Lösungen > Konzeption ist, sollte Lösungen aufgeklappt sein, bei Partner > Microsoft entsprechend Partner. Daher sollte Steffen mal erklären, was für serverseitige Möglichkeiten er sieht, wie der jeweilige Menüpunkt aufgeklappt sein kann. Am einfachsten wäre natürlich, in jedes Dokument den angepassten Menü-Code zu schreiben, aber besser wäre es, er liegt in einer zentralen, einbindbaren Datei und es ist anpassbar, welche Menüs aufgeklappt sind.
  
  Mathias
  
  --
  JavaScript-Erweiterung für das SELFHTML-Forum
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Steffen: Drop-Down-Navigation

Drop-Down-Navigation

Drop-Down-Navigation

Drop-Down-Navigation

Drop-Down-Navigation