1
votes

comment raccourcir le fil d'Ariane lorsqu'il apparaît sur un site Web mobile

Lorsque je consulte mon site Web sur un mobile avec de nombreux filtres, la longueur du fil d'Ariane devient trop importante. je veux donc remplacer toutes les balises li qui se trouvent derrière l'avant-dernier li. cela signifie que tous les li sauf le premier, le dernier et le dernier li doivent être remplacés par des points.

Quelqu'un peut m'aider à résoudre ce problème avec jquery, javascript ou css?

<ul class="left">
  <li class="active"><a href="#">Airways</a></li>
  <li><a href="#">Trauma</a></li>
  <li><a href="#">Medical</a></li>
  <li><a href="#">OB | Peds</a></li>
  <li><a href="#">Patient Assessment</a></li>
  <li><a href="#">Proprietary</a></li>
  <li><a href="#">Trauma</a></li>
  <li><a href="#">Medical</a></li>
  <li><a href="#">OB | Peds</a></li>
  <li><a href="#">Patient Assessment</a></li>
  <li><a href="#">Proprietary</a></li>
</ul>

Ceci est juste un exemple de code que j'ai ajouté ici.

php javascript jquery html css

0 commentaires

4 Réponses :

0
votes

Vous pouvez essayer avec jquery comme celui-ci. Fondamentalement, s'il s'agit d'un périphérique de plus petite largeur, et s'il ne s'agit pas du premier, du dernier ou de l'avant-dernier enfant, le texte de la balise de lien est remplacé par '..'.

0 commentaires

0
votes

Ceci est ma première réponse sur le débordement de pile, j'espère que c'est ce que vous voulez c'est le lien codepen

https: // codepen.io/vatzkk/pen/yLYMJeG

HTML

//you can add your conditions over here 

document.getElementById("dropdown").style.display="block";
var arr=[...document.getElementById("bread").children];
var dropdownItems=arr.slice(2,-2);

dropdownItems.map(item=>{
  document.getElementById("bread").removeChild(item);
  document.getElementById("dropdown-list").appendChild(item);
});

Javascript

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul class="left" id="bread">
        <li class="active"><a href="#">Airways</a></li>
 <li id="dropdown" style="display:none">
   <div class="dropdown" >
  <i class="dropbtn">...</i><i class="fas fa-caret-down"></i>
  <div class="dropdown-content" id="dropdown-list">

  </div>
</div>
  </li>
        <li><a href="#">Trauma</a></li>
        <li><a href="#">Medical</a></li>
        <li><a href="#">OB | Peds</a></li>
        <li><a href="#">Patient Assessment</a></li>
        <li><a href="#">Proprietary</a></li>
        <li><a href="#">Trauma</a></li>
        <li><a href="#">Medical</a></li>
        <li><a href="#">OB | Peds</a></li>
        <li><a href="#">Patient Assessment</a></li>
        <li><a href="#">Proprietary</a></li>
    </ul>

0 commentaires

0
votes

Pure CSS Exemple de travail: https://jsfiddle.net/3o8vuwd6/ 2 /

Commencez par donner une classe à votre liste

/* This is just to give it some styling as you haven't given any */
.breadcrumblist li {
    list-style: none;
    display: inline-block;
    padding-right: 0.5em;
}
.breadcrumblist li + li::before{
  content: "/";
  padding-right: 0.5em;
}


/* adjust to your breakpoint. 9999 just so it works on large screen as an example */
@media only screen and (max-width: 9999px)  { 
  /* hide all */
  .breadcrumblist li{
    display: none;
  }
  /* show first and last */
  .breadcrumblist li:first-child,
  .breadcrumblist li:last-child{
    display: inline-block;
  }

  /* add ... to the end of the first one */
  .breadcrumblist li:first-child::after{
    content: "...";
    padding-left: 0.5em;
  }

  /* fiddle with the content we added in styling */
  .breadcrumblist li + li::before{
    content: "";
    padding-right: 0;
  }

}

CSS:

<ul class="left breadcrumblist">

0 commentaires

0
votes

Merci à tous pour vos conseils et enfin j'ai fait quelque chose qui fonctionne selon mes besoins et aussi je veux le partager ici car au cas où à l'avenir si quelqu'un cherche le même problème, il ou elle peut en bénéficier. Cela provient également des modifications que vous venez de publier ci-dessus.

<ul class="left" id="bread_cumb">
 $(document).ready(function(){
        if (window.matchMedia("(max-width: 767px)").matches) 
        
            var width = $(window).width();
            if (width < 720) {
               
            $('#bread_cumb li:not(:first-child):not(:nth-child(2)):not(:last- 
            child):not(:nth-last-child(2))').html('<span style="margin- 
            left:7px;margin-right:7px;">  ...  </span>');
            var last =$('#bread_cumb li:last-child').text();
            var re = /^([A-Za-z0-9_'",.!@#$%^&*()-+=?/\|:]+)[\s,;:]+([a-z]+)/i;  
                var m = re.exec(last);
            $('#bread_cumb li:last-child').html('<a>'+m[1]+' '+m[2]+'...</a>');
               
            }
          });
Thanks all for your valuable ideas.

0 commentaires