Question

我创建了一个导航栏，用于抓取数据库中的链接并在按钮元素中填充它们。在悬停时，按钮显示存储在db。

中的链接

在php和mysql级别，一切运行良好。

我的问题出在HAMBURGUER图标中。

当我调整浏览器窗口大小不到600px时，我的hamburguer按钮无法打开，里面有链接。它没有任何作用，链接与hambuguer图标并排存在。

我试图解决问题而没有任何运气。我认为问题出在CSS和我将html类放在PHP代码中的顺序。

PHP

require_once('../backend/dbconst.php');
$sql = "SELECT * FROM menu";
$result = $con->query($sql);
echo '<div class="topnav" id="myTopnav">';
    echo '<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>';
    while($row = mysqli_fetch_array($result)){
    echo '<div class="dropdown">';
        echo '<button class="dropbtn">'.$row['menu'].'<i class="fa fa-caret-down"></i></button>';
            echo '<div class="dropdown-content">';
                $sql1 = "SELECT sublink FROM menu_sublink WHERE id_pai=".$row['id'];
                $result1 = $con->query($sql1);
                while($row1 = mysqli_fetch_array($result1)){
                    echo '<a href="'.$row1['sublink'].'">'.$row1['sublink'].'</a>';
                }
            echo '</div>';
    echo '</div>';
    }
echo '</div>';

JAVASCRIPT触发hamburguer按钮

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += " responsive";
} else {
    x.className = "topnav";
}
}

hamburguer的CSS菜单样式和媒体查询正常工作

body {margin:0;}

.topnav {
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

.dropbtn {
    overflow: hidden;
    background-color: #333;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

@media screen and (max-width: 600px) {
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

窗口截屏

动态php响应导航栏

0 个答案: