如何将导航菜单列表组织为WordPress中的列？

时间：2015-05-07 21:38:45

标签： jquery css wordpress list menu

这就是我最糟糕的时光。我在一个开发站点（基于WordPress）上工作，可以看到here。您可以看到“课程表”部分的响应式导航在移动设备上运行良好。它在移动视图中的工作方式非常有用，但在桌面视图中却存在挑战。

我们希望课程安排悬停菜单由3列（每个列彼此相邻）组成。 “微软培训”及其所有子链接将位于悬停菜单的一列，然后是“开发人员培训”和“思科培训”位于中间列，其余技术将位于第三和第四列（参见随附的模型）。这样就可以实现“课程安排”的悬停菜单。是广泛的，但它不会有一个巨大的长列表。

现在，我知道如何在某种程度上这样做。如果我可以使用它自己的类（即col1，col2，col3，col4）将div中的每个部分隔离，我可以浮动这些div并按照我想要的方式对齐它们。所以，问题不在于我是否知道如何进行设计，我当然这样做。问题是，由于这些菜单系统内置于默认的WordPress功能，我不能只是在我想要的地方编写div（不编辑WordPress核心文件），因此我没有运气。如果这是直接的HTML / CSS，我只需用div包装我想要的每个li标签，并使用CSS将它们定位为列，并最有可能浮动。

我尝试使用jQuery insertBefore和insertAfter尝试在我想要的地方插入一些div，但我没有意识到你可以在一个地方插入一个开头div标签，在另一个地方插入一个结束div，jQuery和DOM只允许您在一个地方插入整个div（开始和结束标记）。

我知道必须有一种方法可以通过jQuery来做到这一点，我只是不知道如何。我花了5个小时左右没有成功。

这是开发站点的代码（直接从视图页面源获取）。请记住，我无法硬编码或编辑任何导航HTML。我只能通过CSS操作或通过jQuery插入我需要它们的div。我已经非常厌倦了CSS路线。

提前致谢！

以下是代码： 

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                <div class="menu-primary-menu-container"><ul id="menu-primary-menu" class="nav-menu"><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://devwww.interfacett.com/">Home</a></li>
    <li id="menu-item-32" class="course-schedule menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-32"><a href="http://devwww.interfacett.com/course-schedule/">Course Schedule</a>
    <ul class="sub-menu">
        <li id="menu-item-283" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-281 current_page_item menu-item-has-children menu-item-283"><a href="http://devwww.interfacett.com/course-schedule/microsoft-training/">Microsoft Training</a>
        <ul class="sub-menu">
            <li id="menu-item-249" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-249"><a href="#">Windows 7</a></li>
            <li id="menu-item-250" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-250"><a href="#">Windows 8</a></li>
            <li id="menu-item-252" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-252"><a href="#">Windows Server 2012</a></li>
            <li id="menu-item-251" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-251"><a href="#">Windows Server 2008</a></li>
            <li id="menu-item-253" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-253"><a href="#">IIS</a></li>
            <li id="menu-item-255" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-255"><a href="#">Exchange Server 2013</a></li>
            <li id="menu-item-254" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-254"><a href="#">Exchange Server 2010</a></li>
            <li id="menu-item-256" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-256"><a href="#">PowerShell</a></li>
            <li id="menu-item-257" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-257"><a href="#">System Center</a></li>
            <li id="menu-item-258" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-258"><a href="#">BizTalk Server 2013</a></li>
            <li id="menu-item-260" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-260"><a href="#">SharePoint 2013</a></li>
            <li id="menu-item-259" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-259"><a href="#">SharePoint 2010</a></li>
            <li id="menu-item-261" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-261"><a href="#">SQL Server 2012 / 2008</a></li>
        </ul>
    </li>
        <li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-244"><a href="#">Developer Training</a>
        <ul class="sub-menu">
            <li id="menu-item-262" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-262"><a href="#">Web Development</a></li>
            <li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-263"><a href="#">Mobile App Development</a></li>
            <li id="menu-item-264" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-264"><a href="#">.NET Development &#038; Visual Studio</a></li>
            <li id="menu-item-265" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-265"><a href="#">Java Programming</a></li>
            <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-266"><a href="#">Team Foundation Server 2013</a></li>
            <li id="menu-item-267" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-267"><a href="#">Team Foundation Server 2012</a></li>
        </ul>
    </li>
        <li id="menu-item-245" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-245"><a href="#">Cisco Training</a>
        <ul class="sub-menu">
            <li id="menu-item-268" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-268"><a href="#">Cisco CCNA Switching &#038; Routing</a></li>
            <li id="menu-item-269" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-269"><a href="#">Cisco CCNP</a></li>
            <li id="menu-item-270" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-270"><a href="#">Cisco Training &#8211; HD TelePresence</a></li>
        </ul>
    </li>
        <li id="menu-item-246" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-246"><a href="#">IT Security Training</a>
        <ul class="sub-menu">
            <li id="menu-item-271" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-271"><a href="#">CISSP / CEH / PKI Security+</a></li>
        </ul>
    </li>
        <li id="menu-item-247" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-247"><a href="#">Business Training</a>
        <ul class="sub-menu">
            <li id="menu-item-272" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-272"><a href="#">Project Management</a></li>
            <li id="menu-item-273" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-273"><a href="#">ITIL</a></li>
            <li id="menu-item-274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-274"><a href="#">COBIT</a></li>
            <li id="menu-item-275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-275"><a href="#">Business Analysis</a></li>
            <li id="menu-item-276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-276"><a href="#">Scrum</a></li>
        </ul>
    </li>
        <li id="menu-item-248" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-248"><a href="#">Other Training</a>
        <ul class="sub-menu">
            <li id="menu-item-277" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-277"><a href="#">CompTIA</a></li>
            <li id="menu-item-278" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-278"><a href="#">Citrix</a></li>
            <li id="menu-item-279" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-279"><a href="#">VMware</a></li>
            <li id="menu-item-280" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-280"><a href="#">Red Hat Linux</a></li>
        </ul>
    </li>
    </ul>
    </li>
    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://devwww.interfacett.com/remotelive/">RemoteLive™</a></li>
    <li id="menu-item-42" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42"><a target="_blank" href="http://video.interfacett.com">Video Training</a></li>
    <li id="menu-item-43" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43"><a target="_blank" href="http://blogs.interfacett.com">Tech Blog</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://devwww.interfacett.com/instructors/">Instructors</a></li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://devwww.interfacett.com/about/">About</a></li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://devwww.interfacett.com/contact/">Contact</a></li>
    </ul></div>        </nav>

0 个答案:

没有答案
相关问题
最新问题