0

I am trying to do a multilevel selection bar. But I am not sure how to create this type of bar. I have tried to use the common navigation bar method, but is doesn't work out the way i wanted.

I want to do something like this, and here is the photo for references: Photo from Amazon browse product's category page

Any suggestion on how to do it? Or any similar examples? (Please show in fiddle example.)

Thank you!

S.T.
  • 49
  • 3
  • 9

1 Answers1

0

You want to create a multi-level unordered list, with each list item that has children, containing another unordered list. E.G.

<ul class="parent">
    <li>
        <a href="#">Category</a>
        <ul class="child">
            <li>
                <a href="#">Sub-category</a>
                <ul class="grandchild">
                    <li>
                        <a href="#">Sub-sub-category</a>
                        <ul class="great-grandchild">
                            <li>
                                <a href="#">sub-sub-sub category</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Sub-category 2</a>
            </li>
        </ul>
    </li>
    <li>Category 2</li>
    <li>Category 3</li>
    <li>Category 4</li>
    <li>Category 5</li>
</ul>

then you would hide all of the children/grandchildren etc with css, and show them on parent:hover/active

ul:not('.parent') {
    display: none;
}

ul.parent > li:hover > ul,
ul.child > li:hover > ul,
ul.grandchild > li:hover > ul,
ul.great-grandchild > li:hover > ul {
    display: block;
}
Joe Fitter
  • 1,309
  • 7
  • 11
  • Hi @Joe Fitter, if I want to make it scrollable, it will disappear in this case. You can see my this example: http://stackoverflow.com/questions/28804878/multilevel-scrollable-menu – S.T. Mar 10 '15 at 10:22
  • 1
    Firstly that is a different question, secondly the way you have done it in the other question is very different to the example above. To solve the issue with your other linked question you will need to look at combining overflow-x: visible and overflow-y: scroll, which will need a parent element adding to the html as explained here: http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue The example above will use completely different css from the question you linked – Joe Fitter Mar 10 '15 at 10:44