Question

在大屏幕上，我的侧边导航效果很好。但是在较小的屏幕上（假设小于768像素），我希望导航的宽度为46像素（仅显示图标）。而且，当我将鼠标悬停在图标上时，我希望在大屏幕上显示导航。

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

在Codepen上，您可以看到CSS实现的有效示例

我可以使用Javascript / jQuery实现相同的功能吗？

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

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

Answer 1

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();
 }

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

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

Answer 2

您可以尝试在css中使用hover属性，然后仅将原始元素的不透明度更改为0。然后可以明显地向其添加过渡“淡入淡出”以使其看起来更平滑。

Answer 3

仅CSS解决方案（here you can resize the screen and it changes it accordingly）

.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;
    }
  
}

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

您还可以仅使用CSS制作动画（从左侧向内滑动），请参见下一个代码段

.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;
    }
  
}

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

在鼠标悬停时显示导航

3 个答案: