Navi Horizontal belibt nicht stehen

Diskutiere das Thema Navi Horizontal belibt nicht stehen im Forum Web-Design

  1. strubel

    strubel Thread Starter Mitglied

    Beiträge:
    101
    Zustimmungen:
    0
    Mitglied seit:
    07.07.2006
    Ciao Leute,

    so ein v......... D....

    Jetzt sitz ich schon über zwei Tage an so einem Menü. Klappt soweit das das Menü aufgeht auch alles wunderbar. Man staune sogar im ie. Nun ist es aber so das wenn man die Hauptnavi verlässt, die Schrift wieder rot wird anstatt weiss zu bleiben wie beim roll over. Bitte Bitte helft mir weiter.... :confused:

    Hier mal das entsprechende CSS für die Navi:

    Code:
    @charset "UTF-8";
    /* CSS Document
    Autor:		nico.schweizer@miux.ch
    Datum:		20.03.2008
    Version:	1.0
    
    Frohe Ostern */
    
    /* Hauptnavinavi */
    
    .navigation {
    	width: 965px;
    	height: 25px;
    	float: left;
    	position: relative;
    	text-align:left;
    	vertical-align: bottom;
    	line-height: 25px;
    	z-index: 1002;
    }
    
    
    /*
    Beginn Subnavi
    */
    
    #sfnav, #sfnav ul {
    	list-style: none;
    	line-height: 1;
    	background: #EAEDE6;
    	font-weight: bold;
    	padding: 0px;
    	margin: 0px;
    	position: absolute;
    	height: 25px;
    	z-index: 1002;
    	width: 965px;
    	border-top: 1px solid black;
    }
    
    #sfnav a {
    	display: block;
    	color: #511133;
    	text-decoration: none;
    	padding: 0px;
    	text-align: center;
    	line-height: 25px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    #sfnav a.daddy {
    text-align: left;
    color: #acc424;
    padding-left: 5px;
    background-color: #511133;
    }
    
    #sfnav li {
    float: left;
    padding: 0;
    }
    
    
    #sfnav li ul {
    			position: absolute;
    			left: -999em;
    		width: 991px;
    height: auto;
    font-weight: normal;
    margin: 0;
    width: 191px;
    background-color: #511133;
    }
    
    #sfnav li li {
    		width: 191px;
    }
    
    #sfnav li ul ul {
    		margin: -1.5em 0 0 194px;
    }
    
    #sfnav li:hover ul ul, #sfnav li:hover ul ul ul,
    #nav3 .navfxenabled li:hover ul, #nav3 .navfxenabled li:hover ul ul, #nav3 .navfxenabled li:hover ul ul ul,
    #nav3 .navfxenabled li.over ul ul,#nav3 .navfxenabled li.over ul ul ul
    {
    			left: -999em;
    }
    #sfnav li:hover ul,
    #nav3 .navfxenabled li.over ul
     {
    			left: auto;
    }
    #sfnav li li:hover ul, #sfnav li li li:hover ul,
    
    /*Navi*/
    #nav3 .navfxenabled li li.over ul, #nav3 .navfxenabled li li li.over ul
     {
    			left: 0px;
    }
    #nav3 li li.over ul.leftover, #nav3 .navfxenabled li li li.over ul.leftover, #nav3 .navfxenabled li li li li.over ul.leftover
     {
    			left: 191px;
    }
    #nav3 #sfnav li.over,#sfnav li:hover {
    	/*background: #EAEDE6;*/
    	background: #511133;
    	color: #FFF;
    	width: 191px;
    }
    #nav3 a:hover{
    	background: #511133;
    	color: #FFF;
    	margin: 0px;
    	padding-left: 5px;
    }
    
    und hier nen link zur testseite:

    http://www.miux.ch/projekte/zuber/

    Gruss und Danke schon einmal in Hoffnung.
    Strubel
     
  2. roterhusar

    roterhusar Mitglied

    Beiträge:
    48
    Zustimmungen:
    0
    Mitglied seit:
    03.06.2004
    hallo strubel

    tolle navigation!

    super Mitgliedsfoto!

    wenn ich das richtig verstanden habe, soll die schrift beim verlassen die farbe wechseln. hab ich schon mal was gemacht, mit eventhandler....dingsda?!?, -- javascripte. onmouseout hieß das. extrem kompliziert.

    horidoo grüßt gerd
     
  3. strubel

    strubel Thread Starter Mitglied

    Beiträge:
    101
    Zustimmungen:
    0
    Mitglied seit:
    07.07.2006
    Hoi Gerd,

    danke für Deine Komplimente ;-)
    Habe eine Lösung gefunden, wenn jemand interressiert ist, dann kann er mich gerne kontaktieren.

    Gruss Strubel
    PS: Hm evtl. sollte ich doch mal das Bild ändern, damit ich mehr antworten bekomme. Irgendwas mit scharfen kurven und blonden Haaren oder so...
     
  4. roterhusar

    roterhusar Mitglied

    Beiträge:
    48
    Zustimmungen:
    0
    Mitglied seit:
    03.06.2004
    rüberwachsen lassen

    im navibereich gibts ja mitlerweile äußerst filigrane beispiele.
    wenn du da etwas funktionierendes hast, leg es auf, vielleicht sucht grade jemand danach. Ich brauche eine Navi für meine onlinezeitung.
    Das Foto musst du unbedingt lassen. Immerhin hast du 82 Zugriffe. ist auch nicht ohne!

    grüßt Gerd
    :upten:
     
  5. strubel

    strubel Thread Starter Mitglied

    Beiträge:
    101
    Zustimmungen:
    0
    Mitglied seit:
    07.07.2006
    Da isses:

    CSS

    PHP:
    /* Root = Horizontal, Secondary = Vertical */
    ul#navmenu-h {
      
    margin0;
      
    border0 none;
      
    padding0;
      
    width965px/*For KHTML*/
      
    list-stylenone;
      
    height25px;
    }

    #subnav
    {
      
    background:#511133;
    }

    ul#navmenu-h li {
      
    floatleft/*For Gecko*/
      
    displayinline;
      list-
    stylenone;
      
    positionrelative;
      
    height20px;
    }

    .
    daddy
    {
        
    padding-left:10px;
    }

    .
    endNav
    {
        
    width:192px;
    }

    html .endNav {
      
    w\idth:193px;
    }

    .
    nav
    {
        
    width:193px;
        
    fontbold 12px ArialHelveticasans-serif;
    }

    ul#navmenu-h ul {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    width193px;
      list-
    stylenone;
      
    displaynone;
      
    positionabsolute;
      
    top25px;
      
    left0;
    }

    ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
      
    clearboth;
      
    displayblock;
      
    font1px/0px serif;
      
    content".";
      
    height0;
      
    visibilityhidden;
    }

    ul#navmenu-h ul li {
      
    width193px;
      
    floatleft/*For IE 7 lack of compliance*/
      
    displayblock !important;
      
    displayinline/*For IE*/
    }

    /* Root Menu */
    ul#navmenu-h a {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    height:25px;
      
    floatnone !important/*For Opera*/
      
    floatleft/*For IE*/
      
    displayblock;
      
    background#EAEDE6;
      
    border-left:1px solid #000000;
      
    border-top:1px solid #000000;
      
    border-bottom:1px solid #000000;
      
    width:100%;
      
    color#511133;
      
    font12px ArialVerdanaHelveticasans-serif;
      
    line-height25px;
      
    font-weightbold;
      
    text-decorationnone;
      
    heightauto !important;
      
    height1%; /*For IE*/
    }

    /* Root Menu Hover Persistence */
    ul#navmenu-h a:hover,
    ul#navmenu-h li:hover a,
    ul#navmenu-h li.iehover a {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    border-left:1px solid #000000;
      
    border-top:1px solid #000000;
      
    border-bottom:1px solid #000000;
      
    background#511133;
      
    color#EAEDE6;
      
    fontArialHelveticasans-serif bold 12px;
      
    line-height25px;

    }

    /* 2nd Menu */
    ul#navmenu-h li:hover li a,
    ul#navmenu-h li.iehover li a {
      
    padding0;
      
    margin0;
      
    border0;
      
    floatnone;
      
    background#511133;
      
    color#acc424;
      
    fontArialHelveticasans-serif bold 12px;

    }

    /* 2nd Menu Hover Persistence */
    ul#navmenu-h li:hover li a:hover,
    ul#navmenu-h li:hover li:hover a,
    ul#navmenu-h li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover a {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    color#EAEDE6;
      
    fontArialHelveticasans-serif bold 12px;

    }

    /* 3rd Menu */
    ul#navmenu-h li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li a {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    background#EEE;
      
    color#666;
    }

    /* 3rd Menu Hover Persistence */
    ul#navmenu-h li:hover li:hover li a:hover,
    ul#navmenu-h li:hover li:hover li:hover a,
    ul#navmenu-h li.iehover li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover a {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    background#CCC;
      
    color#EAEDE6;
    }

    /* 4th Menu */
    ul#navmenu-h li:hover li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li.iehover li a {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    background#EEE;
      
    color#666;
    }

    /* 4th Menu Hover */
    ul#navmenu-h li:hover li:hover li:hover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    background#CCC;
      
    color#EAEDE6;
    }

    ul#navmenu-h ul ul,
    ul#navmenu-h ul ul ul {
      
    margin0;
      
    bordernone;
      
    padding0;
      
    displaynone;
      
    positionabsolute;
      
    top0;
      
    left193px;
    }

    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu-h li:hover ul ul,
    ul#navmenu-h li:hover ul ul ul,
    ul#navmenu-h li.iehover ul ul,
    ul#navmenu-h li.iehover ul ul ul {
      
    displaynone;
    }

    ul#navmenu-h li:hover ul,
    ul#navmenu-h ul li:hover ul,
    ul#navmenu-h ul ul li:hover ul,
    ul#navmenu-h li.iehover ul,
    ul#navmenu-h ul li.iehover ul,
    ul#navmenu-h ul ul li.iehover ul {
      
    displayblock;
    }

    so und dann java:

    PHP:
    navHover = function() {
        var 
    lis document.getElementById("navmenu-h").getElementsByTagName("LI");
        for (var 
    i=0i<lis.lengthi++) {
            
    lis[i].onmouseover=function() {
                
    this.className+=" iehover";
            }
            
    lis[i].onmouseout=function() {
                
    this.className=this.className.replace(new RegExp(" iehover\\b"), "");
            }
        }
    }
    if (
    window.attachEventwindow.attachEvent("onload"navHover);

    Grüsse Nico
    ps: danke für deine schmeicheleien gerd, bin aber schon vergeben. ;-)
     
Die Seite wird geladen...

MacUser.de weiterempfehlen

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...