Aktive Seite mit CSS

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Aktive Seite mit CSS

    Ich denke ich habe ein kleines Verständnissproblem,
    bzw. habe noch zu wenig erfahrung mit CSS und Javascript
    ich habe hier mal ein Menü zusammengestrickt und möchte nun bei klick auf einen Menüpunkt das er die die eigenschaft red im css beibehällt solange bis ich auf einen anderen Link im Menü klicke.
    Was muss ich also hierfür verändern ?
    Ach und nochwas für das ausklappen des Menüs benutze ich ja als href ein javascriptbefehl und zum schließen den Pfeil
    wie erreiche ich es das es auch ohne Pfeil sich schließt wenn ich ein 2tes mal auf die Kategorie klicke das Menü sich schließt (sich der javascriptbefehl beim öffnen ändert auf schließen) ?

    Schon mal dank im vorraus.

    MFG Postaria

    Hier der Code fürs Menü

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    
    	<style type="text/css">
    		body, p {
    		  
    			font-family			: verdana, sans-serif ;
    			font-size			  : 14px;
    			text-align      : left;
    			color				    : #888888;
    			margin			  	: 0px;
    			padding		  		: 0px;
    			margin-top      : 35px;
    			margin-left     : 30px;
    			
    			
    		}
    		a {
    			color				      : #888888;
    			text-decoration		: none;
    			
    			
    		}
    
    		#element {
    		
    			color			       	: #FFF;
    	     
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element p {
    			text-align			: static;
    		  
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      			#element1 {
    			color			       	: #FFF;
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element1 p {
    			text-align			: static;
    		
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      		#element2 {
    			color			       	: #FFF;
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element2 p {
    			text-align			: static;
    		
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      	  			#element3 {
    			color			       	: #FFF;
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element3 p {
    			text-align			: static;
    		
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      	  			#element4 {
    			color			       	: #FFF;
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element4 p {
    			text-align			: static;
    		
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      	  			#element5 {
    			color			       	: #FFF;
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element5 p {
    			text-align			: static;
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      	#element6 {
    			color			       	: #FFF;
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element6 p {
    			text-align			: static;
    		
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      	 #element7 {
    			color			       	: #FFF;
    			height		     		: 0px;
    			background-color	: #bfbebe;
    			overflow		     	: hidden;
    			
    		}
    		#element7 p {
    			text-align			: static;
    		
    			border          : 1;
    			border-width    : 1px;
          border-style    : solid;
      	}
      	
    		#content {
    			text-align			: static;
    		  background-image:url(./images/menue/button_header_lost.jpg);
    			border          : 1;
    			text-align      : center;
    			border-width    : 1px;
          border-style    : solid;
          height          :30px;
          line-height     :30px;     
    		}
    
    
    		#arrows {
    			text-align			: right;
    		}
    
        #head{
        width:90px;
        margin: 5px;
       
        }
        #head a {
        color        :#616161;
        
        }
        #head a:active, #head a:hover{
               color :red;           
        }
        
     
        
        #head ul ,#head li {
        list-style: none;
        margin: 0px;
        padding: 0px;
        
        
        }
        
           /*=========== menü ===========*/
        
        #menu10  {    
        width:100px;
        margin: 10px;
        
        }
    
        #menu10 ul ,#menu10 li{
                list-style: none;
                margin: 0px;
                padding: 0px;            
        }
        
        #menu10 li a:link , #menu10 li a:visited , #menu10 li a:active {
          display:block;
          height:30px;
          
          line-height:30px;
          background-image:url(./images/menue/button_lost1.jpg);
        	border          : 1;
    			border-width    : 1px;
          border-style    : solid;
          text-decoration:none;
          text-align:center;
          font-size: 13px;
          font-family: verdana, sans-serif;            
          padding-bottom:0px;
          margin:0px;
          border-color    : #837d7d
        }
        
        #menu10 li a:hover {
        background-image:url(./images/menue/button_lost.jpg);
        	border          : 1;
        	 color				      : red;
    			border-width    : 1px;
          border-style    : solid;
          border-color    : #837d7d
                }
    
    	</style>
     </script>
    <script type="text/javascript">
    var gxElementSizer =
    {
    addElement : function (element, sizeType)
    {
    if (this.e == null)
    {
    this.e = {};
    }
    this.e[element] =
    {
    element : (typeof element == 'object') ? element : document.getElementById(element),
    sizeType : (sizeType.toLowerCase() == 'width') ? 'width' : 'height',
    count	: null,
    newElementSize		: null,
    currentElementSize	: null,
    sizeDifferenz		: null,
    interval			: null
    };
    },	
    calculateSize : function (t, b, c, d)
    {
    if ((t/=d/2) < 1)
    {
    return c/2*t*t*t*t + b;
    }
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    setElementSize : function (element, newSize, duration)
    {
    if(arguments[3] == null)
    {
    window.clearTimeout(this.e[element]['interval']);
    this.e[element]['count']				= 0;
    this.e[element]['newElementSize']		= newSize;
    this.e[element]['currentElementSize'] 	= 
    parseInt(this.e[element]['element'][(this.e[element]['sizeType'] == 'width') ? 'offsetWidth' : 'offsetHeight']);
    this.e[element]['sizeDifferenz']		= 
    this.e[element]['newElementSize'] - this.e[element]['currentElementSize'];
    this.e[element]['interval']				= 0;
    }
    if(this.e[element]['count'] < duration)
    {
    this.e[element]['element'].style[this.e[element]['sizeType']] = 
    this.calculateSize(this.e[element]['count'], 
    this.e[element]['currentElementSize'], 
    this.e[element]['sizeDifferenz'], duration) + 'px';
    this.e[element]['count']++;
    this.e[element]['interval'] = 
    window.setTimeout('gxElementSizer.setElementSize("' + element + '", ' + newSize + ', ' + duration + ', true)', duration);
    }
    else
    {
    this.e[element]['count'] 				= null;
    this.e[element]['newElementSize']		= null;
    this.e[element]['currentElementSize'] 	= null;
    this.e[element]['sizeDifferenz'] 		= null;
    this.e[element]['interval']				= null;
    window.clearTimeout(this.e[element]['interval']);
    }
    }	
    };
    window.onload = function ()
    {
    gxElementSizer.addElement('element', 'height');
    gxElementSizer.addElement('element1', 'height');
    gxElementSizer.addElement('element2', 'height');
    };
    </script>
    </head>
    <body>
    <table>
    <tr><td>
    <div id="content" onfocus="this.blur()" bgcolor="#bfbebe" id="arrows">
        <div id="head">  
    <a href="javascript:gxElementSizer.setElementSize('element',115,30);void(0);alert(this.a.href);">Login</a>
    <a href="javascript:gxElementSizer.setElementSize('element',0,20);void(0);">&uarr;</a> 
    </div>
    </div>
    <div id="element">
    <div id="menu10">
    <ul>
    <li><a href="./link1.html" target="main_frame" onfocus="this.blur()">Startseite</a></li>
    <li><a href="./link2.html" target="main_frame"  onfocus="this.blur()">Anmelden</a></li>
    <li><a href="./link3.html" target="main_frame" onfocus="this.blur()">Abmelden</a></li>
    </ul>
    </div>
    </div>
    </td>
    </tr>
    <tr><td>
    <div id="content" onfocus="this.blur()" bgcolor="#bfbebe" >
    <div id="head">
    <a href="javascript:gxElementSizer.setElementSize('element1',115,30);void(0);">Kat 1</a>
    <a href="javascript:gxElementSizer.setElementSize('element1',0,20);void(0);">&uarr;</a>
    </div>
    </div>
    <div id="element1">
    <div id="menu10">
    <ul>
    <li><a href="./link4.html" target="main_frame" onfocus="this.blur()">Unterpunkt 1</a></li>
    <li><a href="./link5.html" target="main_frame" onfocus="this.blur()">Unterpunkt 2</a></li>
    <li><a href="./link6.html" target="main_frame" onfocus="this.blur()">Unterpunkt 3</a></li>
    </ul>
    </div>
    </div>
    </td>
    </tr>
    <tr><td>
    <div id="content" onfocus="this.blur()" bgcolor="#bfbebe" id="arrows">
    <div id="head">
    <a href="javascript:gxElementSizer.setElementSize('element2',85,30);void(0);">Kat 2</a>
    <a href="javascript:gxElementSizer.setElementSize('element2',0,20);void(0);">&uarr;</a>
    </div>
    </div>
    <div id="element2">
    <div id="menu10">
    <ul>
    <li><a href="./link7.html" target="main_frame" onfocus="this.blur()">Unterpunkt 4</a></li>
    <li><a href="./link8.html" target="main_frame" onfocus="this.blur()">Unterpunkt 5</a></li>
    </ul>
    </div>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Zuletzt geändert von Postaria; 23.11.2007, 11:36.

  • #2
    Hilfe wo ist der Antwort Button Bitte deinen Code umbrechen
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

    Kommentar


    • #3
      habe soweit es geht die langen stellen umgebrochen hoffe es geht jetzt sorry ....

      Kommentar


      • #4
        Hat denn niemand einen Vorschlag auf dieses Problem ?

        Kommentar

        Lädt...
        X