Navigation

Spin_1987 · 11.08.2009

Hallo liebe Community , ich habe da ein kleines Problem :/

Meiner Webseite habe ich einen dynamische Navi gegeben und jedes mal wenn man mit der Maus drüberfährt , fahren li punkte aus.

Das ist ja ales schön und gut , doch stört mich , dass man die ausklappbare navi nicht immer erreichen kann. Was heißt das?

Also wenn man sich vorstell man hat den Menupunkt : Auto:

Auto

Audi

BMW

Audi und BMW sind im Menupunkt Auto und werden bei Hover ausgefahren.
Nun möchte ich aber auf audi klicken. Dann ziehe ich mein Mauscursor runter und will auf Auto klicken , doch ist der Abstand zu groß, dass sich die ausgeklappte Navi wieder einfährt......

Der Abstand ist bei mir 0px, trotzdem fährt sich die Navi wieder ein :/
Was kann ich dagegen machen?

Ein script schreiben , was mir meine Navi 2 Sekunden nach einem Hover anzeigen lässt?

Danke für eure hilfe.

grüße

SamBooka · 11.08.2009

AW: Navigation

wenn du es auf diese weise lösen willst sind 2 sekunde vielleicht etwas viel bzw. könntest du es mit fade in + out doch 2sek lang machen.

wundert mich allerdings dass dieses problem auftritt

Spin_1987 · 11.08.2009

AW: Navigation

Vielleicht liegt es darn , dass ich nicht mit Bildern arbeite oder backgrund Farbe.

Nur rein Texte, die sich ausfahren. Aber egal sag ich mal

Ich muss erst noch ne Navi designen, um dann entsprechende effekte zu haben.

Ich meine es geht soweit ...aber leider nicht perfekt.

Könnte es auch in Java-Script schreiben , aber dass muss ja immer erst aktiviert werden. Deswegen lege ich wert , dass alles in CSS passiert !

quasibodo · 11.08.2009

AW: Navigation

Ohne den Quellcode gesehen zu haben, ist eine Ferndiagnose schwierig...

Aber es klingt so, als ob nicht die 0px Abstand das Problem sind, sondern evtl. vorher gemachte Angaben im Bezug auf margin oder padding.

Und ob Du eine Hintergrundgrafik oder eine -farbe nimmst, spielt keine Rolle, auch wenn gar nichts da ist.

Oder es könnte an einer Blockgröße liegen...

Du könntest Dich auch nach fertigen Lösungen umschauen, einige davon darf man sogar verwenden, suche mal nach css-flyout.

Tim1901091 · 11.08.2009

AW: Navigation

Welcher Browser?
Ausklappbare Menüs funktionieren z.B. nicht in IE6, wenn die auf CSS basieren!
Border zählt bei IE6 z.B. auch mit rein, wenn der also nicht 0 ist, wird das wieder einklappen.
Bild oder wenigstens Quelltext wäre aber hilfreich.

Spin_1987 · 11.08.2009

AW: Navigation

He soviel Initiative

Nice .

Ich stell den Code einfach mal rein :

Code:

@charset "utf-8";
/* CSS Document */
/* HTML Dokument in schwarz färben und die Schriftart auf Arial setzen*/
body {
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
}
/* #box1 beinhaltet den Hintergrund von 1024 x 768px*/ 
div#box1 {
background-image:url(../bilder/background.jpg);
background-repeat:no-repeat;
width:1024px;
height:768px;
/*HP mittig setzen*/
margin: 10px auto;
}

div ul#navigation { 
margin:0;
padding:40px 0px 0px 0px;
text-align:center;
}
/* li Elemente der ersten ebene: float, damit die nebeneinander positioniert werden und position relativ, damit die li elemente der 2 ebene über position absolute an den li elementen der 1 ebene ausgerichtet werden können.*/  
div ul#navigation li {
list-style: none; /* keine Listenpunkte mehr*/
float: left; /* Listenpunkte sind aus dem Textfluss genommen worden*/ 
position: relative; /* relative Positionierung vom Textfluss*/
}
/* absolute positionierung der li elemente der 2 Ebene, damit sie nun an den li elementen der ersten elemente ausgerichtet werden können*/
div ul#navigation li ul {
margin: 0; 
padding: 0; 
position: absolute;
top: 1.2em; 
left:0;
display: none;
}

div ul#navigation li ul li {
float: none; 
display: block; /* Li Elemente werden zu Blockelementen, die im Textfluss eine neue Zeile erzeugen*/ 
margin-top: 0.2em;  /* Bestimmt den Abstand der Li Elemente der zweiten Ebene*/
}
/* Einstellungen zu den Links und zu span(Inline Element)*/
div ul#navigation a{ 
display: block; 
width: 6em;
height: 1em;
padding:0 5px 0 5px; 
text-decoration: none; 
color:#FFF;
font-size:15px;
font-weight:bold;
}
/* Hover effekt der li erster Ebene*/
div ul#navigation li a:hover{
    text-decoration:underline;
}
/*Hover effekt der li zweite Ebene*/
div ul#navigation li ul li a:hover {
color: #090;
text-decoration:none;
}

