How do I get an upside-down list? (5 posts)

  1. mores
    Posted 7 years ago #

    I have this great website design and I'm just doing the photoshop->html transition.
    So now I'm wondering, how do I make my subpPages be listed ON TOP OF the parent Page?

    - subpage3
    - subpage2
    - subpage1



  2. alexleonard
    Posted 7 years ago #

    I'd use the NAVT Plugin - this way you can actually designate any order you want for pages to appear in navigation.

    NAVT gives you lots and lots of class hooks to work with too.

    I would suggest that from a semantics point of view you should still aim to be using nested lists (which NAVT will do for you)

    You'll need to do some css absolute positioning to get the PARENT at the bottom though.

    So you might have

    <ul class="menu">
    <li class="parentpage"><h2>PARENT PAGE</h2>
    <li class="subpage">Sub Page 3</li>
    <li class="subpage">Sub Page 2</li>
    <li class="subpage">Sub Page 1</li>

    Then your fun with CSS begins, in that you'll need something like

    ul.menu {
    display: block;
    height: 80px;
    width: 50px;
    position: relative;
    .parentpage h2 {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 20px;
    .parentpage ul {
    display: block;
    height: 60px;
    width: 50px;
    .parentpage ul li {
    display: block;
    height: 20px;

    Now that's just completely off the top of my head, but I'm sure it's workable..

    I'm off for some dinner...

    Good luck!

  3. mores
    Posted 7 years ago #

    Cool, thanks for the extensive help. I might need to use NAVT anyways since my menu turns out to be a healthy mix of Pages and categories.

    Absolute positioning means fixed heights I'm afraid ... I was planning on making the thing extra flexible.

    Well, I'll post my findings here :)

    Thanks again.

  4. alexleonard
    Posted 7 years ago #

    I'll be intrigued to see the results. I've always liked NAVT for the ability to just put any menu item anywhere on the page, and he gives such a well thought out set of classes that you can pretty much style for any given occasion.

    Good luck!

  5. mores
    Posted 6 years ago #

    OKay, I still didn't get around to finishing our website.
    But I did some fiddling just now and you can solve this with negative topmargins.

    <ul class="upsidedown"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li></ul>
    .upsidedown li {margin-top:-30px;}

    I also found this:
    Not sure I like the div way

Topic Closed

This topic has been closed to new replies.

About this Topic