Menu mobile

Pagine → 1

dyrr

World of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

16/07/2015 15:18:59

Cosa intendi esattamente per mobile?

The Coven ↗
Negli scorci di luce delle paludi della Louisiana fioriscono nuove ombre. Estend e la Congrega ti aspettano per vivere emozionanti avventure!

17/07/2015 09:29:23 e modificato da pamela4e il 17/07/2015 10:46:15

Nel main la mappa il menu ecc si vede come da pc e non mobile, quindi non viene settato per mobile, per dire ho settato il view port e lo zoom ma il menu dovrebbe "trasformarsi" nel icona del telefono (integrandolo magari con bootstrap, che se non conosci ti consiglio di informarti perchè potrebbe essere una grande risorsa).

Beh spero di essermi spiegato.

___

Aggiungo: anche la mappa che è fatta con un immagine se fosse possibile scalarla in base al view del dispositivo
per dire non so poi mi correggerete voi si potrebbe fare un :

@media (min-width:300px){
.pagina_mappaclick div.mappaclick_map{
background:none;
margin:auto;
display:block;
width:0px;
height:0px;

}
}

il problema che la mappa viene impostata come valore style nella pagina direttamente cosi:

.... non saprei neanche io cosa fare
_____

dyrr

AlterEgo ↗
Scopri AlterEgo GdR: un incredibile universo narrativo in stile medievale fantasy che cresce, muta e vive giorno dopo giorno grazie ai suoi giocatori!

17/07/2015 10:59:17

Non capivo se per mobile intendevi per dispositivi mobili o mobile nel senso animato.

il layout del gdrcd è molto "antico" per cui non era strutturato per adattarsi ai dispositivi mobili e non basta quella stringa a modificarlo perchè si adatti in quel modo.

La soluzione più ideale che avevo trovato io all'epoca era usare delle media query nel css che regolava il layout del sito (il css è contenuto all'intenrod ei vari file di layout nella cartella con lo stesso nome), utilizzando un layout diverso in base a dei breakpoint nella risoluzione.
Un'altra soluzione sarebbe identificare via server

esempio sul come qui:
http://php.net/manual/en/function.get-browser.php http://php.net/manual/en/function.get-browser.php ↗

Per capire se il dispositivo è un dispositivo mobile o meno in base all'os usato e al browser e in quel caso caricare un css diverso.

Exclusive Villa GdR ↗
Las Vegas, azzardo, vizi, soldi, intrighi... Più le sue luci sono scintillanti, più le sue ombre sono oscure. La città che non dorme mai, vi aspetta.

17/07/2015 11:13:00

allora la posizione della mappa lo gestita bene con :

@media (max-width:500px){
div.mappaclick_map{

display:block;
left:0px;
top:0px;

}
}

Visto la difficoltà nello scalare, toglierei l'immagine nei dispotivi mobili, però la mappa vien data da

echo '<div class="mappaclick_map" style="background:url('themes/', $PARAMETERS['themes']['current_theme'], '/imgs/maps/', $row['immagine'], '') top left no-repeat; width:', $row['larghezza'], 'px; height:', $row['altezza'], 'px;">';
$echoed_title=TRUE;
$echo_bottom=TRUE;
$vicinato=$row['posizione'];
$self=$row['id_click'];
$mobile=$row['mobile'];

come faccio a far in modo che invece che esser gestita da uno style in loco venga gestita tramite css ? così imposto che per i dispositivi mobile il background sia vuoto. e un altra domanda cruciale è la posizione dei vari paesaggi che vien regolata dal menu Administrator. ti farò dannare penso

dyrr

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

17/07/2015 12:03:14 e modificato da dyrr il 17/07/2015 12:04:53

La mappa viene gestita inline sullo style perchè le dimensioni del div vengono prese in base alle dimensioni dell'immagine per poter basare poi le coordinate dei vari punti sulla mappa tramite i pixel.

Per poterla gestire direttamente da css dovresti avere mappe sempre delle stesse dimensioni, e modificare il mappaclick perchè non setti le dimensioni inline.

Altra soluzione ma che non ho provato sarebbe riuscire a settare in % invece che in pixel la posizione delle locazioni della mappa, anche se non la ho perseonalmente testata.

Facendo una prova però con chrome simulando un dispositivo mobile (in particolare con il note 3 impostato come simulazione)

Impostato un layout che non usasse delle posizioni asoslute se il dispositivo veniva identificato come mobile non ho avuto problemi di nessun tipo ad impostare il layout in maniera diversa per un dispositivo mobile.

devo averlo postato gia da qualche parte, ma usando due semplici media query avevo strutturato 3 layout. quello normale che conosciamo e poi 2 per risoluzione piccola.

http://dyrr.altervista.org/responsive1.gif ↗

e

http://dyrr.altervista.org/responsive2.gif ↗

Se dovessi lavorarci ancora per ottimizzarlo ancora meglio penso che identificherei prima via server se si tratta di un dispositivo mobile o meno, per caricare un template della pagina più leggero e poi farei anche un lavoro con le risoluzioni con le media query

Dominion Gdr ↗
In una NY con un tessuto sovrannaturale nascosto, la Reggenza Vampirica e il Queens dei Lupi ribollono sotto il Dominio dei Bokor. Quanto durerà la pace?

