将自定义 CSS 导航栏从水平转换为垂直

Posted 2023-03-06

【中文标题】将自定义 CSS 导航栏从水平转换为垂直

【英文标题】：Convert custom CSS navigation bar from horizontal to vertical

【发布时间】：2015-05-31 03:24:59

【问题描述】：

我在 WordPress 网站上有一个自定义 CSS 导航菜单，当前子菜单显示为主菜单下方的水平行。鼠标悬停时出现子菜单。

我希望子菜单在鼠标悬停时垂直下拉。

网站：My Site

这是原始子菜单CSS：

#submenunav div

    position: relative;
    display: none;
    background: rgb(88,178,71); /* Old browsers */


#submenunav div.show

    display: block;
    z-index: 5;


#submenunav ul 

    display: table;
    width: 100%;
    height: 45px;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: solid 1px rgb(29,45,99);


#submenunav li

    display: table-cell;
    min-width: 130px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 45px;


#submenunav a 

    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    /* color: rgb(133,162,102); */
    color: rgb(255,255,255);
    text-transform: uppercase;


#submenunav li

    border-left: solid 1px rgb(29,45,99);


#submenunav li:first-child

    border: none;

我可以通过将 li 更改为 display:block 来使菜单垂直下降。

#submenunav li

    display: block;     <---- CHANGED FROM table-cell
    min-width: 130px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 45px;

问题在于子菜单仍然跨越整个 submenunav div。我可以通过调整 submenunav div 的宽度来纠正这个问题。

 #submenunav div

    position: relative;
    width: 25%;                 <---------------CHANGED FROM 100%
    display: none;
    background: rgb(88,178,71); /* Old browsers */

出于演示目的，我已将站点保持在此状态。

我需要完成的是让子菜单出现在鼠标悬停的主菜单项下方。我希望它们在左侧对齐。

我想我需要为每个主导航按钮创建一个 div 容器，并以这种方式调整每个按钮的大小。

我对 CSS 很陌生，我想一定有一种“更好”的方法来做到这一点。

创建菜单的 WordPress header.php 中的 html 和 php：

<nav>
                    <div class="menu-main-small-container">
                    <ul class="menu">
                        <li class="menu-item home <?php if ($currCat == "home")  echo "current_page_item"; ?>">
                            <a data-category="home" href="https://secure.reilycenter.com/test_area/">HOME</a></li>
                        <li class="menu-item aquatics <?php if ($currCat == "aquatics")  echo "current_page_item"; ?>">
                            <a data-category="aquatics" href="/test_area/?page_id=182">AQUATICS</a></li>
                        <li class="menu-item clubsports <?php if ($currCat == "clubsports")  echo "current_page_item"; ?>">
                            <a data-category="clubsports" href="/test_area/?page_id=196">CLUB SPORTS</a></li>
                        <li class="menu-item group-exercise <?php if ($currCat == "group-exercise")  echo "current_page_item"; ?>">
                            <a data-category="group-exercise" href="/test_area/?page_id=87">FITNESS PROGRAMS</a></li>
                        <li class="menu-item intramurals <?php if ($currCat == "intramuralsports")  echo "current_page_item"; ?>">
                            <a data-category="intramurals" href="/test_area/?page_id=137">INTRAMURALS</a></li>
                        <li class="menu-item outdoor <?php if ($currCat == "outdoor")  echo "current_page_item"; ?>">
                            <a data-category="outdoor" href="/test_area/?page_id=211">OUTDOOR ADVENTURES</a></li>
                        <li class="menu-item youth <?php if ($currCat == "youth")  echo "current_page_item"; ?>">
                            <a data-category="youth" href="/test_area/?page_id=522">YOUTH</a></li>
                    </ul>
                    </div>
                </nav>
                <div id="submenunav">
                    <?php
                        $categories = get_categories();
                        foreach($categories as $category)
                         
                            wp_nav_menu( array('theme_location' => 'header','menu' => $category->cat_name,'fallback_cb' => 'mytheme_nav_fallback') );
                        
                    ?>
                </div>

【问题讨论】：

如果您将子菜单项作为父菜单项的子项，这很容易实现。然后你可以简单地将它们直接放在它们的父级下面，它会显着减少你的代码（HTML 和 CSS）。如下所示，使用 WordPress 菜单系统是个好主意。

【参考方案1】：

我会使用 wp_nav_menu() 将当前菜单替换为真正的 wordpress 菜单，请参阅 the docs。

总而言之，在你的主题的functions.php中注册你的菜单：

function register_my_menu() 
  register_nav_menu('main-menu',__( 'Main Menu' ));

add_action( 'init', 'register_my_menu' )

然后将其添加到您的 header.php 模板中，删除旧菜单：

<nav><?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?></nav>

然后您可以通过 wordpress 后端管理菜单，子菜单将嵌套在第一级 <li>s 内的 <ul>s。这使得样式和定位更加容易，因为您可以相对于父级绝对定位子菜单。

您的 CSS 将从 #submenunav ul 更改为 nav#main ul li ul 等。