[Mootools] ul li menu met Mootools - Softwareontwikkeling

dinsdag 16 oktober 2007 09:52

Acties:

Topicstarter

Ik ben bezig met een ul li menu met mootools. Aangezien de menu's op het internet allemaal met div's zijn of heel veel classen. Echter het werkt gedeeltelijk. Het probleem is dat het mij niet lukt om het default dicht te krijgen en dat hij begint te flippen als je op een submenu klikt.

Heeft iemand een tip?

code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>{config_title} | {config_default} {extra}</title>
        <style type="text/css" media="screen">
</style>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta name="description" content="{config_description}" />
        <meta name="keywords" content="{config_keywords}" />
        <meta name="author" content="{config_author}" />
        <meta name="copyright" content="{config_copyright}" />
        <script type="text/javascript" src="js/mootools.v1.11.js"></script>
<script type="text/javascript">

addEvent('domready', function() {
    var CMenu = new Menu();
});

var Menu = new Class ({
    initialize: function(options)
    {
        // Searching the li elements
        $ES('ul li', 'menu').each(function(e, i) {
            e.setAttribute( 'id', i );

            var oUl = $E('ul', e);

            var mySlide2 = new Fx.Slide(oUl);

                $(e).addEvent('click', function(e){
                        e = new Event(e);
                        if(oUl){
                            mySlide2.toggle();
                        }
                        e.stop();
                });

            // Add an id for selector


        }.bind(this));

    },



});

</script>

</head>

<body>
<div id="menu">
    <ul >
        <li><a href="#menu1">menu 1</a>
            <ul>
                <li><a href="#">element 1</a></li>
                <li><a href="#">element 2</a></li>
            </ul>
        </li>
        <li><a href="#menu1">menu 1</a>
            <ul>
                <li><a href="#">element 1</a></li>
                <li><a href="#">element 2</a></li>
            </ul>
        </li>
       <li><a href="#menu1">menu 1</a>
            <ul>
                <li><a href="#">element 1</a>
                        <ul>
                <li><a href="#">element 1</a></li>
                <li><a href="#">element 2</a></li>
            </ul>


                </li>
                <li><a href="#">element 2</a></li>
            </ul>
        </li>


    </ul>
</div>

</body>
</html>

[ Voor 50% gewijzigd door isomis op 16-10-2007 15:54 . Reden: betere code ]

Webontwikkelaar - Kitesurfer | Gamer

Reageer