1
votes

Afficher la navigation au survol de la souris

Sur les grands écrans, j'ai un side-nav qui semble tout simplement bon. Mais sur des écrans plus petits (disons moins de 768px), je veux que la navigation ait une largeur de 46px (ne montrant que les icônes). Et quand je passe la souris sur les icônes, je veux que la navigation soit affichée comme sur de grands écrans.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


<ul class="nav navbar-sidenav">
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="index.html"><i class="fas fa-tachometer-alt margin-r"></i> Dashboard</a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="users.html"><i class="fas fa-users margin-r"></i> Users</a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="fatura.html"><i class="fas fa-euro-sign margin-r"></i> Fatura</a>
    </li>
</ul>

Sur le codepen, vous pouvez voir un exemple de travail réalisé par CSS

Puis-je réaliser la même chose en utilisant Javascript / jQuery?

.navbar-sidenav {
    position: relative;
    flex-direction: column;
    width: 200px;
    background-color: #f1f1f1;
}

<!-- https://codepen.io/JFarrow/pen/fFrpg -->

javascript jquery html css bootstrap-4

4 commentaires

pourquoi voudriez-vous obtenir la même chose avec javascript ou jQuery si vous l'avez déjà en CSS ??

@caramba Je n'ai pas fait ça avec CSS, et sur mobile, il y a parfois des problèmes.

il suffit d'adapter le css du stylet pour s'adapter à votre écran plus grand ... pas besoin de js

S'il y a des problèmes, résolvez ces problèmes. Ajouter plus de technologie aux problèmes est mauvais! Évidemment, il y a des raisons pour lesquelles vous devez utiliser javascript, mais il est difficile d'écrire du javascript bon et propre s'il doit résoudre des problèmes générés en CSS (qui pourraient et devraient être corrigés dans CSS au début!).

3 Réponses :

0
votes

Vous pouvez essayer d'utiliser la propriété hover en css et changer simplement l'opacité de l'élément d'origine à 0. Vous pouvez alors évidemment lui ajouter une transition "fondu" pour le rendre plus fluide.

0 commentaires

1
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<ul class="nav navbar-sidenav">
    <li class="nav-item big">
        <a class="nav-link nav-link-p" href="index.html"><i class="fas fa-tachometer-alt margin-r"></i> Dashboard</a>
    </li>
    
    <li class="nav-item small">
        <a class="nav-link nav-link-p" href="index.html"><i class="fas fa-tachometer-alt margin-r"></i></a>
    </li>
    
    <li class="nav-item big">
        <a class="nav-link nav-link-p" href="users.html"><i class="fas fa-users margin-r"></i> Users</a>
    </li>
    
    <li class="nav-item small">
        <a class="nav-link nav-link-p" href="users.html"><i class="fas fa-users margin-r"></i></a>
    </li>
    
    <li class="nav-item big">
        <a class="nav-link nav-link-p" href="fatura.html"><i class="fas fa-euro-sign margin-r"></i> Fatura</a>
    </li>
    <li class="nav-item small">
        <a class="nav-link nav-link-p" href="fatura.html"><i class="fas fa-euro-sign margin-r"></i></a>
    </li>
</ul>

.navbar-sidenav {
    position: relative;
    left: 0;
    flex-direction: column;
    margin-top: 75px;
    width: 200px;
    margin-left: 28px;
    background-color: #f1f1f1;
}

if($(window).width() < 768){
    $(document).find('.navbar-sidenav').css('width', ' 46px')
        $(document).find('.big').hide();
        $(document).on('mouseover', '.navbar-sidenav', function(){
            $(document).find('.big').show();
            $(document).find('.small').hide();
            $(document).find('.navbar-sidenav').css('width', '200px')
        })

    $(document).on('mouseout', '.navbar-sidenav', function(){
        $(document).find('.navbar-sidenav').css('width', ' 46px')
        $(document).find('.big').hide();
        $(document).find('.small').show();
    })
 }else{
    $(document).find('.small').hide();
 }

