[Eskymo]

I'm wondering if it's possible to convert this menu into two columns. My css code is:

#navigation-area {
    width: 94%;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
}

#nav li {
	list-style-type: none;
	padding-right: 10px;
	font-weight:bold;
	font-size: 0.75em; /* 12px/16px */
	color: 141D5A;
}
#nav li.last {padding: 0px;}

#nav li a:link, #nav li a:visited { color: #141D5A; text-decoration: none; }
#nav li a:hover, #nav li a:active { color: #F29400; text-decoration: underline; }

and my html:

<div id="navigation-area">
	<ul id="nav">
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li class="last"><a href="#">List item</a></li>
	</ul>
</div> <!-- END navigation-area -->

I'd bascially want to overide these styles with a media query for small screens so that I get a neat 2 column menu on mobile devices that I can style with background coloured boxes rather than an inline list. Very much like the menu you get on this site when viewing on a small screen:

http://thebritishvoiceoverguy.com/

I've looked at the source code and can't figure it out.

I've never done any multi column css - any ideas?

[notbanksy]

Hi Evie

It's much simpler than you think. All you need to do is float each <li> to the left/ right, and have its width at half of the container width. And voila, the list will flow into 2 columns.

If you get stuck give me a shout

[Eskymo]

notbanksy, on 03 February 2012 - 02:58 PM, said:

All you need to do is float each <li> to the left/ right, and have its width at half of the container width. And voila, the list will flow into 2 columns.

Ok next question... I've changed my css to be:

#nav li {
	list-style-type: none;
	padding: 0px;
	margin: 0px 0px 5px 0px;
	font-weight:bold;
	font-size: 0.75em; /* 12px/16px */
	color: #ffffff;
	background:#141D5A;
	width: 50%;
	float: left;
}

Thanks as I've been really struggling with this today!

And now I get a two column nav now, but one of my links is 'Community Involvement' - quite long - so if I add any left/right padding, this breaks the list and makes it back into one column. Is there a way to have that one link span the full width and the rest of the links to span 50% of the width? Or is that asking too much?

[Renaissance-Design]

Yeah. Give that one an ID and give it width: 100%.

Edit: you'll also have to make sure it's an odd number in the list.

This post has been edited by Renaissance-Design: 03 February 2012 - 03:16 PM

[Eskymo]

Renaissance-Design, on 03 February 2012 - 03:15 PM, said:

Edit: you'll also have to make sure it's an odd number in the list.

what do you mean by that? don't understand?

[Renaissance-Design]

It needs to be first, third, fifth etc. If it's an even-numbered position you'll get a line above it with only one item.

[Eskymo]

Renaissance-Design, on 03 February 2012 - 03:18 PM, said:

It needs to be first, third, fifth etc. If it's an even-numbered position you'll get a line above it with only one item.

Oh I see what you're getting at - done it, but now struggling with the widths and margins in between the lists and getting them all the line up on both left and right edges.

[Eskymo]

Don't know if this is overkill, but I've added left and right ids to my list elements like so:

<div id="navigation-area">
	<ul id="nav">
		<li id="lt"><a href="http://www.google.com">About</a></li>
		<li id="rt"><a href="http://www.google.com">Locations</a></li>
		<li id="lt"><a href="http://www.google.com">Products</a></li>
		<li id="rt"><a href="http://www.google.com">Development</a></li>
		<li id="nav-wide"><a href="http://www.google.com">Community Involvement</a></li>
		<li id="lt"><a href="http://www.google.com">Partnering</a></li>
		<li id="rt"><a href="http://www.google.com">Careers</a></li>
		<li id="lt"><a href="http://www.google.com">Media Centre</a></li>
		<li id="rt" class="last"><a href="http://www.google.com">Contact</a></li>
	</ul>
	<div class="clearboth"></div>
</div> <!-- END navigation-area -->

and this is my new css for teh small screen displays:

#navigation-area {
    width: 91%;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
	text-align:center;
}
#nav li {
	list-style-type: none;
	padding: 5px 0px;
	margin: 0px 0px 3px 0px;
	font-weight:bold;
	font-size: 0.75em; /* 12px/16px */
	color: #ffffff;
	background:#141D5A;
	width: 49.5%;
}
#nav li#nav-wide {width: 100%; padding: 5px 0px; float: left;}
#nav li#lt {float: left;}
#nav li#rt {float: right;}
#nav li.last {padding: 5px 0px;}
#nav li a:link, #nav li a:visited { color: #ffffff; text-decoration: none; }

And that work a treat. but it all looks a bit wide in landscape mode, so might have to do another media query for that and make it three columns... maybe that's overkill too.

This post has been edited by Eskymo: 03 February 2012 - 04:07 PM

[Renaissance-Design]

They'd need to be classes rather than IDs as they're used more than once in the page.

[Eskymo]

Renaissance-Design, on 03 February 2012 - 04:14 PM, said:

They'd need to be classes rather than IDs as they're used more than once in the page.

you're so right - thanks for the reminder... I would've spotted that on validation though. Will go change that over. Cheers!