Question

我的joomla的客户端工作不正常，但我需要快速完成这个子菜单，以便让客户满意！

我的菜单是html：

<div id="horiz-menu" class="nav">
<ul id="mainlevel">
    <li class=""><a href="#" class="mainlevel" id="active_menu">A Empresa</a></li>
    <li class=""><a href="#" class="mainlevel">Programas</a></li>
    <li class=""><a href="#" class="mainlevel">Vídeos</a></li>
    <li class=""><a href="#" class="mainlevel">Anuncie</a></li>
    <li class=""><a href="#" class="mainlevel">Turma Tudo Bom</a></li>
    <li class=""><a href="#" class="mainlevel">Contactos</a></li>
</ul>

我需要在第二个LI下面出现一个子菜单。

这是我的子菜单代码：

<style type="text/css">
        .clear {
            clear: both;
        }

        #header_menu_interior {
            width: 670px;
            border: 2px solid #304DCD;
            padding: 25px 0px 25px 15px;
        }

        #header_menu_interior_wrapper {
            overflow: hidden;
        }

        .header_menu_interior_section {
            position: relative;
            display: block;
            float: left;
            padding: 0px 25px;
            border-left: 1px solid #CCC;
            min-height: 100%;
            width: 180px;
                padding-bottom: 500em; /* para a linha de divisão ir até ao fundo */
                margin-bottom: -500em;
        }

        .header_menu_interior_section.first {
            border-left: none;
        }

        .header_menu_interior_section.smaller {
            width: 150px;
        }

        .header_menu_interior_section ul {
            display: block;
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .header_menu_interior_section ul li a {
            display: inline-block;
            font-family: Helvetica, Arial, sans-serif;
            font-size: 12px;
            line-height: 12px;
            padding: 5px 0px 5px 0px;
            margin: 0px 0px 0px 10px;
            color: #4D4D4D;
            text-decoration: none;
            text-transform: uppercase;
        }

        .header_menu_interior_section ul li a:hover {
            padding-bottom: 4px;
            border-bottom: 1px solid #304DCD;
        }

        .header_menu_interior_section ul li.header_menu_title {
            padding: 20px 0px 5px;
        }

        .header_menu_interior_section ul li.header_menu_title.first {
            padding-top: 0px;
        }

        .header_menu_interior_section ul li.header_menu_title a {
            margin-left: 0px;
            font-weight: bold;
            color: #1C0F5F;
        }
    </style>
</head>

<body>

    <div id="header_menu_interior">
        <div id="header_menu_interior_wrapper">

            <div class="header_menu_interior_section first">
                <ul>
                    <li class="header_menu_title first"><a href="#">Cultura / Educação</a></li>
                    <li><a href="#">Reticências</a></li>
                    <li><a href="#">Tchova-Tchova</a></li>
                </ul>
                <ul>
                    <li class="header_menu_title"><a href="#">Séries</a></li>
                    <li><a href="#">Toma Lá Dá Cá</a></li>
                    <li><a href="#">D. de Casa Desesperadas</a></li>
                    <li><a href="#">Mentes Criminosas</a></li>
                    <li><a href="#">Mulher</a></li>
                </ul>
            </div>

            <div class="header_menu_interior_section smaller">
                <ul>
                    <li class="header_menu_title first"><a href="#">Telenovelas</a></li>
                    <li><a href="#">Vida Dupla</a></li>
                    <li><a href="#">Aquele Beijo</a></li>
                    <li><a href="#">Fina Estampa</a></li>
                </ul>
                <ul>
                    <li class="header_menu_title"><a href="#">Desporto</a></li>
                    <li><a href="#">Ao Ataque</a></li>
                </ul>
                <ul>
                    <li class="header_menu_title"><a href="#">Infantil</a></li>
                    <li><a href="#">Phineas e Ferb</a></li>
                </ul>
            </div>

            <div class="header_menu_interior_section">
                <ul>
                    <li class="header_menu_title first"><a href="#">Informação</a></li>
                    <li><a href="#">Debate da Nação</a></li>
                    <li><a href="#">Especial Reportagem</a></li>
                    <li><a href="#">Grande Entrevista</a></li>
                    <li><a href="#">Jornal da Noite</a></li>
                    <li><a href="#">Obs. Internacional</a></li>
                    <li><a href="#">O País Económico</a></li>
                    <li><a href="#">Pontos de Vista</a></li>
                    <li><a href="#">Primeiro Jornal</a></li>
                    <li><a href="#">Telediário</a></li>
                    <li><a href="#">Linha Aberta</a></li>
                </ul>
            </div>

            <div class="clear"></div>

        </div>
    </div>

我必须用mootools来完成这项工作。我是怎么做到的？

Answer 1

不太清楚你想要什么。这是一个建议：

var big = $('header_menu_interior');

var horiz_menu = document.getElements('#horiz-menu a')[1];
horiz_menu.id = 'bigmenu';

var visible = 0;
function toggle() {
    visible ? big.dissolve() : big.reveal();
    visible = !visible;
};
horiz_menu.addEvent('mouseenter', toggle);
horiz_menu.addEvent('mouseleave', toggle);

请注意，我在display:none;中添加了#header_menu_interior，因此它会加载未显示的页面。

你也可以使用visible ? big.hide() : big.show();显示和隐藏而不会消退。

子菜单与Mootools（Joomla 1.5）

1 个答案:

Fiddle