Create a list of items that are enclosed within a parent element

My menu is generated from a php query and the output is as follows:

#ultra-menu {
  width: 92%;
  background-color: rgba(255, 255, 255, 0.90);
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  border-radius: 35px;
  max-height: 300px;
  padding: 25px;
  top: 82px;
  z-index: 999999;
}
#ultra-menu h3 {
  text-transform: uppercase;
  color: #e4810b;
  text-align: left;
  margin-top: 0px;
  padding-top: 0px;
}
#ultra-menu a {
  color: #28281e;
}
#ultra-menu a:hover {
  color: #e4810b;
}
#ultra-menu ul {
  margin: 7px;
  float: left;
}
.um-cat {
  display: none;
  text-align: left;
}
#um-fresh {
  display: block;
}
<nav id="ultra-menu" class="site-sub-navigation align-center" role="navigation">
  // Menu items here...
</nav>

I want to adjust the layout of the menu so that instead of each <ul> having whitespace underneath it, I want the other <ul> items to wrap around horizontally under the same container.

Although I know this can be achieved with flex box's, I am looking for a solution that doesn't rely on them for compatibility reasons.

htmlcss

Answer №1

Utilize CSS to implement the column-count property on the parent element with the ID #um-fresh.

For the child elements to display in a masonry-like layout, set their display property to inline-block.

While column-count has similar browser support as Flexbox, it is considered an easier solution by some developers.

Check Flex Box Compatibility

See Column Count Compatibility

To ensure consistency and compatibility, consider using JSMasonry for browsers like IE9 and 8 that lack support for CSS-only solutions.

If needed, add a conditional statement targeting older versions of IE to activate jsMasonry dynamically without compromising the site's performance.

If you are employing Modernizr, leverage its detection capabilities to switch to jsMasonry if column-count is not supported.

Your CSS code for implementing Column Count:

#ultra-menu {
  width: 92%;
  background-color: rgba(255, 255, 255, 0.90);
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  border-radius: 35px;
  max-height: 300px;
  padding: 25px;
  top: 82px;
  z-index: 999999;
}
#ultra-menu h3 {
  text-transform: uppercase;
  color: #e4810b;
  text-align: left;
  margin-top: 0px;
  padding-top: 0px;
}
#ultra-menu a {
  color: #28281e;
}
#ultra-menu a:hover {
  color: #e4810b;
}
#ultra-menu ul {
  margin: 7px;
  display: inline-block;
}
.um-cat {
  display: none;
  text-align: left;
}
#um-fresh {
  display: block;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
}
<nav id="ultra-menu" class="site-sub-navigation align-center" role="navigation">
  <div id="um-fresh" class="um-cat">
    <h3><b>Freshwater</b></h3>
    <ul>
      <li class="um-par"><a href="/books-media/"><b>Books &amp; Media</b></a>
      </li>
    </ul>
    // Additional nested UL lists go here...
  </div>

</nav>

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

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

jqueryhtmlajaxformsfile

I'm having trouble getting a CSS transition to work on a PNG sequence using jQuery in Mozilla

For my latest project, I decided to create an animation using a PNG sprite sequence. The idea was to add a smooth transition effect on hover and have the animation play in reverse when the hover state ends. If you want to take a look at the code yourself, ...

jquerycss

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

javascriptcsswebpackvue.jshtml-webpack-plugin

styled components are having issues with background gradients and opacity not functioning properly

Hello, I am currently working with styled components and have the following global style code: const GlobalStyle = createGlobalStyle` html{ font-family: roboto; background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0 ...

csstypescriptnext.jsstyled-components

Using a forward slash in the path for the href attribute in a CSS link within an ejs file

Image 1: Configuring express.static for the public folder Image 2: Adding href="/app.css" in post.ejs file Image 3: Final result While experimenting with using /app.css and app.css in the post.ejs file, I noticed that the outcome was consistent with th ...

cssnode.jshttpexpressejs

Embed an audio file onto a webpage

Is there a way to add an audio file to my website if I only have the .mp3 version and not the .ogg one? When I try to play the audio, it doesn't work. Can someone help me with this issue? Here is the code I am currently using: <audio controls auto ...

htmlaudioogg

I'm having trouble adding a background image, even though I have set it to static. What could be

I attempted to add a background image to my Django website, but unfortunately, it was not successful. I followed the steps provided in this Stack Overflow answer here, however, it did not work. I even made changes to the database by migrating them, but s ...

javascriptpythonhtmlcssdjango

Opening a new tab in Angular 6 from a component with freshly generated HTML (containing input data)

Hello everyone. I have a requirement where I need to open a new browser tab with formatted input data from a modal component. Here's an example code snippet that attempts to achieve this using ng-template: @Component({ template: '< ...

htmlangulartypescript

A step-by-step guide to incorporating expandable and collapsible images within a div element using X

I have successfully created dynamic divs with some data that expand and collapse perfectly. Now I am looking to add expand and collapse images on these divs. I am relatively new to designing in xslt. <xsl:template match="category[key!='org.model.C ...

javascriptjqueryhtmlcssxslt

Adjust the vertical alignment of an HTML element

I've been trying to make an image move using the variable counter, but for some reason, it's not working. If I set document.getElementById("movee").style.top directly to a number, it works fine. Combining it with the counter variable should theor ...

javascripthtml

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

Is there a way to ensure that the div of my template spans 100% in width and height?

I'm attempting to make my div 100% in size but I am having trouble achieving it. Here is my code: <template> <div> <Navbar/> <Calendar/> </div> </template> <script setup> import Calendar from &apos ...

cssvue.js

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Tips for preventing a page from automatically scrolling to the top after submitting a form

Recently, I set up a form where users can input values. The form is set to submit either on change or when the user hits enter, depending on which value they want to update. However, after the values are submitted, the page automatically jumps back to the ...

javascriptphpjqueryhtmlforms

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

I have a scrollable iframe set up on iOS like this: <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ..."> <iframe style="height: 600px, ..."> </iframe> </d ...

javascriptioscssiphoneiframe

Achieving an italicized appearance throughout an HTML document

I recently downloaded a sample page from the Mathjax website and acquired their package from Github to use it locally. In addition, I wanted to incorporate the computer modern font, so I unzipped the file containing ttf files into fonts/cmu. Here's ...

htmlcssmathjax

Ensure the first column is aligned to the right and the second column is aligned to the left within a

After reviewing the official Bootstrap grid layout page, I noticed numerous examples of alignment. I am eager to find a class that will help achieve a layout similar to the one shown in https://i.stack.imgur.com/OPYrZ.png. I want all content in the first ...

htmlbootstrap-4bootstrap-grid

External JavaScript file not executing defined function

My homepage includes a register form that should open when the register button is clicked. However, I am encountering an issue where the function responsible for opening the form from another JavaScript file is not being triggered. Here is the HTML code: ...

javascriptjqueryhtml

summoning the iframe from a separate window

In my current setup, I have a link that passes a source to an iframe: <a href='new.mp4' target='showVideo'></a> <iframe src='sample.jpg' name='showVideo' ></iframe> However, what I would lik ...

javascriptphphtmliframe