Question

我有一个滚动菜单，我希望隐藏在手机上，并且只能在桌面上看到，但我不知道如何做到这一点，一些帮助赞赏。谢谢！这是我的菜单代码：

Css菜单滚动代码：

#iconuri_oferte_useri {
    float: right;
    position: absolute;
}
.iconuri_dreapta_oferte_useri {
    vertical-align: middle;
    padding: 2px;
    margin-top: 85px;
    right: 2px;
    z-index: 2;
    width: 80px;
    background-color: #fff;
    border-radius: 20px 0 0 20px;
    border-bottom: 1px solid #069;
    border-top: 1px solid #069;
    border-left: 1px solid #069;
}
.iconuri_dreapta_oferte_useri .originale_icon, .iconuri_dreapta_oferte_useri .transport_icon, .iconuri_dreapta_oferte_useri .livrare_icon, .iconuri_dreapta_oferte_useri .transport_retur, .iconuri_dreapta_oferte_useri .plata_rate, .iconuri_dreapta_oferte_useri .plata_card, .iconuri_dreapta_oferte_useri.icon_garantie {
    border-bottom: 1px solid #069;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    margin-bottom: 5px;
}
.iconuri_dreapta_oferte_useri i {
    font-size: 40px;
    text-align: center;
    width: 100%;
    color: #069;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.iconuri_dreapta_oferte_useri .title {
    font-size: 13px;
    text-align: center;
    width: 100%;
    font-weight: 700;
    color: #069;
}
.iconuri_dreapta_oferte_useri .descriere {
    font-size: 10px;
    text-align: center;
    width: 100%;
    color: #f60;
    line-height: 9px;
    padding-bottom: 2px;
}

Html菜单滚动代码：

<div class="iconuri_dreapta_oferte_useri" id="iconuri_oferte_useri" style="top: 82px;">
<div class="originale_icon"><i class="fa fa-check"></i>  <div class="title">PRODUSE ORIGINALE</div> <div class="descriere">Produse originale, verificate</div></div>
<div class="transport_icon"><i class="fa fa-truck"></i>  <div class="title">TRANSPORT</div> <div class="descriere">Gratuit pentru comenzi peste 150 Lei</div></div>
<div class="livrare_icon"><i class="fa fa-clock-o"></i>  <div class="title">LIVRARE</div> <div class="descriere">In 24 ore, acoperire nationala</div></div>
<div class="transport_retur"><i class="fa fa-rotate-right"></i>  <div class="title">RETUR</div> <div class="descriere">In 14 zile de la data livrarii </div></div>
<div class="plata_card"><i class="fa fa-money"></i> <div class="title">PLATI</div> <div class="descriere">Ramburs si card de credit </div></div>
<div class="icon_garantie"><i class="fa fa-empire"></i> <div class="title">GARANTIE</div> <div class="descriere">30 de zile pentru orice produs </div></div>
</div>

Answer 1

你可能正在寻找media queries。

@media (max-width:600px){
  .iconuri_dreapta_oferte_useri{
    display:none;
  }
}

隐藏移动设备上的侧滚动菜单

1 个答案: