php - 使用 php 和数据库结果对菜单的 CSS 过渡效果

标签 php css

我正在尝试从数据库中提取一系列相关的类别标题 - 这很好。然后,当用户将鼠标悬停在这些标题上时,菜单项将从另一个表中拉出并使用 css 悬停过渡显示。

我的css如下:

<style>
.nav ul { *zoom:1; list-style:none; margin:0; padding:0; background:#333; }
.nav ul:before,.nav ul:after { content:""; display:table; }
.nav ul:after { clear:both; }
.nav ul > li { float:left; position:relative; }
.nav a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    color:#fff;
    border-left:1px solid #595959;
}

.nav a:hover { text-decoration:none; background:#595959; }
.nav li ul { background:#273754; }
.nav li ul li { width:200px; }
.nav li ul a { border:none; }
.nav li ul a:hover { background:rgba(0,0,0,0.2); }

/* SLIDE */
.nav li ul { position:absolute; left:0; top:36px; z-index:1; }

.nav li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in;
}

.nav ul > li:hover ul li { height:36px; }
</style>

剩下的就是这样了:

<nav class="nav">
<ul>
    <?php
    $getSubjectsQuery = $db->query("SELECT * FROM item_subject LEFT JOIN item_sub_menu ON item_subject.sub_id = item_sub_menu.sub_id");
    while($row = $getSubjectsQuery->fetch()){
        echo '<li><a href="subject.php?subject='.$row['sub_id'].'" >'.$row['subject'].'</a>';
    echo '<ul>';
        echo '<li><a href="subject.php?subject='.$row['sub_id'].'" >'.$row['name'].'</a></li>';
    echo '</ul></li>';
    }
    ?>
</ul>
</nav>

当然,我也有相关的数据库连接/ header ......

现在,目前使用当前编码我可以显示我想要的所有“菜单标题”,当我将鼠标悬停在具有“子菜单”的“菜单标题”上时,只会显示一个。我想要做的是列出所有相关的“子菜单”到相关的“菜单标题”:

MENU 1 -> SUB 1
MENU 2 -> SUB 1 | SUB 2 | SUB 3
MENU 3 ->
MENU 4 -> SUB 1 | SUB 2

我认为我需要关注的区域是:

echo '<ul>';
        echo '<li><a href="subject.php?subject='.$row['sub_id'].'" >'.$row['name'].'</a></li>';
    echo '</ul></li>';

以某种方式计算/收集所有相关的“子菜单”,以便将它们全部列出。

我已经忘记了 iv 尝试过的不同事情,不得不将所有事情重做成我能做的最简单的形式。我主要是在看一个额外的 while 循环来拉“子菜单”,两者之间有一个“sub_id”的关系,但这样做并不愉快。

谁能告诉我应该如何最好地解决这个问题,我缺少什么来提取“sub_menus”的所有结果?

编辑:到目前为止我已经尝试过的:

目前我得到的结果是:

MENU 1 -> SUB 1
MENU 1 -> SUB 2 // MENU 1 has been listed twice, once for each matching SUB
MENU 2 -> SUB 3
MENU 3 ->

如果我添加:“GROUP BY item_subject.sub_id”,然后我得到:

MENU 1 -> SUB 1 // SUB 2 is missing from here
MENU 2 -> SUB 3
MENU 3 ->

最佳答案

好的...所以在估计总共 11 小时后,我已经解决了我的问题。

我所做的是将我的查询分成两部分,并在第一个查询之后设置一个变量以在第二个查询中引用,如下所示:

<nav class="nav">
<ul>
    <?php
    $getSubjectsQuery = $db->query("SELECT * FROM item_subject");
    while($row = $getSubjectsQuery->fetch()){
    $menu = $row['sub_id'];

                echo '<li><a href="subject.php?subject='.$row['sub_id'].'" >'.$row['subject'].'</a>';
    echo '<ul>';
    $getSubQuery = $db->query("SELECT * FROM item_sub_menu where sub_id = '$menu'");
        while($sub_row = $getSubQuery->fetch()){
            echo '<li><a href="subject.php?subject='.$row['sub_id'].'" >'.$sub_row['name'].'</a></li>';
        }
    echo '</ul></li>';
    }

    ?>
</ul>
</nav>

在使用额外数据进行测试后,一切正常!

对于 RE:现在有 2 个查询,是否有可能将它们组合成一个来 self 正在使用的查询?

关于php - 使用 php 和数据库结果对菜单的 CSS 过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35576063/

相关文章:

php - Laravel - 多个字段的相同自定义错误消息

php - 没有得到 Guzzle 的预期响应

css 伪代码与之前的一个一起重新创建特色模型

html - CSS:-ms-clear 在 IE11 中不可用?

javascript - jQuery 切换 - 图标切换点击?

php - Composer 安装要求

php - Webkit 转换使用 jquery

php - 拍摄相机照片并将其发送到 iPhone 中的 php 服务器

html - 在 div 中水平放置文本图像

css - 选择菜单和 ie6 .. 再次