Welcome Guest, Not a member yet? Register   Sign In
Need help with CSS
#1

(This post was last modified: 10-06-2019, 07:12 AM by ciadmin.)

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 **
Reply
#2

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
Reply
#3

(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.
Reply
#4

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/
Reply
#5

(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.
Reply
#6

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.
Reply
#7

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.
Reply
#8

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]
Reply
#9

Hi, 

Will do. Thanks. Nice day to you!
Reply
#10

@John_Betong

Hi,

I have no idea where to implement this code in CI3. Thank you anyway.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB