Need help with CSS - Printable Version

Code:

<div id="nav-categories">

<?php



function loop_tree($pages, $is_recursion = false)

{

?>

<ul class="<?= $is_recursion === true ? 'children' : 'parent' ?>">

<?php

foreach ($pages as $page) {

$children = false;

if (isset($page['children']) && !empty($page['children'])) {

$children = true;

}

?>

<li>

<?php if ($children === true) {

?>

<i class="fa fa-chevron-right" aria-hidden="true"></i>

<?php } else { ?>

<i class="fa fa-circle-o" aria-hidden="true"></i>

<?php } ?>

<a href="javascript:void(0);" data-categorie-id="<?= $page['id'] ?>" class="go-category left-side <?= isset($_GET['category']) && $_GET['category'] == $page['id'] ? 'selected' : '' ?>">

<?= $page['name'] ?>

</a>

<?php

if ($children === true) {

loop_tree($page['children'], true);

} else {

?>

</li>

<?php

}

}

?>

</ul>

<?php

if ($is_recursion === true) {

?>

</li>

<?php

}

}



loop_tree($home_categories);

?>

</div>

Code:

div.filter-sidebar { 

margin-bottom : 30px; 

}

div.filter-sidebar .title, .title.alone { 

font-size : 18px; line-height : 1; margin : 0 0 10px; padding : 0; 

}

div.filter-sidebar .title span, .title.alone span { 

border-bottom : 3px solid #8c0707; color : #666; display : inline-block; margin-bottom : -3px; padding-bottom : 10px; 

}

div.filter-sidebar ul { 

list-style : none; padding : 0px; z-index : 1;

}

div.filter-sidebar ul li, div.filter-sidebar ul li a { 

margin-bottom : 1px; 

}

div.filter-sidebar ul li a { 

color : #6d6d6d; display : inline-block; font-size : 13px; 

}

div.filter-sidebar ul li a.selected, div.filter-sidebar ul li a:hover { 

color : #1e88e5; 

}

div.filter-sidebar ul.children { 

padding-left : 13px; 

}

div.filter-sidebar ul.parent i, div.filter-sidebar ul.children i { 

font-size : 10px; 

}

div.filter-sidebar .title a.clear-filter, div.filter-sidebar .title i { 

color : #666; float : right; 

}





ul {

padding: 1em;

text-decoration: none;

color: #fff;

}



ul li ul {

background: #fafafa;

visibility: hidden;

opacity: 0;

min-width: 20rem;

position: relative;

transition: all 1s ease;

margin-top: 2rem;

left: 0;

display: none;

}



ul li:hover > ul, ul li ul:hover {

visibility: visible;

opacity: 1;

display: block;

}



li:hover ul {

display: block;

position: absolute;

left: 90px;

top: 1;

}



li:hover>ul {

display: block;

margin: 0;

padding: 0 10px;

}

PHP Code:

<?php
declare(strict_types=1);
error_reporting(-1);
ini_set('display_errors', '1');

//=====================================================
function fred($val) {
  echo '<hr><pre>' ,print_r($val, TRUE) ,'</pre></hr>';
}

echo $hdr = <<< ____EOT
<!doctype html><html lang="en"><head><title> title </title>
<style>

li   {
  display: inline-block; 
  margin:  0.42em 0 ;
  padding: 0.24em 1.0em;
  background-color: lime;
}

li a {
  background-color: lightgray;
  padding: 0.12em 1.0em 0.12em 0;
  text-decoration: none;
  border-radius: 0.88em;
}
li a:hover {
  background-color: crimson;
  color: snow;
  text-decoration: underline;
}

.bd1 {border: solid 1px #ccc;}
.bga {background-color: aqua;}
.dib {display: inline-block}
.mga {margin: 0 auto;}  
.w88 {width: 88%; }
</style>
</head><body>
____EOT;

$cat = [
[
  'sub1' => 'item1',
  'sub2' => 'item2',
  'sub3' => 'item3',
  'sub4' => 'item4',
],
$cat2 = [
  'sub1' => 'item1',
  'sub2' => 'item2',
  'sub3' => 'item3',
  'sub4' => 'item4',
]
];

fred($cat);

echo '<dl class="w88 XXXmga dib bd1 bga">';

  echo '<dt> array ==> $cat1 </b></dt>';

  echo '<dd>';
    foreach($cat as $id => $items) :
      echo '<ul>';
        foreach($items as $id2 => $item) :
          echo '<li>' 
              .   $id2 
              . '<br>' 
              .   '<a href="#' .$id2 .'">' .$items[$id2] .'</a>'
              .'</li>';
        endforeach;  
      echo '</ul>';
    endforeach;
  echo '</dd>';  

echo '</dl></body></html>';