div ul#navigation li a:active, ul#Navigation li:hover a:active {
color: #000; /* Farbe beim raufdrücken des Links*/
}
div ul#navigation li:hover ul {
display: block;
}    
                      
/***********************************************************************************************************/
/*****************************s_navigation*****************************************************************/

div ul#s_navigation { 
margin:-10px 0px 0px 0px;
padding:0px 0px 0px 880px;
text-align:left;
}

/* [li] 1.Ebene */  
div ul#s_navigation li {
list-style: none; 

}
/* absolute positionierung der li elemente der 2 Ebene, damit sie nun an den li elementen der ersten elemente ausgerichtet werden können*/
div ul#s_navigation li ul {
margin: 0; 
padding: 0; 
position: absolute;
top: 40px; 
left:970px;
display: none;
}

div ul#s_navigation li ul li {
float: none; 
display: block; /* Li Elemente werden zu Blockelementen, die im Textfluss eine neue Zeile erzeugen*/ 
margin-top: 0.2em;  /* Bestimmt den Abstand der Li Elemente der zweiten Ebene*/
}
/* Einstellungen zu den Links und zu span(Inline Element)*/
div ul#s_navigation a{ 
display: block;
width: 8em;
text-decoration: none; 
color:#FFF;
font-size:15px;
font-weight:bold;
margin: 10px;
}
/* Hover effekt der li erster Ebene*/
div ul#s_navigation li a:hover{
    text-decoration:underline;
}
/*Hover effekt der li zweite Ebene*/
div ul#s_navigation li ul li a:hover {
color: #090;
text-decoration:none;
}

div ul#s_navigation li a:active, ul#Navigation li:hover a:active {
color: #000; /* Farbe beim raufdrücken des Links*/
}
div ul#s_navigation li:hover ul {
display: block;
}

Dieser Code ist für 2 Navigationen.
Sind die gleichen

Außer paar Position änderungen.

Wäre euch super dankbar, wenn ihr das auf anhieb seht , grüße

Tim1901091 · 11.08.2009

AW: Navigation

Was genau willst du jetzt von uns? Im IE6 wirst du das Ganze alleine mit CSS nicht zum Laufen bekommen. Da gehts nicht ohne JavaScript.

In welchem Browser funktionierts denn nicht richtig? Oder funktionierts in allen nicht richtig?

Spin_1987 · 11.08.2009

AW: Navigation

Hey Tim.

Also im IE kenn ich Scripte mit den ich die Navi ausklappbar machen kann. Meine Frage-Problemstellung ist die gleiche, wie im Post 1. Wenn du dir nur den Code anschaust, siehst man natürlich nicht auf anhieb das Problem.

Es funktioniert alles, jedoch passiert es zu oft, dass beim mouse over die navi ausgeklappt wird und dann beim versuch auf die ausgeklappten Menüpunkte zu klicken, sie schon nicht mehr da ist.

Weil irgendwie ....die maus wieder drunter ist. Deswegen die frage ganz oben mit dem 2 sekunden ausgeklappt bleiben...

MyBad · 11.08.2009

AW: Navigation

Hallo!

Kannst du bitte auch noch den HTML-QT dazuposten? Dann ist es einfacher was dazu zu sagen.

Gruß
Tim

Tim1901091 · 11.08.2009

AW: Navigation

Das geht auch garantiert ohne die 2 Sekunden. Das wäre doch bescheuert, wenns nur so ginge. Das ist dann irgendwie nicht mehr in der Box drin.

Ich kenn für IE6 nur JavaScript-Lösungen, ab IE7 und in allen anderen halbwegs brauchbaren Browsern klappt das mit li:hover.

Spin_1987 · 11.08.2009

AW: Navigation

Ja klar , aber ich weiß noch nicht wie :

Also :

HTML:

<div id="box1">
  <ul id="navigation">
    <li><a href="#">&Uuml;ber mich</a>
      <ul>
        <li><a href="#">Schatz</a></li>
        <li><a href="#">Schatz</a></li>
      </ul>
    </li>
    <li><a href="#">Design</a>
      <ul>
        <li><a href="#">Schatz</a></li>
        <li><a href="#">Schatz</a></li>
      </ul>
    </li>
    <li><a href="#">Fotografie</a>
      <ul>
        <li><a href="#">Schatz</a></li>
        <li><a href="#">Schatz</a></li>
      </ul>
    </li>
  </ul>
  <div></div>
  <ul id="s_navigation">
    <li><a href="#">&Uuml;ber mich</a>
      <ul>
        <li><a href="#">Schatz</a></li>
        <li><a href="#">Schatz</a></li>
      </ul>
    </li>
    <li><a href="#">Programmieren</a>
      <ul>
        <li><a href="#">Schatz</a></li>
        <li><a href="#">Schatz</a></li>
      </ul>
    </li>
    <li><a href="#">Bilder</a>
      <ul>
        <li><a href="#">Schatz</a></li>
        <li><a href="#">Schatz</a></li>
      </ul>
    </li>
  </ul>
  <div></div>
</div>

Danke

Habe leider noch kein Webspace, sonst hätte ich euch den link geschickt, grüße