如何使用来自数据库的动态值来制作响应式栏

Question

美好的一天！我在执行仅来自HTML，PHP和CSS的响应式导航栏时遇到问题。 （无DIVS /导航栏）如您在输出图像中看到的那样。为什么我用手机或将浏览器调整为较小的浏览器。它将输出我的值，就像在OUTPUT图像中一样。我想要的是使用手机或只是缩小浏览器的尺寸。将有一个包含所有值的按钮，并单击它。这样会破坏我所有的价值观。这是我想要的输出的一个例子。请查看我想要的输出

这是我的CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #f8f8f8;
}
 
ul li {
  display: block;
  position: relative;
  float: left;
  background: #f8f8f8;
}
 
/* This hides the dropdowns */
 
 
li ul { display: none; }
 
ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #000000;
}
 
ul li a:hover { background: #e4e3e3; }
 
/* Display the dropdown */
 
 
li:hover > ul {
  display: block;
  position: absolute;
}
 
li:hover li { float: none; }
 
li:hover a { background: #f8f8f8; }
 
li:hover li a:hover { background: #e4e3e3; }
 
.main-navigation li ul li { 
color: black;
position: relative !important; 
z-index: 9999 !important;

  border-top: 0; }
 
/* Displays second level dropdowns to the right of the first level dropdown */
 
 
ul ul ul {
  left: 100%;
  top: 0;
}
 
/* Simple clearfix */

ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
 
ul:after { clear: both; }

这是我的HTML，PHP代码：

<?php 
function get_menu_tree($parentID) 
{
	global $con;
	$menu = "";
	$sqlquery = " SELECT * FROM category where parentID='" .$parentID . "' ";
	$res=mysqli_query($con,$sqlquery);

    while($row=mysqli_fetch_array($res,MYSQLI_ASSOC)) 
	{
           
           $menu .="<li><a href='base?page=post&categoryID=".$row['categoryID']."'>".$row['name']."</a>";	 

		   $menu .= "<ul>".get_menu_tree($row['categoryID'])."</ul>"; //call  recursively		   
 		   $menu .= "</li>";
    }
    return $menu;  
} 
?> 

	

这是我从HTML代码中调用函数的方式：

 
<div class="container">
  <ul class="main-navigation">

  <?php echo get_menu_tree(0); ?>

  </ul>
</div>
</div>

这是我的数据库结构

这是我在以下代码中的输出

Answer 1

我认为问题是在台式机上，您依靠：hover来显示下拉列表。对于移动设备，没有悬停状态，因此您需要使用JavaScript（或样式化的表单复选框使用html / css对其进行仿真），以使其易于显示子项。

这也意味着您将无法单击下拉菜单中的顶级项目，因为那样会扩大下拉菜单而不是链接。解决方法可能是在右侧制作一个下拉V形字形，这是它自己的按钮，以显示移动设备上的子菜单，文本仍然可以链接。这是我在https://www.firetechcamp.com/

上使用的解决方案

---

Answer 2

不幸的是，在没有添加至少一些JavaScript的情况下，这是我可以获得的最接近纯CSS / HTML解决方案的最接近的方法：

尝试调整浏览器的大小以查看响应式解决方案

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #f8f8f8;
  font-family: Tahoma, Arial;
}
 
ul li {
  display: block;
  position: relative;
  float: left;
  background: #f8f8f8;
}
 
/* This hides the dropdowns */
 
 
li ul { display: none; }
 
ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #000000;
}
 
ul li a:hover { background: #e4e3e3; }
 
/* Display the dropdown */
 
 
li:hover > ul {
  display: block;
  position: absolute;
}

@media( max-width: 600px ){
    
    ul li{
        float:none;
        transition: all 0.3s ease forwards;
    }

    ul li a{
        color: white;
    }
    
    ul>li:first-child{
        background: #4caf50;
        padding-right: 20px;
        position: relative;
    }
    
    ul:hover li{
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important
    }
    
    
    ul>li:first-child:after{
      content:"☰";
      position: absolute;
      top:0;
      height: 100%;
      right: 0;
      margin: 0;
      color: white;
      background: #555555;
      width: 50px;
      font-size: 30px;
      text-align: center;
      line-height: 50px;
      cursor: red;
    }
    
    ul>li:not(:first-child){
        position: fixed;        
        z-index: -1;
        background: #333333;
        opacity: 0;
    }
    
}

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>