hola estoy aprendiendo a usar las medias querys y tengo el siguiente problema, tengo un contenedor llamado divmenu y un ul llamado menu...
al contenedor le coloco la propiedad fixed para que el usuario al hacer scroll siempre el menu este visible...
el problema es que el menu es demasiado largo y en algunos dispositivos no se puede ver el menu en toda la pantalla, pero al tener la propiedad fixed en el div no me permite ver más allá de la pantalla......
les dejo un ejemplo que edite un poco para ver si alguien puede guiarme...
si redimensionan el navegador sabran a lo que me refiero....
saludos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
html a img{border:none;}
img {
border: none;
}
html{
padding:0;
margin:0;
}
body{
padding:0;
margin:0px;
background:#e8f9f9;
font-family: 'Open Sans', sans-serif;
}
#divmenu{
width:100%;
height:65px;
border-top:#6fceed solid 4px;
position:fixed;
z-index:9999;
margin:0px auto;
background: #FFF;
}
#blanco{
width:100%;
height:65px;
}
#todo{
width: 636px;
height: 63px;
float: left;
border: red solid 0px;
}
#c_menu{
width: 636px;
height: 63px;
float: left;
}
#logo{
width:232px;
height:63px;
float:left;
margin-left:10px;
}
#logo img{
width:228px;
height:63px;
}
#menu{
list-style: none;
height: 53px;
margin: 0;
float: left;
text-align: left;
padding: 0;
}
#menu li{
float:left;
display:block;
border-bottom:#fff solid 0px;
}
#menu li a{
display: block;
padding: 20px 0px;
margin: 0;
border: purple solid 0px;
text-decoration: none;
text-align: center;
color: #0078ca ;
font-family: 'Open Sans', sans-serif;
width: 110px;
font-size:16px;
}
#menu li:hover {
background:#6fceed;
color:#FFF !important;
}
#menu li a:hover {
border-bottom:#ECECEC solid 1px;
background:#6fceed;
color:#FFF;
}
#menu li a:hover, #menu .submenu li:hover a{
border-bottom:#ECECEC solid 1px;
background:#6fceed;
color:#FFF;
}
#menu li a:active {
background:#6fceed;
color:#FFF;
}
#menu .submenu{
width:110px;
display:none;
z-index:99999;
position:absolute;
margin:0px;
padding:0px;
background:#fff;
}
#menu .submenu li{
text-align:center;
display:block;
width:110px;
margin:0px auto;
border-bottom:#ECECEC solid 1px;
}
#menu .submenu li a{
display:block;
padding: 20px 0px;
border:purple solid 0px;
text-decoration: none;
text-align:center;
color:#6fceed;
font-family: 'Open Sans', sans-serif;
width:110px;
font-size:10pt;
}
#menu .submenu li a:hover {
color:white;
background: #0078ca;
}
#menu li:hover > .submenu {
display:block;
}
#contenido_principal{
width:900px;
margin:0 auto;
background:#000;
}
#contenido_principal img{
width:900px;
}
/***********************************RESPONSIVE*****************************************=**********************/
#menu_responsive {
margin: 0px 0px 0px;
display: none;
padding: 8px 5px 2px;
text-align: center;
width: 106px;
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
}
@media (max-width: 1034px) {
#c_menu{ left:none !important;}
#contenido_principal{width:100%;}
#contenido_principal img{width:100%;}
}
@media (max-width: 860px) {
#divmenu{ width:100%; height:146px;}
#logo{ float: none;position:relative; margin:0 auto; }
#todo{ float: none; position:relative; margin:0 auto; }
#c_menu{ float: none;position:relative; margin:0 auto; left:none !important;}
}
@media (max-width: 457px) {
#menu_responsive{display:block; }
#divmenu{ width:100%; height:67px;}
#logo {width:250px;float:right;border:red solid 0px;}
#logo img{width:250px;float:right;}
#todo{width:100%}
#c_menu{
background:#8ad1ef;
color: /*#0078ca*/ #FFF ;
width:100%;
min-height:200px;
overflow:auto;
position:absolute;
left:-100%;
z-index:9999;
}
#menu li a{
width: 100%;
background: #0078ca;
color: /*#0078ca*/ #FFF ;
}
#menu li {
width: 100%;
background: #0078ca;
color: /*#0078ca*/ #FFF ;
}
#menu .submenu{
width: 100%;
display:block;
position:relative;
background:#8ad1ef;
color: #FFF ;
}
#menu .submenu li{
width: 100%;
background:#8ad1ef;
color: #FFF ;
}
#menu .submenu li a{
width:100%;
background:#8ad1ef;
color: #FFF ;
}
#menu{
width:100%;
height:auto;
}
}
<img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
$(document).ready(function(){
var contador = 0;
$('#desplazar').click(function efecto(){
if (contador/2==0){
$('#c_menu').animate({'left':0+'%'});
$("#c_menu").css({ height:"auto" });
contador+=1;
}
else{
$('#c_menu').animate({'left':-100+'%'});
$("#c_menu").css({ height:"300px" });
contador+=-1;
}
});
});
<div id="menu_responsive" onclick=""><a href="#" id="desplazar"><img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" width="20">Menu
</a></div>
<li><a href="#" target="_blank">Menu P 1
</a> <li><a href="#">submenu 1
</a></li>
<li><a href="#">Menu P 2
</a> <li><a href="#">submenu 2
</a></li> <li><a href="#">submenu 2.1
</a></li>
<li><a href="#">Menu P 3
</a> <li><a href="#">submenu 3
</a></li> <li><a href="#">submenu 3.1
</a></li> <li><a href="#">submenu 3.2
</a></li> <li><a href="#">submenu 3.3
</a></li> <li><a href="#">submenu 3.4
</a></li> <li><a href="#">submenu 3.5
</a></li> <li><a href="#">submenu 3.6
</a></li> <li><a href="#">Menu P 4
</a> <li ><a href="#">submenu 4
</a></li> <li><a href="#">submenu 4.1
</a></li> <li ><a href="#">submenu 4.1
</a></li> <li ><a href="#">submenu 4.1
</a></li> <li ><a href="#">submenu 4.1
</a></li> <li><a href="#">submenu 4.1
</a></li> <li ><a href="#">submenu 4.1
</a></li> <li ><a href="#">submenu 4.1
</a></li>
<li><a href="#">Menu P 5
</a>
<div id="contenido_principal"> <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
Mostrar Mensajes
