CODEWITHSUNDEEP
htmlcsswordpress
Guillaume A.
Guillaume A.

Reputation: 161

Multi-level list formatting in css. Display horizontally or vertically depending on list item class

I am using wordpress for developping a website and I added the main menu of my site in the footer. I'd like to format the list in the following way, so I need to use custom css :

Page 1      Page 2                          Page 3      Page 4      Page 5
Page 1.1    Page 2.1 (bold) Page 2.2 (bold) Page 3.1    Page 4.1
Page 1.2    Page 2.1.1      Page 2.2.1      Page 3.2    Page 4.2
Page 1.3    Page 2.1.2      Page 2.2.2      Page 3.3
Page 1.4    Page 2.1.3      Page 2.2.3      Page 3.4
Page 1.5    Page 2.1.4      Page 2.2.4      Page 3.5
                                            Page 3.6

To sum up :

My wordpress theme generates the html code and gives a specific class for a list item which has some children (class='menu-item-has-children'), so with the right css selectors, I should be able to do it, but I didn't find how to.

Here is my code : https://jsfiddle.net/aqt9vw4u/

Could anyone please explain me how to format my list that way.

Upvotes: 0

Views: 306

Answers (1)

Tom Savage
Tom Savage

Reputation: 76

First things first you need to reorganize your lists to all be using the same hierarchy. Since you're going to have certain lists having sublists, they all need to be setup the same regardless of whether they have sublists. Then once you've fixed that, it's a matter of listing them certain directions which is done easiest using flexbox. Since this is wordpress, your template should be able to tell if a list has children, and then echo a header or not.

https://jsfiddle.net/aqt9vw4u/3/

<ul class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-4578"><a href="#">Page 1</a>
    <ul class="sub-menu">
        <li id="menu-item-number" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-no-children menu-item-number">
            <ul class="sub-menu">
                <li id="menu-item-4357" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2783 current_page_item menu-item-4357"><a>Page 1.1</a></li>
                <li id="menu-item-4358" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4358"><a>Page 1.2</a></li>
                <li id="menu-item-4365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4365"><a>Page 1.3</a></li>
                <li id="menu-item-4359" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4359"><a>Page 1.4</a></li>
                <li id="menu-item-4360" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4360"><a>Page 1.5</a></li>
            </ul>
        </li>
    </ul>
</li>

By changing your other lists to be structured like your second list that has sub-sub lists you can accomplish what you're looking for.

Upvotes: 0

Related Questions