Menu mobile

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

Salve,

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

Grazie e buona giornata

16/07/2015 15:18:59

Cosa intendi esattamente per mobile?

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
_____

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.

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

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

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

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