4 commentaires

comme je l'ai déjà dit dans le commentaire ci-dessus. Il est mauvais d'utiliser la technologie si elle n'est pas nécessaire. Je n'aime pas cette réponse car vous ajoutez du HTML qui n'est pas nécessaire. En fait, il vous suffit de changer le style et pour cela, vous ne pouvez utiliser que du CSS, aussi simple que cela.

@caramba OP a demandé une méthode JavaScript / jQuery, ils ont déclaré qu'ils savaient déjà comment obtenir le résultat avec CSS

@caramba je répondais à Puis-je réaliser la même chose en utilisant Javascript / jQuery? qui a été posée ... je ne sais pas à quelle question vous répondez

Voir ce commentaire où il dit: "@caramba je n'ai pas fait ça avec CSS, et sur mobile, il y a des problèmes montrant parfois " <= donc les problèmes CSS, peuvent être résolus avec CSS. C'est pourquoi j'ai répondu

0
votes

Solution CSS uniquement ( ici, vous pouvez redimensionner l'écran et le modifier en conséquence )

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<ul class="nav navbar-sidenav">
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="index.html">
            <i class="fas fa-tachometer-alt margin-r"></i>
            <span>Dashboard</span>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="users.html">
            <i class="fas fa-users margin-r"></i>
            <span>Users</span>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="fatura.html">
            <i class="fas fa-euro-sign margin-r"></i>
            <span>Fatura</span>
        </a>
    </li>
</ul>

.navbar-sidenav {
    position: relative;
    left: 0;
    flex-direction: column;
    margin-top: 75px;
    width: 200px;
    margin-left: 28px;
    background-color: #f1f1f1;
}

/* only applies is screen size is less then 768px wide */
@media (max-width: 768px) {

    .navbar-sidenav {
        width: 46px;
        
        -webkit-transition: width 0.5s ease-in-out;
           -moz-transition: width 0.5s ease-in-out;
             -o-transition: width 0.5s ease-in-out;
                transition: width 0.5s ease-in-out;
    }
    
    .nav-link {
        position: relative;
    }

    .navbar-sidenav .nav-link > span {
        position: absolute;
        display: inline-block;
        left: -200px;
        top: 10px;
        visibility: hidden;
        
        -webkit-transition: left 0.4s ease-in-out;
           -moz-transition: left 0.4s ease-in-out;
             -o-transition: left 0.4s ease-in-out;
                transition: left 0.4s ease-in-out;
    }
    
    .navbar-sidenav:hover {
        width: 200px;
    }
    
    .navbar-sidenav:hover .nav-link > span {
        visibility: visible;
        left: 50px;
    }
  
}

vous pouvez également faire des animations (glissant à partir de la gauche) avec CSS uniquement, voir l'extrait suivant

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<ul class="nav navbar-sidenav">
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="index.html">
            <i class="fas fa-tachometer-alt margin-r"></i>
            <span>Dashboard</span>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="users.html">
            <i class="fas fa-users margin-r"></i>
            <span>Users</span>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="fatura.html">
            <i class="fas fa-euro-sign margin-r"></i>
            <span>Fatura</span>
        </a>
    </li>
</ul>

.navbar-sidenav {
    position: relative;
    left: 0;
    flex-direction: column;
    margin-top: 75px;
    width: 200px;
    margin-left: 28px;
    background-color: #f1f1f1;
}

/* only applies is screen size is less then 768px wide */
@media (max-width: 768px) {

    .navbar-sidenav {
        width: 46px;
    }

    .navbar-sidenav .nav-link > span {
        display: none;
    }
    
    .navbar-sidenav:hover {
        width: 200px;
    }
    
    .navbar-sidenav:hover .nav-link > span {
        display: inline-block;
    }
  
}

0 commentaires