Dynamic loading of lists necessitates encapsulating nested lists

I'm currently working on a 3-level dropdown list that pulls content from a database for my project. I want the top level to resemble a tab menu, with a border surrounding the area underneath where the additional lists will appear. However, I am facing some challenges with my code:

<ul id="catsMenu">
    <cfloop query="getCats">
        <li><h2><span><cfoutput>#getCats.group_name#</cfoutput></span></h2>
            <ul>
                <cfloop query="getMain">
                    <li><cfoutput>#getMain.section_name#</cfoutput>
                        <ul>
                            <cfloop query="getDetail">
                                <li><a href="somelink"</a></li>
                            </cfloop>
                        </ul>
                    </li>
                </cfloop>
            </ul>
        </li>
    </cfloop>
</ul>

(I need the getdetail query to have knowledge of the link it's going to)

My main struggle is figuring out how to implement the box around the entire lower section. Should I use absolute positioning for the div, both before or after this list code? I'm unsure of the best approach to take. Thank you in advance for any assistance.

EDIT: This is the desired structure:

---------------------------------
| Tab 1 | Tab 2 | Tab 3 | etc.. |
---------------------------------
-----DIV W/ BORDER---------------
|  /* dropdown stuff            |
|     goes inside here */       |
|                               |
|                               |
|                               |
-------DIV W/ BORDER------------

Answer №1

Have you considered utilizing jQuery and jQuery-UI as a solution? Check out this link for more information: http://jqueryui.com/demos/tabs/

If not, your CF code appears to be suitable; the only adjustment needed is tweaking the CSS. For instance, applying a float left to the first UL element would help align it with the rest of the page. Additionally, setting float, display inline, padding, width, height, etc., on list elements can enhance its appearance.

Here are some examples to refer to for inspiration: , (You can use Firebug to inspect how it's implemented)

If I've interpreted your query correctly...

Answer №2

Hello Eric,

It seems like you can achieve what you're looking for by utilizing the cflayout and cflayoutarea tags in ColdFusion. I believe this link will provide you with a straightforward example:

If you need to pass values from one cflayoutarea to another, you can do so by using the 'request' scope and submitting the parent layout area through ColdFusion.navigate().

I hope this information proves helpful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

Unable to use column formatting on a row using flexbox

I am working on creating a layout with rows and columns where the content in each column is vertically aligned. Here is an example of what I am trying to achieve: Currently, I am using react and have multiple components. The approach I believe will work ...

Which is better: Starting with rows or columns in Bootstrap 4 layout design?

Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...

Creating a personalized CSS class for TYPO3 menu links

I am currently in the process of creating a brand new website using TYPO3 6.2 and incorporating the Bootstrap Package. My goal is to be able to assign custom CSS classes to menu links directly from the backend, and then display these CSS classes within my ...

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

Issue with relative input causing Jquery click event to not fire

Jquery $(document).on("click","[type=text]",function(event) { alert('test'); }); CSS .noWorking:focus{ z-index:100; position:relative; outline:none; box-shadow:0 0 0 1000px rgba(0,0,0,.2); } To ensure the shadow appears on top of all oth ...

Issue with OpenLayers Icon not appearing on screen

I just finished creating a SpringBoot app using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and packaging it as an executable JAR file. Within this app, I have integrated OpenLayers 4 library to display a map with an Icon. Howeve ...

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow fro ...

Using JavaScript to grab an entire div containing an SVG element

I am looking to capture an entire div as an image and save it locally as proof. Despite reading numerous articles on converting SVG to image or div to image, I have encountered challenges in achieving the desired result. Several attempts with JavaScript l ...

Ways to establish the gradient

Here is the code snippet I am currently working with. .imgcol1 { background-image: url(https://picsum.photos/200/300); background-repeat: no-repeat; background-size: cover; height: 190px; width: 520px; } .col1 { margin: 75px; } .grad { b ...

What exactly defines a progressive mobile website?

Currently, I am involved in a project that focuses on creating a responsive website that can be accessed across different platforms and browsers, including Mobile, Desktop, and Tablet. While browsing through a blog, I came across the term "Progressive Mo ...

Resolving the Smooth Scrolling Problem

Here is a simplified version of what I am currently working on: Although I have managed to get the scrolling functionality to work, there seems to be an issue with transitioning from one section to another. For example, when clicking on NUMBER 3, it s ...

The functionality of -moz-background-clip:text is not functioning properly on Firefox browsers

Struggling to incorporate an image into a text within an h1 tag. Here's what I've attempted: <div class="image_clip"> <h1> MY WONDERFUL TEXT </h1> </div> In the CSS file: .image_clip{ background: url(../images/defa ...

Unable to change the background color of h1 tag in a ReactJS project

import React from 'react' export default function Home(){ return<div> <h1 className="bg-dark text-white p-3">Home Page</h1> </div> } I am attempting to modify the background color of the h1 tag in my Reac ...

Pug conditional elements not styling with CSS

Currently immersed in the world of Pug, node.js, and express as I build a web application. Facing hurdles when trying to style elements within Pug conditionals using CSS. For instance, consider this Pug snippet: div(id='outside') if authoris ...

Using HTML and CSS to create a flexbox layout with multiple rows

.ent__food__image { display: flex; justify-content: end; } .bev__food__image { display: flex; justify-content: end; } .kids__food__image { display: flex; justify-content: end; } <main class="flex-container"> <!-- Entrees --> & ...

How can I adjust padding values specifically for mobile devices within the Bulma CSS framework?

After constructing a website with the Bulma CSS framework, I encountered an issue with padding on mobile devices. To optimize the user experience, I need to reduce the padding on smaller screens to 5% or less instead of the initial 10%. However, I am unsur ...

Python code to extract text data from a table using XPath

Recently, I've been using requests and lxml to develop a simple API that can fetch a timetable from a specific website. However, being new to this, I'm struggling to extract any information beyond the hours. Despite experimenting with xpath code ...

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

Utilizing AJAX, I fetched a JSON response and am now looking to map the JSON data into an HTML table structured like this: { "records": [{ "type_id": 000001, "type_desc": "AAAAAA", "type_createby": "Adam" }, { "type ...