Need help with CSS |
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"> CSS: Code: div.filter-sidebar { 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,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. 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 |
Welcome Guest, Not a member yet? Register Sign In |