Как сделать отзывчивый бар из динамических значений, поступающих из базы данных

Question

Добрый день! У меня проблема с созданием адаптивной навигационной панели только из HTML, PHP и CSS. (Нет DIVS / Navbar) Как вы можете видеть ниже на изображении OUTPUT. Когда я использовал мобильный телефон или изменил размер своего браузера на меньший. Он выведет мои значения, как на изображении 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

К сожалению, без добавления хотя бы некоторого 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>

Answer 2

Я думаю, что проблема в том, что на рабочем столе вы используете: hover, чтобы раскрыть раскрывающийся список. Для мобильных устройств нет состояния наведения, поэтому вам нужно будет использовать JavaScript (или флажки в стиле формы, чтобы смоделировать его с помощью html / css), что сделало бы его касанием для раскрытия подпунктов.

Это также будет означать, что вы не сможете перейти к элементу верхнего уровня в раскрывающихся списках, так как это развернет раскрывающийся список, а не будет ссылкой. Обходной путь может состоять в том, чтобы сделать выпадающий шеврон справа, который будет его собственной кнопкой, чтобы открыть подменю на мобильном телефоне, а текст по-прежнему будет ссылаться. Это решение, которое я использовал на https://www.firetechcamp.com/

---