Dev Faq
2
votes

Liste des catégories réductible sans jQuery

Je travaille sur une boutique ebay. Je dois rendre les catégories réductibles après avoir cliqué sur l'élément racine (si cela est même possible) en suivant les directives d'ebay.

Règles:

  • Ebay ne veut pas que nous utilisions du contenu actif, cela signifie pas de JavaScript, de flash.
  • Cela nous permet uniquement d'utiliser CSS3.
  • Nous ne pouvons même pas modifier le code HTML de sortie des catégories. La seule option disponible est le CSS. 

<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>

4 commentaires

Si vous pouvez changer html, nous pouvons peut-être utiliser une astuce avec l'élément checkbox. Mais si vous ne pouvez changer que le CSS, c'est comme si vous vouliez une porte automatique en changeant la couleur de la peinture.

Ebay génère du HTML invalide avec ces

3 Réponses :

0
votes

Voici un exemple sur la façon de procéder. Bien que cela montre des menus en expansion, il a également des effets visuels. Essayez-le et adaptez-vous. Le code lui-même provient de 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>

1 commentaires

Pour mettre en œuvre cela, je devrais changer le code HTML, ce que je ne peux pas faire

1
votes

Donc, après avoir creusé ce sujet, votre demande semble impossible avec ce balisage. MAIS avec des ajustements mineurs au html que vous fournissez, vous pouvez y parvenir avec ce style minimal: 

<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>

* Ajustements mineurs = changer les classes d'ul en un identifiant unique. De cette façon, le pseudo élément: target peut l'affecter.

J'espère qu'il le résoudra, et bonne chance!

1 commentaires

Intéressant! laissez-moi vérifier cela et voir s'il est conforme à ebay car je ne peux pas changer le HTML lui-même.

1
votes

Bonne question! Pour cette raison, je viens de découvrir la magie de : focus-within . 

li + .lev2 {
  display: none;
}

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

Alors voici la magie: 

<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>

Découvrez-le dans un violon

3 commentaires

malheureusement, ebay ne permet pas de changer le html.

@ashish pas de problème, vient de mettre à jour la réponse. Cela fonctionne toujours, assez élégant aussi ... ou du moins je pense.

Le seul problème est le support IE. Belle solution cependant!

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor