Menu mobile

pamela4e

SCRIVI

Menu mobile postato il 16/07/2015 14:37:57 nel forum programmazione, gdrcd, open source, hosting

Salve,

vorrei rendere il menu del main ( visto che nel index c'è l'ho fatta) mobile ! qualche consiglio ?

Grazie e buona giornata

Crash Bandicoot ZoneCrash Bandicoot Zone ↗
Caos, libertà e risate: nel GDR ambientato nell’universo di Crash Bandicoot, ogni storia è possibile… e nulla è troppo folle!

quota

Pagine → 1 

dyrr

SCRIVI

16/07/2015 15:18:59

Cosa intendi esattamente per mobile?

Storie di AgarthiStorie di Agarthi ↗
Un Varco si apre davanti a te, un mondo tra i mondi è a portata di mano. Lasciati alle spalle le certezze, inizia l'avventura!

quota

pamela4e

SCRIVI

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:
<div class="mappaclick_map" style="background:url('themes/advanced/imgs/maps/lol.png') top left no-repeat; width:909px; height:529px;"><div style="position:absolute; margin:80px 0 0 300px;">

.... non saprei neanche io cosa fare
_____

RAID Shadow LegendsRAID Shadow Legends ↗
Plasma i tuoi eroi fino a farli diventare vere e proprie armi viventi e assembla i più epici gruppi d'assalto mai visti finora!

quota

dyrr

SCRIVI

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

quota

pamela4e

SCRIVI

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

Sponsorizzati con noi!Sponsorizzati con noi! ↗
Sponsorizza il tuo gioco su GDR-online! Trova nuovi giocatori fra i migliaia di appassionati che ogni giorno visitano il portale!

quota

dyrr

SCRIVI

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

RAID Shadow LegendsRAID Shadow Legends ↗
Plasma i tuoi eroi fino a farli diventare vere e proprie armi viventi e assembla i più epici gruppi d'assalto mai visti finora!

quota

pamela4e

SCRIVI

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>
<!-- #header --></pre>
<div id="mainmenu">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<pre> <!-- #mainmenu -->



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
<script src="jquery-1.7.1.min.js"></script>

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

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

});

});
</script>


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

New World OrderNew World Order ↗
Diventa un agente del Nuovo Ordine Mondiale e affronta le forze occulte che minacciano il pianeta Terra in questo GDR Urban Fantasy per Mobile!

quota

pamela4e

SCRIVI

20/07/2015 11:21:20 e modificato da pamela4e il 20/07/2015 13:34:23

C'è l'ho fatta da solo con un altro menu che vi espongo ora :


HTML/js/php



<link rel="stylesheet" href="/css/style_menu.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});

});
</script>



<nav id="nav-wrap">
<div id="menu-icon">Menu</div>

<ul id="nav">
<?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>';
*//tutto il resto*//
?>
</ul>
</nav>


e poi css

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
margin-top: 20px;
}

/* menu icon */
#menu-icon {
display: none; /* hide menu icon initially */
}

#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}

/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none; /* hide dropdown */
width: 200px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav li:hover > ul {
display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {

/* nav-wrap */
#nav-wrap {
position: relative;
}

/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(images/menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon */
}
#menu-icon:hover {
background-color: #f8f8f8;
}
#menu-icon.active {
background-color: #bbb;
}

/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}

/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}

}

@media screen and (min-width: 600px) {

/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}

}



funziona però ho un altro piccolo problema, premetto che uso top come layout nel config, quando clicco su menu mi si apre però dentro il frame che è ovviamente più piccolo. invece di sovrapporsi va sotto in pratica idee?


____


/****SOLUZIONE****/

trovata per fortuna impostando position: fixed nel menu a tendina.
Grazie per l'aiuto comunque

Seconda EraSeconda Era ↗
Vaste terre coperte di ombre e misteri, dove ogni eroe scrive la storia del Mondo di Eidel. Seconda Era, Play By chat

quota

Discussione seguita da › pamela4e

Pagine → 1 

Rispondi alla Discussione Aggiungi ai Preferiti Inoltra Discussione Forum Programmazione, GDRCD, Open Source, Hosting Elenco Forum

Articoli, Interviste e altre Risorse!

Under 18 nei Gdr?
Under 18 nei Gdr?
E' vero che gli under 18 non giocano più ai giochi di ruolo online testuali? Vediamo un pò di dati!
Mappa dei giocatori
Mappa dei giocatori
Mappa della provenienza geografica dei giocatori di ruolo online italiani
Creare un PNG
Creare un PNG
Come creare un PNG realistico e ben fatto?
Letteratura Anglo-Americana
Letteratura Anglo-Americana
Immagini dell’altro nella letteratura anglo-americana, da Thoreau a Harry Potter. Un viaggio

Pubblicità

Ultime dal Portale

recensione daphneee ha recensito Hogwarts Express - Harry Potter GDR Forum

categoria La categoria Browser Game raggiunge i 3.600 giochi catalogati!

Crash Bandicoot Zone Crash Bandicoot Zone → Caos, libertà e risate: nel GDR ambientato nell’universo di Crash Bandicoot, ogni storia è possibile… e nulla è troppo folle!

news RAID Shadow Legends: Raddoppia i potenziamenti delle evocazioni

news Enlisted: Preparazione per l'aggiornamento "Scorching Rays"

news La Tana del Ladro: La Notte della Grazia Spezzata

news Black Sails Chronicles: OFF - Aggiornamenti di Settembre

Lineage II Lineage II → Entra in uno sconfinato mondo fantasy dominato da razze in contrasto tra loro. Scatena i tuoi poteri in uno dei Mmo più famosi al mondo!

risposta Il gestore di Black Sails Chronicles ha risposto alla recensione di xeno

news Hogwarts Express - Harry Potter GDR Forum: 🧩 PNG attivi: nuove facce ad Hogwarts! 

gdrrank I dati del generatore di rank sono stati aggiornati!

recensione robertocovello ha recensito Storie di Agarthi

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

news The Coven: Novità della settimana sul The Coven!

news Felix Felicis GdR - Harry Potter GdR: Una Nuova Storia - ritorno a Hogwarts

recensione xeno ha recensito Black Sails Chronicles

news Ex Gratia GDR: Lo STAFF si amplia... più che mai!

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

Pubblicità

Articoli

Chrome Safe Browsing Chrome Safe Browsing - Il tuo gioco è stato colpito dalla schermata rossa di Chrome Safe Browsing alert? Ecco come risolvere!

Nuova York Nuova York - Recensione del gioco di ruolo online ambientato nella New York degli anni '30

La Terra di Mezzo La Terra di Mezzo - Recensione del GDR "La Terra di Mezzo" ambientato nel fantastico mondo inventato dal mitico JRR Tolkien

Anello del Drago Anello del Drago - Spunta la versione italiana dell'MMORPG "Anello del Drago", nuovi Cosplay all'orizzonte!

VR Gaming VR Gaming - Il ruolo della realtà virtuale nel presente e nel futuro del gaming

Giochi Galattici Giochi Galattici - Lista completa dei giochi di ruolo online galattici

Creare Avatar Creare Avatar - Presentazione di 7 App gratuite sul Play Store per creare avatar manga o divertenti!

RAID Shadow Legends RAID Shadow Legends - Plasma i tuoi eroi fino a farli diventare vere e proprie armi viventi e assembla i più epici gruppi d'assalto mai visti finora!