Need help with CSS for side menu

HTML & CSS
1

Hi everyone,

I need help with my CSS submenu arrangement. I’m trying to achieve a mega menu that will accommodate as many sub-menus and items as possible. So far, this is what I have: https://jsfiddle.net/Kiwin/kspLfze5/1/
Under Category1 Sub3, I’m trying to make Item6 the last of it’s column so that Item7-9 start next to Item1-3 (upper right corner). Thanks for any help.

2

Hi,

It would be helpful if you could tidy up your JSFiddle somewhat. Pls remove the <head> section from the HTML pane (no need for that) and also remove the <script> tags from the bottom of the pane — the HTML panel is only for, well, HTML.

Also, all of the assets point to http://localhost, which we don’t have access to (as that is your PC).

The best thing to do really, would be to remove any scripts or styling that isn’t relevant to the problem in hand and give us a short, runnable demo demonstrating your issue.

2 Likes
3

Hi @alumno73 and a warm welcome to the forum.

I checked the JsFiddle and noticed your local files could not be accessed.

Please rectify the problem and somebody may be able to help.

1 Like
4

@John_Betong
@James_Hibbard

I’ve done the trimming, first time so my apologies. Hope it’s ok now: Kiwin/gbwLcef2/3/. Thank you and have a nice weekend.

2 Likes
5

If I understand correctly then you are wanting the items to wrap to a new column once they reach the bottom of their container. This is quite awkward and I think the closest you can get is to use CSS columns but you will need to give the items a width so that there is room for more than one column and the parent will need a height otherwise the browser won;t know where to start the new column…

e.g. Something like this:

.menu ul ul {
	background: #000;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	transition: all 1s ease;
	left:60%;
	top: 0%;
	/*bottom: -50%;*/
	column-width:100px;
	 -moz-column-fill: auto;
     column-fill: auto;
	height:100%;
}

You could use flexbox to fill columns automatically also but the problem would be that any orphaned items would stretch to full height and look odd.

1 Like
6

Hi PaulOB,
My initial aim was to put up a big menu that would accommodate as many subcategories and items as possible for each main category. I’ve just made some improvement thanks to your contribution. I’ve been trying since to figure out how to make Sub3 Item1’s sentence fit without breaking. Reducing font-size makes it fit but letters become too tiny. Any help or suggestion? Thank you so much. Latest fiddle is: https://jsfiddle.net/Kiwin/0muhjp3y/

7

Good morning everyone,

Now my side menu has stopped misbehaving. Had to increase “column-width:100px”.

@John_Betong, James_Hibbard, PaulOB

Keep up the good work. Thanks to you guys, I’ve learnt some skills and now I’m better than before. Wish you guys a nice weekend.

4 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.