• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Need help with CSS

#1
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


Messages In This Thread
Need help with CSS - by lulab - 10-06-2019, 02:26 AM
RE: Need help with CSS - by John_Betong - 10-07-2019, 01:05 AM
RE: Need help with CSS - by lulab - 10-07-2019, 10:05 AM
RE: Need help with CSS - by jreklund - 10-07-2019, 12:09 PM
RE: Need help with CSS - by lulab - 10-08-2019, 01:38 PM
RE: Need help with CSS - by Wouter60 - 10-09-2019, 10:20 AM
RE: Need help with CSS - by lulab - 10-09-2019, 01:37 PM
RE: Need help with CSS - by John_Betong - 10-09-2019, 09:53 PM
RE: Need help with CSS - by lulab - 10-10-2019, 12:46 AM
RE: Need help with CSS - by lulab - 10-10-2019, 02:10 PM
RE: Need help with CSS - by John_Betong - 10-10-2019, 03:00 PM
RE: Need help with CSS - by lulab - 10-11-2019, 03:46 PM
RE: Need help with CSS - by John_Betong - 10-11-2019, 07:36 PM
RE: Need help with CSS - by lulab - 10-12-2019, 01:53 PM

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.