I sold a php system with html and the client wants to see it more comfortably on his cell phone. I have a template as follows:
<nav class="dropdownmenu">
<ul>
<li><a href="">ABM</a>
<ul class="submenu" id="a">
<li ><a href="index.php?controller=cliente&action=index">Clientes</a></li>
<li ><a href="index.php?controller=articulo&action=index">Articulos</a></li>
<li ><a href="index.php?controller=proveedor&action=index">Proveedores</a></li>
<li ><a href="index.php?controller=envase&action=todos">Envases</a></li>
<li ><a href="index.php?controller=medida&action=index">Medidas</a></li>
<li ><a href="index.php?controller=canilla&action=index">Canillas</a></li>
<li ><a href="index.php?controller=user&action=index">Usuarios</a></li>
</ul>
</li>
<li><a href="">Nuevo comprobante</a>
<ul class="submenu" id="b">
<li ><a href="index.php?controller=ticket&action=index">Ticket</a></li>
<li ><a href="index.php?controller=facturaa&action=index">Factura</a></li>
</ul>
</li>
<li><a href="#">Estado de cajas</a>
<ul class="submenu" id="c">
<li><a href="">Chequera</a></li>
<li><a href="index.php?controller=caja&action=gasto">Nuevo Gasto</a></li>
<li><a href="index.php?controller=caja&action=index">Cerrar caja</a></li>
<li><a href="index.php?controller=cliente&action=cuenta">Cuenta Corriente</a></li>
<li><a href="index.php?controller=caja&action=indexgrande">Caja Grande</a></li>
<li><a href="">Posnet</a></li>
</ul>
</li>
<li><a href="">Nueva Venta</a>
<ul class="submenu" id="E">
<li><a href="index.php?controller=venta&action=index">Canilla</a></li>
<li><a href="index.php?controller=venta&action=cerrado">Producto</a></li>
</ul>
</li>
<li><a href="">Compra de stock</a>
<ul class="submenu" id="D">
<li><a href="index.php?controller=stock&action=index">Productos</a></li>
<li><a href="index.php?controller=stock&action=indexb">Barril</a></li>
<li><a href="index.php?controller=stock&action=canilla">Cambio de canilla</a></li>
</ul>
</li>
</ul> But when opening on a cell phone it appears like this:
The question is whether to use mediaqueries according to the standard resolution, a j7 for example of 1280x720 will serve me. If yes, what should I do: increase the height of the menu and adjust one option below the other? It's something new for me ..
I edit and add the menu css:
.dropdownmenu ul, .dropdownmenu li {
margin: auto;
padding: 0;
width:100%;
}
.dropdownmenu ul {
background: gray;
list-style: none;
font-size: 14px;
}
.dropdownmenu li {
float: left;
position: relative;
width:20%;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
.submenu {
opacity: 0;
position:absolute;
visibility: hidden;
z-index: 1;
width: 100%;
}
li:hover ul.submenu {
opacity: 1;
visibility: visible;
}
.submenu li {
float: none;
width: 100%;
}
.submenu a:hover {
background: #DF4B05;
}
.submenu a {
background-color:#000000;
}Should I use the height on those elements?