Collapsible category listing without jQuery

Question

I'm working on an ebay shop. I need to make categories collapsible after I click the root item (if that is even possible) following ebay's guidelines.

Rules:

Ebay doesn't want us to use active content, that means no JavaScript, flash.
It only allows us to use CSS3.
We can't even change the output HTML for categories. So only option available is CSS.

HTML:

<div id="org-categories">
  <div class="ttl">Shop home</div>
  <ul class="lev1">
    <li><a href="#">CAT A</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT B</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT C</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
  </ul>
</div>

If you can change html, maybe we can use some trick with the checkbox element. But if you can only change css, it's like you want automatic door by changing paint color. — AVAVT, Feb 09 '19 at 13:31
Ebay is generating invalid HTML with those nested `
`s ([*ref*](https://stackoverflow.com/q/5899337/1813169)) — MTCoster, Feb 09 '19 at 21:49
@AVAVT Im able to do it by using a radio button and keeping the child ul inside its parent li. that would be quite straight forward but unfortunately, ebay doesnt allow us to change the html. — ashish, Feb 10 '19 at 02:35

A. Meshu · Answer 1 · 2019-02-10T21:01:16.147

So after digging into this subject, your request seems impossible with this markup. BUT with minor adjustments to the html you provide, you can achieve it with this minimal style:

<style>
.lev1 li { display:block; }
.lev1 ul { display:none; }
.lev1 ul:target { display:block; }
</style>
<div id="org-categories">
  <div class="ttl">Shop home</div>
  <ul class="lev1">
    <li><a href="#lev2a">CAT A</a></li>
    <ul id="lev2a">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#lev2b">CAT B</a></li>
    <ul id="lev2b">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#lev2c">CAT C</a></li>
    <ul id="lev2c">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
  </ul>
</div>

*Minor adjustments = change ul's classes to an unique id's. That way the :target pseudo element can affect it.

Hope it solve it, and good luck!

Interesting! let me check this and see if it complies with ebay as i cant change html itself. — ashish, Feb 12 '19 at 03:25

Nathan Do · Accepted Answer · 2019-02-12T18:23:27.507

1

Nice question! Because of this, I just discovered the magic of :focus-within.

<div id="org-categories">
  <div class="ttl">Shop home</div>
  <ul class="lev1">
    <li><a href="#">CAT A</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT B</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT C</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
  </ul>
</div>

Then here comes the magic:

li + .lev2 {
  display: none;
}

li:focus-within + .lev2 {
  display: block;
}

Check it out in a fiddle

edited Feb 12 '19 at 18:23

answered Feb 11 '19 at 18:12

Nathan Do

1,985
19
24

unfortunately, ebay doesnt allow to change the html. – ashish Feb 12 '19 at 03:20
@ashish no issue, just updated the answer. It still works, pretty elegant too ... or so I think. – Nathan Do Feb 12 '19 at 18:23
The only problem is IE support. Nice solution though! – A. Meshu Feb 12 '19 at 23:17

score 0 · Answer 3 · answered Feb 09 '19 at 21:18

Here is one example on how to do this. Whilst this shows expanding menus, it also has some visual effects. Try it out and adapt yourself. The code itself is from http://www.dynamicdrive.com/

<style>

.bgslidemenu {
    font: bold 16px 'Bitter', sans-serif; /* use google font */
    position: relative;
    width: 100%;
}

.bgslidemenu:after { /* clear menu */
    content: '';
    clear: both;
    display: block;
}

/* Top Level Menu */
.bgslidemenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
    float: right; /* change to "left" to left align menu */
}

/* Top level list items */
.bgslidemenu ul li {
    position: relative;
    display: inline;
    margin-right: 20px; /* spacing between each top level menu item */
    float: left;
}

/* Top level menu items link style */
.bgslidemenu ul li a {
    display: block;
    position: relative;
    color: white;
    padding: 14px 10px;
    color: black;
    text-decoration: none;
}

.bgslidemenu ul li a:link, .bgslidemenu ul li a:visited {
    color: black;
}

/* Top level menu items link style on hover */
.bgslidemenu ul li:hover > a {
    color: purple !important;
}

/* LIs links with a sub UL style */
.bgslidemenu ul li > a {
    /* add padding to accomodate arrow inside LIs */
    padding-right: 25px;
}

/* LIs links with NO sub UL style */
.bgslidemenu ul li > a:only-child {
    /* undo padding for non submenu LIs */
    padding-right: 10px;
}

/* LIs links with a sub UL pseudo class (Add down arrow) */
.bgslidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top-color: black;
    top: 50%;
    transform: translateY(-20%);
    right: 8px;
}

/* LIs links with NO sub UL pseudo class */
.bgslidemenu ul li > a:only-child:after {
    /* undo arrow for non submenu LIs */
    display: none;
}

/* Sub ULs style */
.bgslidemenu ul li ul {
    position: absolute;
    left: -5000px;
    top: auto;
    opacity: 0;
    width: 200px; /* width of drop down menus */
    visibility: hidden;
    padding-top: 80px; /* Add large top padding to drop down menu */
    z-index: -1;
    background: #F3F3F3;
    transform: translateY(100px);
    -webkit-transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
    transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
}

/* Sub UL style on hover */
.bgslidemenu ul li:hover > ul {
    visibility: visible;
    left: -30px;
    transform: translateY(-80px); /* move drop down menu upwards (should be smaller than padding-top value above) */
    opacity: 1;
    -webkit-transition: opacity 1s, transform .5s;
    transition: opacity 1s, transform .5s;
}

/* Sub level Menu list items (alters style from Top level List Items) */
.bgslidemenu ul li ul li {
    display: list-item;
    float: none;
    overflow: hidden;
}

/* Add animated line to sub menu item on Mouseover */
.bgslidemenu ul li ul li:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 5px;
    background: purple;
    left: 0;
    top: 50%;
    transform: translate3d(-100%, -50%, 0);
    transition: transform .3s;
}

.bgslidemenu ul ul li:hover:after {
    transform: translate3d(0, -50%, 0);
}

/* Sub Levels link style on hover and when active */
.bgslidemenu ul ul li:hover > a {
    color: purple !important;
}

/* Sub level menu links style */
.bgslidemenu ul li ul li a {
    font: normal 16px 'Bitter', sans-serif;
    padding: 10px;
    padding-left: 40px; /* Add left padding to sub menu links to accommodate animated line */
    position: relative;
    margin: 0;
}


/* ####### responsive layout CSS ####### */
@media (max-width: 700px) {
    /* 
            For mobile and screen browser windows
            Get Sub ULs to expand entire width of document and drop down
            Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
        */

    .bgslidemenu ul {
        float: none;
    }

    .bgslidemenu ul li {
        position: relative;
        display: block;
        width: 100%;
    }

    .bgslidemenu ul li ul {
        width: 100%;
        position: relative;
        border-top: 2px solid #eee;
        /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
        display: none;
    }

    .bgslidemenu ul li:hover > ul {
        display: block;
        padding-top: 0;
        transform: none;
        z-index: 10000;
        left: 0 !important;
        top: auto;
    }

    .bgslidemenu ul ul li:hover > ul {
        left: 0 !important;
        top: auto;
    }
}

</style>


<div class="bgslidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a>
  <ul>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
  </ul>
</li>
<li><a href="https://www.bluhm-de.com">Home</a></li>
</ul>
</div>

To implement this, i'd have to change html which i cannot do — ashish, Feb 10 '19 at 02:37

Collapsible category listing without jQuery

3 Answers3