Menu Dispositifs mobiles CSS et hamburger

J'ai conçu un site Web qui utilise un menu CSS hamburger pour activer une barre de défilement avec des liens vers différentes pages Web sur le site.Menu Dispositifs mobiles CSS et hamburger

J'ai aussi écrit une application iPhone/Android qui doit avoir un menu hamburger qui ouvre un travail de curseur qui exécute le code rapide et Android.

Je veux ajouter les liens iphone/android hamburgers SlideBar sur le site (qui a son propre menu hamburger)

Comment puis-je tester sur le site si un appareil mobile ou un PC, donc je ne peux éteignez si "Website" hamburger si c'est un mobile, puisque j'ai déjà et besoin du menu hamburger sur le mobile.

J'ai php sur le site afin que je puisse supprimer le menu hamburger sur le site si c'est un mobile.

Ceci est la page principale

<html> 


<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none" id="mySidebar"> 
<button class="w3-bar-item w3-button w3-large" onclick="w3_close()">Home</button> 
<a href="menu_01_angular.php" class="w3-bar-item w3-button">Link 1</a> 
<a href="#"       class="w3-bar-item w3-button">Link 2</a> 
<a href="#"       class="w3-bar-item w3-button">Link 3</a> 
</div> 






<div zclass="w3-main" id="main"> 
<div class="w3-teal"> 
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">&#9776;</button> 
<div class="w3-container"> 
<h1>My Page</h1> 
</div>

Merci

Source

2017-08-26 Jimmy

il est appelé réactif et vous pouvez y parvenir en utilisant (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp) [requêtes @media css] –

donc il y a quelques façons de le faire, mais un très simple est quelque chose comme ceci:

var width = $(window).width(); //jquery 
var width = window.innerWidth; //javascript 

if(width > 1000){do large screen width display) 
else{handle small screen}

bien sûr 1000 est juste un nombre arbitraire. il devient difficile parce que quand vous considérez des tables, il ya vraiment des écrans de toutes tailles donc c'est à vous de déterminer ce qui appartient où

Source

2017-08-26 16:13:54

Si la tâche nécessite cacher un élément HTML à partir vue, pourquoi utiliseriez-vous JS/jQ au lieu de requêtes de médias CSS? – user6003859

c'est aussi une autre solution valable. C'est probablement la meilleure solution, de cette façon vous ne remplissez pas le dom avec des éléments cachés, mais ce n'est vraiment pas un problème. il peut aussi vouloir avoir un code différent qui fonctionne sur mobile vs desktop, cela lui donne juste une autre option. –

Comment puis-je tester sur le site Web si un appareil mobile ou un PC, donc je peut désactiver si « site Web » hamburgers si son un mobile,

Si je vous ai bien compris, vous pouvez utiliser CSS @media -rules, aux règles CSS de configuration qui ne concernent que des appareils plus petits. Voici un exemple simple d'extrait de code d'une requête multimédia CSS.

@media (min-width: 700px), handheld 
{ 
    .w3-sidebar 
    { 
     display: none; 
    } 
}

Source

2017-08-26 16:20:26 user6003859

Menu Dispositifs mobiles CSS et hamburger

Répondre

Questions connexes