zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css menu funktioniert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.06.2007, 11:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.05.2007
Beiträge: 13
Omid befindet sich auf einem aufstrebenden Ast
Pfeil css menu funktioniert nicht

Hallo Leute,

hab hier so ein css menu, das auch soweit funktioniert...
jedoch verlier ich auf den submenus den Focus, könntet ihr mal bitte darüber schauen?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>List Region</title>


    <script type="text/javascript">

         function IEHoverPseudo() 
         {
	        var ulElements = document.getElementsByTagName("ul");
        	
	        for (var i = 0; i < ulElements.length; i++) 
	        {
		        liElements = ulElements[i].getElementsByTagName("li");
	            
	            for (var j = 0; j < liElements.length; j++) 
	            {
		            if (liElements[j].className == "menuparent") 
		            {
			            liElements[j].onmouseover = function() { this.className += " over"; }
			            liElements[j].onmouseout = function() { this.className = "menuparent"; }
		            }
	            }
	        }
        }

        function Initialize()
        {
            AJAX_REQUEST_HANDLER_URL = "/AjaxReqHandler.aspx";
            ProcessCategoryItemsInPage();
            IEHoverPseudo();
        }
        window.onload = Initialize;  
            
            
    </script>
    <style type="text/css">
        /* Style elements for dynamic category menu */

		ul.categorymenu, ul.categorymenu ul 
		{
			margin: 0;
			padding: 0;
			width: 150px; /* Width of Menu Items */
			border-bottom: 1px solid #ccc;
			background: #fff; /* IE6 Bug */
			font-size: 100%;
		}
		
		ul.categorymenu li 
		{
			position: relative;
			list-style: none;
		}
		
		ul.categorymenu li a 
		{
			display: block;
			text-decoration: none;
			color: #777;
			padding: 5px;
			border: 1px solid #ccc;
			border-bottom: 0;
		}
		
		/* Fix IE. Hide from IE Mac \*/
		* html ul#primary-nav li { float: left; height: 1%; }
		* html ul#primary-nav li a { height: 1%; }
		/* End */
		
		ul.categorymenu ul 
		{
			position: absolute;
			display: none;
			left: 149px; /* Set 1px less than menu width */
			top: 0;
		}
		
		ul.categorymenu li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
		ul.categorymenu li:hover ul ul,
		ul.categorymenu li:hover ul ul ul,
		ul.categorymenu li.over ul ul,
		ul.categorymenu li.over ul ul ul { display: none; } /* Hide sub-menus initially */
		
		ul.categorymenu li:hover ul,
		ul.categorymenu li li:hover ul,
		ul.categorymenu li li li:hover ul,
		ul.categorymenu li.over ul,
		ul.categorymenu li li.over ul,
		ul.categorymenu li li li.over ul { display: block; } /* The magic */
		
		ul.categorymenu li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
		
		ul.categorymenu li.menuparent:hover,
		ul.categorymenu li.over { background-color: #f9f9f9; }
		
		ul.categorymenu li a:hover { color: #E2144A; }

    </style></head><body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRDr1Ek+zeffL/UpDhNDGKzDebD2Q==" type="hidden">
</div>

    <div>
        <center><h1>List Region</h1></center>         
    </div>

    <div>
        <table style="width: 638px; height: 296px;">
            <tbody><tr>
                <td style="width: 100px;">
                    <ul class="categorymenu">
                        <li id="CAT001" class="menuparent"><a href="#">Food &amp; Bread</a>
                        <ul class="categorymenu"><li class="menuparent" id="DPT001"><a href="#">Main Office</a></li><li class="menuparent" id="DPT002"><a href="#">Dev Office</a></li><li class="menuparent" id="DPT003"><a href="#">Dev Office</a></li></ul></li>
                    </ul>    
                </td>
                <td style="width: 100px;">
                    <ul class="categorymenu">
                        <li id="CAT002*" class="menuparent"><a href="#">Travel</a>
                            <ul>
                                <li id="Li1" class="menuparent"><a href="#">Indian</a>
                                    <ul class="categorymenu">
                                        <li id="SLi4" class="menuparent"><a href="#">Fry</a></li>
                                        <li id="SLi5" class="menuparent"><a href="#">Curry</a></li>
                                    </ul>
                                </li>
                                <li id="Li2" class="menuparent"><a href="#">Chinese</a></li>
                                <li id="Li3" class="menuparent"><a href="#">European</a></li>
                            </ul>    
                        Loading...</li>
                    </ul>    
                </td>
                <td style="width: 100px;">
                    <ul class="categorymenu">
                        <li id="CAT003*" class="menuparent"><a href="#">Sport</a>
                        Loading...</li>
                    </ul>    
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                    <ul class="categorymenu">
                        <li id="CAT004*" class="menuparent"><a href="#">Music</a>
                        Loading...</li>
                    </ul>    
                </td>
                <td style="width: 100px;">
                    <ul class="categorymenu">
                        <li id="CAT005*" class="menuparent"><a href="#">Movies</a>
                        Loading...</li>
                    </ul>    
                </td>
                <td style="width: 100px;">
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                </td>
                <td style="width: 100px;">
                </td>
                <td style="width: 100px;">
                </td>
            </tr>
        </tbody></table>

    </div>
    </form>
</body></html>
Also das Problem ist wenn ich auf ein Hauptmenu klicke erscheint das Submenu, wie es auch sein soll , aber wenn sich nun etwas unter dem
Submenu befindet, dann kriegt der automatisch den focus und mein submenu verschwindet....
ich hoffe ich konnte mein Problem etwas verständlich darlergen, ansonsten einfach mal den code in eine HTML datei kopieren


1000 Dank im voraus,

Omid
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.06.2007, 14:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Als ersten Schritt, bitte das XHTML validieren. Spontan fallen mir IDs mit "*" auf, die nicht erlaubt sind, aber das ist noch mehr.

Robin
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.06.2007, 07:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.05.2007
Beiträge: 13
Omid befindet sich auf einem aufstrebenden Ast
Standard

Hallo RoToRa und danke für die Antwort,
die Sternchen sind da weil ich nach einen JavaScript benutze der die Menus lädt und der schaut nach diesen Sternchen

Der Script ist im Anhang.


natürlich muß der dann in den Html einfügt werden..

Code:
...
<script type="text/javascript" src="Sample_files/DynamicMenu.js">
    </script>
    <script type="text/javascript">

         function IEHoverPseudo() 
         {
	        var ulElements = document.getElementsByTagName("ul");
        	
	        for (var i = 0; i < ulElements.length; i++) 
	        {
		        liElements = ulElements[i].getElementsByTagName("li");
	            
	            for (var j = 0; j < liElements.length; j++) 
	            {
		            if (liElements[j].className == "menuparent") 
		            {
			            liElements[j].onmouseover = function() { this.className += " over"; }
			            liElements[j].onmouseout = function() { this.className = "menuparent"; }
		            }
	            }
	        }
        }

        function Initialize()
        {
            AJAX_REQUEST_HANDLER_URL = "/AjaxReqHandler.aspx";
            ProcessCategoryItemsInPage();
            IEHoverPseudo();
        }
        window.onload = Initialize;  
            
            
    </script>
    <style type="text/css">
        /* Style elements for dynamic category menu */

		ul.categorymenu, ul.categorymenu ul ....
was könnte noch falsch sein???
Angehängte Dateien
Dateityp: zip DynamicMenu.zip (4,2 KB, 0x aufgerufen)

Geändert von Omid (05.06.2007 um 07:58 Uhr) Grund: Anhang war zu groß
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Rollout Menü Hiead CSS 0 15.08.2010 20:50
CSS Problem mit Menu Alomaman CSS 2 19.06.2010 15:58
Kindelement eines ausgeblendeten Elternelementes ansprechen wandler CSS 7 19.06.2010 02:32
Css Tree Fly Menu thiagojonas CSS 7 30.12.2008 21:10
Horizontale Leiste mit Css und xhtml formatieren bettina CSS 1 06.01.2007 13:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:46 Uhr.