html - 带 Mootools 的子菜单 (Joomla 1.5)-6ren

html - 带 Mootools 的子菜单 (Joomla 1.5)

转载作者：太空宇宙更新时间：2023-11-03 18:31:23

25

4

我的 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 来完成这项工作。我该怎么做？

最佳答案

不是很清楚你想要什么。这是一个建议:

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);

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

您还可以使用 visible 吗？ big.hide() : big.show(); 无淡入淡出地显示和隐藏。

Fiddle

关于html - 带 Mootools 的子菜单 (Joomla 1.5)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19741301/

25

4

0

文章推荐： c# - SignalR 我可以传递数据集吗

文章推荐： javascript - Jammit 如何处理 View 特定的 JavaScript

文章推荐： c# - 正则表达式在 C# 中不匹配

文章推荐： ruby - 从外部 URL 下载内容并使用 Ruby 保存在数据库中

mootools - mootools CSS多属性
我试图在Mootools [1.11版]中匹配多个CSS属性，如以下元素所示: 我想匹配具有type ='radio'和value ='dev'属性的元素。尝试了这个，但这不起作用 $$('inpu
mootools - 托管 Mootools 核心及更多库的热链接
问题:是否有到 mootools 核心及更多库的可靠/永久链接？我升级了 mootools 幻灯片并使其可用 online如果有人需要的话。但希望有一个谷歌链接对于 javascript 库，但没
mootools - 如何在 MooTools 中的悬停元素上添加类？
我正在使用 MooTools 1.12 如何在悬停时将类添加到 a 元素？例如我有这个 Some text Some text Some text Some text anf 当鼠标悬停在链接上时
mootools - 如何检查网站中是否实际使用了 mootools.js？
我继承了一个网站项目，其中大部分脚本都包含 mootools.js(大约 40k)。但是，凭直觉，我还没有看到它在哪里使用，考虑到这个项目的性质，咳咳，我认为它可能根本没有被使用! 今晚我“迫于压力”
javascript - Mootools 破坏了我的全局变量!!!谷歌地图 + Mootools
我在 Google map 应用程序中使用 Mootools 来做一些事情，例如 bumpboxes 和其他东西。在我添加 Mootools 脚本之前，一切都 100% 正常工作，无论我是在声明我的全
mootools - 如何使用 Mootools 通过 id 检查元素的存在
如何使用 Mootools 通过 id 检查元素的存在最佳答案 html: some content javascript var foo = document.id('foo'); // or $
mootools - 如何在 MooTools 中创建具有 html 特殊字符内容的新元素？
我正在尝试将大约 200 行 jQuery 代码转换为 MooTools，以避免在现有站点上包含两个库。我只有一行有问题: new Element('span', {text: ' » '
mootools - HTML - MOOTOOLS- 添加选项以在 ie6 中选择框
Please select product ... 我尝试使用 Firefox 并且它工作正常 $('selectId').innertHTML = 'Test test' 但在 ie 上，它不
mootools - 如何使用 Mootools 创建和注入(inject)多个元素？
我有 5 个 a 元素需要注入(inject)额外的 span ，而不是创建新元素 5 次我怎么能只做一次呢？我试过了 var holders= $$('.holders'); holders.eac
mootools - 如何使用 Mootools 创建和注入(inject)多个元素？
我有 5 个 a 元素需要注入(inject)额外的 span ，而不是创建新元素 5 次我怎么能只做一次呢？我试过了 var holders= $$('.holders'); holders.eac
mootools - Mootools 和 Google Closure 库兼容吗？
有人有在同一页面中使用 Closure js lib 和 Mootools 的经验吗？有冲突还是工作正常？最佳答案根据谷歌: The names of all Closure Library f
mootools - 在 PageLoad 上自动打开 Mootools SqueezeBox 弹出窗口
我试图让 SqueezeBox 弹出窗口在打开页面时自动打开，但我使用的代码打开了弹出窗口，但弹出内容未加载。我不太熟悉，因此我需要一些帮助来了解我做错了什么 window.addEvent('do
javascript - mootools : I want to traverse following array in mootools
我正在学习 mootools。我有一个以下格式的数组。我想在 for 循环中遍历它，但不知道该怎么做。 {'apple' : { 'prize' : 10 , 'color' : 'Red' } ,
mootools - mootools 中的 .innerHTML 和 .set ('html' ,'' 之间有什么区别吗？
要在我的网站上设置元素的 html，我主要使用 $('elementId').innerHTML = "text"; 浏览 mootools 文档，我发现给出了这个例子: $('myElement')
javascript - 将 Mootools 1.1 Ajax 调用转换为 Mootools 1.3
我这里有一个 Mootools 1.1 类，我想将其在 Mootools 1.3 中运行。onComplete 函数不知何故无法将“数据”结果发送到 processResults 函数。 Ajax 调
javascript - 在表单将 Mootools 1.1 发送到 Mootools 1.4.1 后更新 div
我有这个 Mootools 1.11 脚本，它在提交表单后更新 div，表单将数据发送到“form.php”文件并返回类似“表单已发送”的消息。我想把它转换成 mootools 1.4.1 Moot
mootools - 防止切换时动态内容丢失
我正在从服务器检索一些数据并更新 div 的 html 内容，如下所示: var req = new Request.JSON({ method: 'get', url: 'index
Mootools 获得二级名称
我看到了用 jquery 获取第二类名称的方法，但是如何在 mootools 中做到这一点，我的元素是我需要匹配完整的类名，例如 li.parent.active 并调整高度(如果我尝试过该类存在
MooTools 链式函数无法执行
我正在使用 MooTools，但我似乎无法执行以下代码。我期望它将 #bar 元素的宽度增加到 50px，然后 alert() 带有“hi!”，并且然后继续将#bar的宽度增加到200px。不管出于什
MooTools:淡出元素？
我有一个当前正在调用 .hide() 的 Element 对象。相反，我想将整个元素(及其子元素)的不透明度淡出到 100%(隐藏)，作为可能超过 500 毫秒或 1000 毫秒的过渡效果。 Fx.T

首页

博学

6Ren·AI

商城

html - 带 Mootools 的子菜单 (Joomla 1.5)

Fiddle