Grow your CSS skills. Land your dream job.

How would you guys structure a tile interface/navigation?

  • # June 26, 2013 at 11:36 am

    I am thinking about building a tile style navigation for a site, sort of Windows 8 style. However, I do not need live tiles (constantly updating). I’d like to build the whole thing in HTML and CSS.

    Two questions:

    1. As long as its logical, clean and there is a breadcrumb, is this useable for most people or does it depart too much from the standard nav?

    2. How should I structure it? Absolute positioning would be the easiest but I feel a ul with span tags is probably the way to go.

    Thoughts?

    Thanks in advance for the input!

    # June 26, 2013 at 11:38 am

    I know I could do absolute positioning on each span, which I might do. But I meant that the other option would be a bunch of divs absolutely positioned.

    # June 26, 2013 at 11:40 am

    I would probably use masonry.js. Seems perfect for this sort of thing.

    # June 26, 2013 at 12:22 pm

    I’m going to try both and see how each comes out. (or the how much of a pain they are)

    I’d definitely prefer all html and css but I don’t need to reinvent the wheel either.

    Thanks @chrisburton!

    # June 26, 2013 at 12:28 pm

    I could be wrong but I may have seen someone do something similar with the Windows 8 UI using CSS regions on CodePen. You could try searching for that, too.

    # June 26, 2013 at 12:36 pm

    The only thing that makes the nervous about regions is the support for it.

    # June 26, 2013 at 2:30 pm

    Ok, just created a [codepen](http://codepen.io/Joe_Temp/pen/fJnGh “Tile ui”). Here’s what I’ve got so far. It’s a ul that is absolutely positioned.

    Do you think this is the best method?

    # June 26, 2013 at 3:06 pm

    If all the heights are going to be the same (at least in each row), you can use the float method and eliminate all the absolute.

    See here: http://codepen.io/anon/pen/lBGwJ

    # June 26, 2013 at 3:13 pm

    Wow. That’s way eaiser! Thanks @lschoen114!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".