CodeIgniter Forums

Full Version: Need help with CSS
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hello everyone,

Among several open-source shopping carts, I chose one based on CI found on GitHub for my e-commerce project but now stuck with a sidebar navigation menu. I have searched the web but cannot find a way to style my menu to display and organize content like menu that will open to the right and display all sub-menus in rows and columns.

What I have actually achieved with some CSS tweaks is a tree view (vertical) menu but what I want is make each category, upon hover, display sub-menus in a row/column (horizontal) within a single big table. Fact is because of the database-driven categories nature of CI, I'm  not even sure which chunks of code to present here, so not to overwhelm anyone. Any help is greatly appreciated and I hope, most importantly to be able to learn how to maintain the code, how each part works because I love it.

This is what I have:
Category 1

Sub1
    Item1
Sub2
    Item2
Sub3
    Item3
Sub4
    Item4

Category 2

Sub1
    Item1
Sub2
    Item2
Sub3
    Item3
Sub4
    Item4


This is what I want:
Category 1 Sub1  Sub2  Sub3  Sub4
                  Item1  Item2  Item3  Item4 


Category 2 Sub1  Sub2  Sub3  Sub4
                  Item1  Item2  Item3  Item4



Homepage VIEW:
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>



CSS:
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;
}

Thank you.

**EDIT: added code tags for readability. Poster: see https://forum.codeigniter.com/misc.php?a...help&hid=7 **
Hi lulab,

This forum does not specialise in CSS layouts... may I suggest opening a topic on the following forum because there are many knowledgeable users familiar with CSS and they are very Noobie friendly:

https://www.sitepoint.com/community/latest
(10-07-2019, 01:05 AM)John_Betong Wrote: [ -> ]Hi lulab,

This forum does not specialise in CSS layouts... may I suggest opening a topic on the following forum because there are many knowledgeable users familiar with CSS and they are very Noobie friendly:

https://www.sitepoint.com/community/latest
Hello John,

Will do. Thank you so much for pointing me in the right direction. Have made some progress though.
Hi, could you post your HTML and CSS inside a JSFiddle link instead? It's easier to see the exact code and give suggestions.

https://jsfiddle.net

Here are just an example on a boostrap menu pasted in:
https://jsfiddle.net/copj3v1b/
(10-07-2019, 12:09 PM)jreklund Wrote: [ -> ]Hi, could you post your HTML and CSS inside a JSFiddle link instead? It's easier to see the exact code and give suggestions.

https://jsfiddle.net

Here are just an example on a boostrap menu pasted in:
https://jsfiddle.net/copj3v1b/

Hello,

I wish I could do that. Code is PHP. Thank you anyway.
Run your php script, then right click in your browser window and select View Source.
Now you have the complete html code, which you can add to Fiddle.
Hello everyone,

Here's my fiddle: https://jsfiddle.net/Kiwin/kspLfze5/1/ Thanks for pointing me there!

As you gentle souls can see, I have made some progress compared to my initial CSS. However, Sub1 will align with Category1 only when page size increases. And I'm already seeing a disaster when the second category name becomes twice the length of the first. Most importantly, I want Item6 to be the last of Sub3 so that Item7-9 are listed to the right of Item1-3.  


Thank you.
Try this:

PHP Code:
<?php
declare(strict_types=1);
error_reporting(-1);
ini_set('display_errors''1');

//=====================================================
function fred($val) {
  echo '<hr><pre>' ,print_r($valTRUE) ,'</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>'
[Image: screenshot-2019-10-10-11-44-13.png]
Hi, 

Will do. Thanks. Nice day to you!
@John_Betong

Hi,

I have no idea where to implement this code in CI3. Thank you anyway.
Pages: 1 2