18/07/2015 11:41:25 e modificato da pamela4e il 18/07/2015 11:42:47

Si però cosi non è proprio professionale per dare un buon game alla fine voglio far di più. vediamo se riesci a darmi una mano, volevo integrare questo nel menu allora i codici presi poi da terze parti sono:
HTML

<header id="header"> /**NON SERVE**/
<h1 id="site-title"><a href="#">Responsive Menu</a></h1> /**NON SERVE**/
<div class="btn-responsive-menu"></div>
</header>
</pre>
<div id="mainmenu">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<pre>

CSS

1
/**MENUMOBILE**/
#mainmenu ul {margin: 0px 0 0px 0px;float:left;width:100%; list-style: none;}
#mainmenu ul li {float: left;margin: 0 0px 0 0;position: relative;}
#mainmenu a {color: #fff; display: block;font: 14px;padding: 14px 20px;font-family: oswald; text-transform:uppercase;}
#mainmenu a:hover {background:#666;}

.btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin: 0px 20px 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#333;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.icon-bar {display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}

.show{display:block!important}
@media (min-width: 1200px) {

/* Structure > 1200px */
#wrapper {width: 1170px;margin: 0 auto;}
#header {width: 1130px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu {width: 100%;float:left;}
#main {width: 1130px;float:left;padding: 20px 20px 20px 20px;}

}

@media (min-width: 768px) and (max-width: 980px) {

/* Structure 768 to 1000 */
#wrapper {width: 748px;margin: 0 auto;}
#header {width: 708px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu {width: 100%;float:left;}
#main {width: 708px;float:left;padding: 20px 20px 20px 20px;}

}

@media (max-width: 767px) {

/* Structure < 767 */
body{padding:10px;background:#fff;}
#wrapper {width:100%;margin: 0 auto;}
#header {width:100%;padding: 20px 0 20px 0px;}
#mainmenu {width:100%;float:left;}
#main {width:100%;float:left;padding: 20px 0 0 0;}

/* Header */
#site-title a {font-size:25px;margin-left:10px;}
#mainmenu {display:none;}
#mainmenu ul li {float: none;}

.btn-responsive-menu{display:block;}

}

e poi i js con relativo file

E questo è come l'han fatto loro.
Perfetto prendendo questi codici ho fatto qualcosina già io allora :
LINK_MENU.INC.PHP ( integrazione menu nel main)

<div class="page_body">
<link href="/css/style_menu.css" rel="stylesheet" type="text/css">
<script src="/js/jquery-1.7.1.min.js"></script>

<script>
$(document).ready(function(){

//When btn is clicked
$(".btn-responsive-menu").click(function() {
$("#mainmenu").toggleClass("show");

});

});
</script>
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div id="mainmenu">
<ul>
<?php
/* Generazione automatica del menu del gioco */
$raw_counter=0;

foreach($PARAMETERS['menu'] as $link_menu){

if (empty($link_menu['url'])===FALSE){
if (empty($link_menu['image_file'])===TRUE){
if (empty($link_menu['text'])===FALSE){
echo '<li><a href="'.$link_menu['url'].'">'.gdrc_filter('out',$link_menu['text']).'</a></li>';/** MODIFICA PRINCIPALE **/
RESTODELCODICE
?>
</ul>
</div>

</div>

</div>

CSS (Ho solo tagliato delle parti)

/**MENUMOBILE**/
#mainmenu ul {margin: 0px 0 0px 0px;float:left;width:100%; list-style: none;}
#mainmenu ul li {float: left;margin: 0 0px 0 0;position: relative;}
#mainmenu a {color: #fff; display: block;font: 14px;padding: 14px 20px;font-family: oswald; text-transform:uppercase;}
#mainmenu a:hover {background:#666;}

.btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin: 0px 20px 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#333;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.icon-bar {display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}

.show{display:block!important}
@media (min-width: 1200px) {

/* Structure > 1200px */
#wrapper {width: 1170px;margin: 0 auto;}
#header {width: 1130px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu {width: 100%;float:left;}
#main {width: 1130px;float:left;padding: 20px 20px 20px 20px;}

}

@media (min-width: 768px) and (max-width: 980px) {

/* Structure 768 to 1000 */
#wrapper {width: 748px;margin: 0 auto;}
#header {width: 708px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu {width: 100%;float:left;}
#main {width: 708px;float:left;padding: 20px 20px 20px 20px;}

}

@media (max-width: 767px) {

/* Structure < 767 */
body{padding:10px;background:#fff;}
#wrapper {width:100%;margin: 0 auto;}
#header {width:100%;padding: 20px 0 20px 0px;}
#mainmenu {width:100%;float:left;}
#main {width:100%;float:left;padding: 20px 0 0 0;}

/* Header */
#site-title a {font-size:25px;margin-left:10px;}
#mainmenu {display:none;}
#mainmenu ul li {float: none;}

.btn-responsive-menu{display:block;}

}

Risultato ?
Menu diventa la classica icona del telefono, però la funziona js che una volta cliccato sul pulsante cambia la classe di <div id="mainmenu">in <div id="mainmenu" class="show"> non funziona e quindi non si apre nessun menu.

Spero di esser stato esaustivo e vi ringrazio in anticipo