Скриване на плаващо меню на смартфони/таблети

Използвам плаващо меню на уебсайт, който управлявам. Работи чудесно на компютър, но напълно пречи, когато посещавате уебсайта на таблет или смартфон.

Има ли хитър начин да скриете това плаващо меню за смартфони и таблети? (Скриването му на смартфони е по-важно от таблетите)

МОЯТ CSS:

div.floating-menu {position:fixed;left: 0px;background-image: url("/meny-cirkel.png");width:113px; height:225px; z-index:100;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}

МОЯТ HTML:

<div class="floating-menu">
<p style="text-align: left; margin-bottom: 25px; margin-top: 30px; margin-left: 0px;"><a class="link-floatingmenuheading" href="/bg#top">Menu</a></p>
<a class="link-floatingmenu" href="/bg#criteria">Draft Criteria</a>
<a class="link-floatingmenu" href="/bg#process">The process</a>
<a class="link-floatingmenu" href="/bg#comment">Comment</a>
<a class="link-floatingmenu" href="/bg#news">News</a>
</div>

С уважение Пийт


css smartphone
person Crabfish78    schedule 24.03.2015    source източник
comment
използвайте медийни заявки   -  person Max Novich    schedule 24.03.2015

Отговори (1)


arrow_upward
1
arrow_downward 

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

Този стил ще се прилага само за изгледи на браузър с ширина под 600 пиксела (така че смартфони и таблети)

Разгледайте това: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

person jackstruck    schedule 24.03.2015