5 column drop sitemap layout, is CSS3 Multi Columns overkill?

Hi from 6 degrees wet and soggy 6 degrees C york UK…

I’m planning a footer user sitemap that will have this layout:

It will be static as in now sub menu drop down behaviour but would like a underscore bar (see home example) when a user hovers over a hyperlink.

Any way my question is please… "If i want to get an even 5 column layout am i best just to use an unordered list stacked out horizontally or is it better to use Css3 multi columns.

Foot note: It will sit as a footer for www.davidclick.com

Thanks,
David

If you are creating a menu with a drop down from each menu item then you don’t want to use css columns.

I would use display:table and display:table-cell to create 5 cells across or more easily use flexbox to space items equally.

e.g. very roughly like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
body{background:#000;}
.sub,
.menu{
	margin:0;
	padding:0;
	list-style:none;
	color:#fff;
	box-sizing:border-box;
	background:#333;
}
.menu{
	width:100%;
	max-width:960px;
	margin:auto;
	display:table;/* fallback*/
	display:flex;
	justify-content:space-between;
	font-size:1.5rem;
}
.menu > li{
	display:table-cell;/* fallback*/
	position:relative;
}
.menu a{
	color:#fff;
	text-decoration:none;
	padding:10px;
	display:block;
}
.sub{
	position:absolute;
	left:-999em;
	top:100%;
	width:200px;
	font-size:1.2rem;
	padding:20px 5px 0;
}
.sub a{border-top:1px solid #fff;}
.menu li:hover .sub{left:0}
.menu li.last:hover .sub{left:auto;right:0}
@media screen and (max-width:670px){
	.menu{display:block;}
	.menu li{display:block}
	.sub{position:static;background:#666;width:auto;}

}

</style>
</head>

<body>
<ul class="menu">
  <li><a href="#">Home</a>
    <ul class="sub">
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
    </ul>
  </li>
  <li><a href="#">Examples</a>
    <ul class="sub">
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
    </ul>
  </li>
  <li><a href="#">Packet Prices</a>
    <ul class="sub">
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
    </ul>
  </li>
  <li><a href="#">Pre Wedding</a>
    <ul class="sub">
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
    </ul>
  </li>
  <li class="last"><a href="#">Ideas</a>
    <ul class="sub">
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
      <li><a href="#">Sub menu</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
2 Likes

Slight modification of @PaulOB’s CSS to show the underline on :hover. (only tested in FF)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DropDown Links in Footer</title>
<!--
https://www.sitepoint.com/community/t/5-column-drop-sitemap-layout-is-css3-multi-columns-overkill/222654
Nightwing
Apr 29,2016 11:10 AM
Code by Paul + "interloper"
-->
    <style>
body {background:#000;}
.sub,
.menu {
    margin:0;
    padding:0;
    list-style:none;
    color:#fff;
    box-sizing:border-box;
    background:#333;
}
.menu {
    width:100%;
    max-width:960px;
    margin:auto;
    display:table;  /* fallback*/
    display:flex;
    justify-content:space-between;
    font-size:1.5rem;
}
.menu > li {
    display:table-cell;  /* fallback*/
    position:relative;
}
.menu a {
    color:#fff;
    text-decoration:none;
    padding:10px;
    display:block;
    white-space:nowrap;
}
.sub {
    position:absolute;
    left:-999em;
    top:100%;
    font-size:1.2rem;
    padding:0 5px;
}
.menu li:hover .sub {left:0;}
.menu li.last:hover .sub {
    left:auto;
    right:0;
}
.sub li {
    border-bottom:1px solid transparent;
}
.sub li:hover {
    border-bottom-color:#fff;
}
@media screen and (max-width:670px) {
    .menu {display:block;}
    .menu li {display:block;}
    .sub {
        position:static;
        background:#666;
        width:auto;
    }
}
    </style>
</head>
<body>

<ul class="menu">
    <li><a href="#">Home</a>
        <ul class="sub">
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Examples</a>
        <ul class="sub">
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Packet Prices</a>
        <ul class="sub">
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu Sub</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Pre Wedding</a>
        <ul class="sub">
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li class="last"><a href="#">Ideas</a>
        <ul class="sub">
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu Sub menu</a></li>
        </ul>
    </li>
</ul>

</body>
</html>
2 Likes

@ronpat @PaulOB A huge Grazie Mille for helping achieve my footer nav, i really like it! Here is a live example: http://www.davidclick.com/clickimage.html

In my quest for understanding CSS better ive got a question for anyone with the time / patience.
Question 1: The last time I made li items stack out horizonatally I used to use : display: inline;
now i see a different technique. Am i right in saying its the use of flex box thats causing the li items to display inline? Here is the code illustrated which I think cause the li items to appear like a horizontal nav:

Question 2: The sub nav was invisible when I hovered over it, and by a bit of brutal copy and paste from another site I fixed it. But why did it work? I get z index in terms of stacking order but what was hiding it in the first place?

If any one has a bit of CSS theory they could throw my way I’d be eternally grateful :slight_smile:

1 Like

Yes display:flex will make all immediate children flex items which mean that they will stack horizontally (unless you change their axis). Flexbox is very complicated so I won’t try to explain all the nuances so have a play around here.

It’s supported in most modern browsers now but older versions of IE don’t support it.

It was probably underneath another elements background and thus invisible. Because dropdowns overlay other elements then you need to sure that they are on top and not going under following or previous content.

As your nav bar is in the footer then it might be better to make our nav go upwards rather than downwards where you are making the user scroll to see it all.

e.g.

.navigation li:hover .sub {
    left: 0;
    top: auto;
    bottom: 100%;
}
2 Likes

Wow that worked! Thank you, tried to understand why:
top: auto;
bottom: 100%;
created this great effect! read this:
http://vanseodesign.com/css/auto-positioning/ but nope bit ahead of me but thank you so much!

1 Like

The top auto is not needed if you have not previously set a position for top. I added it to ensure that you had not left in place the top:100% which would mean the menu would be at top:100% and bottom:100% which would over-constrain the positioning and result in bottom being ignored.

I this case auto just means no position for that property.

With absolute positioning you can use top, left, right and bottom at the same time to describe the size of an element but if at any time the dimension is oner-constrained then the browser will ignore one of the values. (e.g if you said top:200px and bottom:200px but the element is only 200px tall then bottom would be ignored. However if the element was 600px tall you would get a 200px tall box in the middle.)

1 Like

Thank you :slight_smile:

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