Tutorial/教程 cXF - 超级菜单 DIY 示例代码

[oksgo]

这是顶部导航菜单的超级菜单的示例代码：

<div class="cxf-megaMenu">
    <div class="cxf-megaMenu-column">
        <h3>First Category</h3>
        <ul>
            <li><a href="#">Test link</a></li>
            <li><a href="#">Another test link</a></li>
            <li><a href="#">Just testing</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Maybe longer test link</a></li>
            <li><a href="#">Other links</a></li>
            <li><a href="#">New link</a></li>
            <li><a href="#">End link</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Home</h3>
        <ul>
            <li><a href="#">Hometown</a></li>
            <li><a href="#">Room</a></li>
            <li><a href="#">Garden</a></li>
        </ul>

        <h3>Far far away</h3>
        <ul>
            <li><a href="#">Sea</a></li>
            <li><a href="#">Mountains</a></li>
            <li><a href="#">Hills</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Some category</h3>
        <ul>
            <li><a href="#">customizeXF</a></li>
            <li><a href="#">Add-ons</a></li>
            <li><a href="#">DIY</a></li>
            <li><a href="#">Icons</a></li>
            <li><a href="#">Nodes</a></li>
            <li><a href="#">Style properties</a></li>
            <li><a href="#">Options</a></li>
            <li><a href="#">Admin</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Related Categories</h3>
        <ul>
            <li><a href="#">XenForo</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Website</a></li>
        </ul>

        <h3>Contact</h3>
        <ul>
            <li><a href="#">Hello</a></li>
            <li><a href="#">The end</a></li>
        </ul>
    </div>
</div>

<style>
.cxf-megaMenu,
.cxf-megaMenu a,
.cxf-megaMenu ul,
.cxf-megaMenu li,
.cxf-megaMenu div {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.cxf-megaMenu {
    display: inline-block;
    width: 100%;
}
.cxf-megaMenu .cxf-megaMenu-column {
    float: left;
    max-width: 100%;
    padding: 0 2%;
}
.cxf-megaMenu ul li {
    display: block;
}
.cxf-megaMenu h4 {
    font-size: 18px;
}
</style>

插件地址：

XF-Add-ons - [cXF] Top Navigation

oksgo.com

 

[ChatGPT-AI]

这段代码是一个顶部导航菜单的示例代码，使用了超级菜单的样式。以下是代码的解释：

- `<div class="cxf-megaMenu">`：这是最外层的容器，包含了整个导航菜单。
- `<div class="cxf-megaMenu-column">`：这是每一列的容器，在这个示例中，有四个列。
- `<h3>`：这是每一列的标题。
- `<ul>`：这是每一列下的无序列表，包含了具体的链接。
- `<li>`：这是每一个链接的容器。
- `<a>`：这是实际的链接。
- `<style>`：这是内联样式，用于自定义超级菜单的外观。
- `.cxf-megaMenu`：使用了 `display: inline-block;` 将菜单呈现在一行，并设置了 `width: 100%;` 让菜单占满整个父容器的宽度。
- `.cxf-megaMenu .cxf-megaMenu-column`：设置每一列的样式，使用了 `float: left;` 让每一列浮动到左侧，并设置了 `max-width: 100%;` 让每一列的宽度不超过父容器的宽度的百分之一百。
- `.cxf-megaMenu ul li`：将列表项显示为一个块级元素。
- `.cxf-megaMenu h4`：设置标题的字体大小为 18 像素。

你可以根据需要修改菜单的内容和样式，添加或删除列、标题和链接，以及调整顶部导航菜单的样式。