Hello Guys,

first of all i want to say a "Hello" to all of you! 

I'm new to jQuery and do my first steps. I have the following Menu in my
HTML:

------ code start ------
<div id="submenu">
<ul>
        <li> test.de Hauptmenü 1 </li>
    <li class="parent item18"> http://www.mainteam.de/ Hauptmenü 2 
        <ul>
                <li> showmore Mehr Infos </li>
        </ul>
    </li>
    <li class="parent item19"> test.de Hauptmenü 3 
        <ul>
                <li> test.fr Weitere Infos </li>
        </ul>
    </li>
</ul>
</div>
------ code end ------

When the HTML Page is loaded, i want to collapse all Submenus available and
on mouseover of the Main Menu Part, the Submenus has to be expanded - on
mouseout collapse.

I have done this by the following code - it works!!

------ code start ------
        jQuery(document).ready(function(){
                jQuery('#submenu ul li').each(function(){
                        var hasclass = jQuery(this).attr('class');
                        if ( hasclass.indexOf('parent') != '-1' )
                        {
                                jQuery('#submenu ul li 
ul').css('display','none');      
                        }
                });
                
                jQuery('#submenu ul li a').mouseover(function(){
                        var hasul = $(this).parent().attr('class');
                        if( hasul.indexOf('parent') != '-1' )
                        {
                                var reparent = hasul.replace('parent ','');     
                        
                                if( reparent != '' )
                                {
                                        var ulstate = $('#submenu ul 
li.'+reparent+' ul').css('display');                                       
                                        if( ulstate == 'none' )
                                        {
                                                $('#submenu ul li.'+reparent+' 
ul').slideDown(500);
                                        } else
                                        {
                                                $('#submenu ul li.'+reparent+' 
ul').slideUp(500);       
                                        }
                                }
                        }
                });
                
                jQuery('#submenu ul li a').mouseout(function(){
                        var hasul = $(this).parent().attr('class');
                        if( hasul.indexOf('parent') != '-1' )
                        {
                                var reparent = hasul.replace('parent ','');     
                        
                                if( reparent != '' )
                                {
                                        var ulstate = $('#submenu ul 
li.'+reparent+' ul').css('display');                                       
                                        if( ulstate == 'none' )
                                        {
                                                $('#submenu ul li.'+reparent+' 
ul').slideDown(500);
                                        } else
                                        {
                                                $('#submenu ul li.'+reparent+' 
ul').slideUp(500);       
                                        }
                                }
                        }
                });
                
        });
------ code end ------

Now my Question

I thinks there's a much better way to do this or???
Where's my Mistake and how can i improve??

Thanks for all,
Sascha
-- 
View this message in context: 
http://www.nabble.com/Need-help-for-a-small-little-Menue-System-tp26073904s27240p26073904.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

Reply via email to