Make a list of ul elements and wrap it with a parent element
So, I have a menu that I generate from a php request, the result looks like this:
#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">
<div id="um-fresh" class="um-cat">
<h3><b>Freshwater</b></h3>
<ul>
<li class="um-par"><a href="/books-media/"><b>Books & Media</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/fishing-accessories/"><b>Fishing Accessories</b></a>
</li>
<li class="um-sub"><a href="/fishing-accessories/fishing-nets/">Fishing Nets</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/fishing-tools-accessories/">Fishing Tools & Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/rod-accessories/">Rod Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/smokers-flasks/">Smokers & Flasks</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/sunglasses/">Sunglasses</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/wader-accessories/">Wader Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/wader-repair/">Wader Repair</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/wading-staffs/">Wading Staffs</a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/fishing-clothing/"><b>Fishing Clothing</b></a>
</li>
<li class="um-sub"><a href="/fishing-clothing/coats-jackets/">Coats & Jackets</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/gloves/">Gloves</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/hats-caps/">Hats & Caps</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/freshwater-fishing-clothing-jackets/">Jackets</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/jumpers-fleeces/">Jumpers & Fleeces</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/life-jackets/">Life jackets & Collars</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/socks/">Socks</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/thermals-base-layers/">Thermals & Base Layers</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/trousers-shorts/">Trousers</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/vests-waistcoats/">Vests & Waistcoats</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/waders-boots/">Waders & Boots</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/wading-jackets/">Wading Jackets</a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/fishing-equipment/"><b>Fishing Equipment</b></a>
</li>
<li class="um-sub"><a href="/fishing-equipment/backing-nylon-accessories/">Backing, Nylon & Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/fly-lines/">Fly Lines</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/fly-reels/">Fly Reels</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/fly-rods/">Fly Rods</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/leaders-tippets/">Leaders & Tippets</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/freshwater-fishing-equipment-rod-accessories/">Rod Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/spools/">Spools</a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/flies-fly-tying/"><b>Flies & Fly Tying</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/gifts-miscellaneous/"><b>Gifts & Miscellaneous</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/luggage-storage/"><b>Luggage & Storage</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/spinning/"><b>Spinning</b></a>
</li>
<li class="um-sub"><a href="/spinning/braid-line/">Braid & Line</a>
</li>
<li class="um-sub"><a href="/spinning/spinners/">Spinners</a>
</li>
<li class="um-sub"><a href="/spinning/spinning-accessories/">Spinning Accessories</a>
</li>
<li class="um-sub"><a href="/spinning/spinning-reels/">Spinning Reels</a>
</li>
<li class="um-sub"><a href="/spinning/spinning-rods/">Spinning Rods</a>
</li>
</ul>
</div>
</nav>
What I'm trying to do here is to list them from left to right, wrap its container like an image:
So, instead of having a space under each one <ul>
, I would like the other to be <ul>
located under it.
I know this is possible with a responsive framework, but for compatibility, I don't want them on my site.
+3
user5085217
source
to share
1 answer
Only Css you can use column-count
in your parent in your case # um-fresh.
Then on your children you want to act like a masonry, as you would use display: inline-block;
While it technically has the same support as Flex-box, I would say it is a lighter solution than flex box.
Safer behavior might be to use JSMasonry due to the lack of IE9 and 8 support.
Although you say you can put a conditional operator on <IE9
and activate jsMasonry so you don't pollute your site with extra js. This way you only have a version with CSS and then when the user is in an older browser they get a js masonry so it still looks right.
Also, if you are using Modernizr , you can determine if column counting is working, and if not, run jsMasonary.
so your css for column column will look like this:
#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 & Media</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/fishing-accessories/"><b>Fishing Accessories</b></a>
</li>
<li class="um-sub"><a href="/fishing-accessories/fishing-nets/">Fishing Nets</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/fishing-tools-accessories/">Fishing Tools & Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/rod-accessories/">Rod Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/smokers-flasks/">Smokers & Flasks</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/sunglasses/">Sunglasses</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/wader-accessories/">Wader Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/wader-repair/">Wader Repair</a>
</li>
<li class="um-sub"><a href="/fishing-accessories/wading-staffs/">Wading Staffs</a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/fishing-clothing/"><b>Fishing Clothing</b></a>
</li>
<li class="um-sub"><a href="/fishing-clothing/coats-jackets/">Coats & Jackets</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/gloves/">Gloves</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/hats-caps/">Hats & Caps</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/freshwater-fishing-clothing-jackets/">Jackets</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/jumpers-fleeces/">Jumpers & Fleeces</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/life-jackets/">Life jackets & Collars</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/socks/">Socks</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/thermals-base-layers/">Thermals & Base Layers</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/trousers-shorts/">Trousers</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/vests-waistcoats/">Vests & Waistcoats</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/waders-boots/">Waders & Boots</a>
</li>
<li class="um-sub"><a href="/fishing-clothing/wading-jackets/">Wading Jackets</a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/fishing-equipment/"><b>Fishing Equipment</b></a>
</li>
<li class="um-sub"><a href="/fishing-equipment/backing-nylon-accessories/">Backing, Nylon & Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/fly-lines/">Fly Lines</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/fly-reels/">Fly Reels</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/fly-rods/">Fly Rods</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/leaders-tippets/">Leaders & Tippets</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/freshwater-fishing-equipment-rod-accessories/">Rod Accessories</a>
</li>
<li class="um-sub"><a href="/fishing-equipment/spools/">Spools</a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/flies-fly-tying/"><b>Flies & Fly Tying</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/gifts-miscellaneous/"><b>Gifts & Miscellaneous</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/luggage-storage/"><b>Luggage & Storage</b></a>
</li>
</ul>
<ul>
<li class="um-par"><a href="/spinning/"><b>Spinning</b></a>
</li>
<li class="um-sub"><a href="/spinning/braid-line/">Braid & Line</a>
</li>
<li class="um-sub"><a href="/spinning/spinners/">Spinners</a>
</li>
<li class="um-sub"><a href="/spinning/spinning-accessories/">Spinning Accessories</a>
</li>
<li class="um-sub"><a href="/spinning/spinning-reels/">Spinning Reels</a>
</li>
<li class="um-sub"><a href="/spinning/spinning-rods/">Spinning Rods</a>
</li>
</ul>
</div>
</nav>
+1
source to share