MENÚES DESPLEGABLES
Mediante jquery podemos crear un menú desplegable horizontal personalizado.
Los estilos de menu10 corresponden a los items no desplegables y menu20-40 a
desplegables con distinto número de subitems.
El script es simple en mouseover o mouseout de la div superior (#m) toda la div submenu cambia de display block a none y viceversa. Así no se empulja el resto de las div hacia abajo. tienen z-index:1000 para estar siempre arriba del resto de la página tambien position:absolute y display:none; de arranque para estar invisibles al cargar la página.
.offset().left); ajusta el submenú al menu por izquierda y la linea siguiente por altura.
Este código no está optimizado para html responsive. Hay que cambiar los CSS.
El script es simple en mouseover o mouseout de la div superior (#m) toda la div submenu cambia de display block a none y viceversa. Así no se empulja el resto de las div hacia abajo. tienen z-index:1000 para estar siempre arriba del resto de la página tambien position:absolute y display:none; de arranque para estar invisibles al cargar la página.
.offset().left); ajusta el submenú al menu por izquierda y la linea siguiente por altura.
Este código no está optimizado para html responsive. Hay que cambiar los CSS.
</head>
<style type="text/css">
/* menu no desplegable*/
.menu10{
background-color:#2B6891;
text-align:left;
color:#DDFFFF;
width:120px;
height:25px;
float:left;
padding-top:10px;
}
.menu10 a{
color:#DDFFFF;
}
.menu10 a:hover{
text-decoration:underline;
}
/* menues desplegables*/
.menu20{
background-color:#2B6891;
text-align:left;
color:#DDFFFF;
width:125px;
height:25px;
float:left;
padding-top:10px;
}
.submenu20{
color:#DDFFFF;
background-color:#2B6891;
text-align: left;
display:none;
position:absolute;
width:135px;
z-index:1000;
}
.menu20 a{
color:#DDFFFF;
}
#m20 a{
margin-left:15px;
}
#m20 div{
margin-bottom:3px;
}
.menu30{
background-color:#2B6891;
text-align:left;
color:#DDFFFF;
width:145px;
height:25px;
float:left;
padding-top:10px;
}
.submenu30{
color:#DDFFFF;
background-color:#2B6891;
text-align: left;
display:none;
position:absolute;
width:135px;
z-index:1000;
}
.menu30 a{
color:#DDFFFF;
}
#m30 a{
margin-left:15px;
}
#m30 div{
margin-bottom:3px;
}
.menu40{
background-color:#2B6891;
text-align:left;
color:#DDFFFF;
width:128px;
height:25px;
float:left;
padding-top:10px;
}
.submenu40{
color:#DDFFFF;
background-color:#2B6891;
text-align: left;
display:none;
position:absolute;
width:128px;
z-index:1000;
}
.menu40 a{
color:#DDFFFF;
}
#m40 a{
margin-left:15px;
}
#m40 div{
margin-bottom:3px;
}
</style>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#m20").mouseover(function(evento){
$(".submenu20").css("display","block");
$(".submenu20").css("left",$("#m20").offset().left);
$(".submenu20").css("top",$("#m20").offset().top + $("#m20").outerHeight());
});
$("#m20").mouseout(function(evento){
$(".submenu20").css("display","none");
});
$("#m30").mouseover(function(evento){
$(".submenu30").css("display","block");
$(".submenu30").css("left",$("#m30").offset().left);
$(".submenu30").css("top",$("#m30").offset().top + $("#m30").outerHeight());
});
$("#m30").mouseout(function(evento){
$(".submenu30").css("display","none");
});
$("#m40").mouseover(function(evento){
$(".submenu40").css("display","block");
$(".submenu40").css("left",$("#m40").offset().left);
$(".submenu40").css("top",$("#m40").offset().top + $("#m40").outerHeight());
});
$("#m40").mouseout(function(evento){
$(".submenu40").css("display","none");
});
});
</script>
</head>
<body>
<div style="margin: 0 auto; width:700px; text-align:left">
<!-- --------------- menu 1-------------------- -->
<div class="menu10">
<span style="margin-left:30px;"><a href="#">MENÚ 1</a></span>
</div>
<!-- --------------- menu 2-------------------- -->
<div id="m20" class="menu20"><a style="text-decoration:none;" href="#" >MENÚ 2</a>
<div class="submenu20">
<div ><a href="#">Submenú 2.1</a></div>
<div ><a href="#">Submenú 2.2</a></div>
<div ><a href="#">Submenú 2.3</a></div>
<div ><a href="#">Submenú 2.4</a></div>
</div>
</div>
<!-- --------------- menu 3-------------------- -->
<div id="m30" class="menu30"><a style="text-decoration:none;" href="#" >MENÚ 3</a>
<div class="submenu30">
<div ><a href="#">Submenú 3.1</a></div>
<div ><a href="#">Submenú 3.2</a></div>
<div ><a href="#">Submenú 3.3</a></div>
<div ><a href="#">Submenú 3.4</a></div>
<div ><a href="#">Submenú 3.5</a></div>
<div ><a href="#">Submenú 3.6</a></div>
<div ><a href="#">Submenú 3.7</a></div>
</div>
</div>
<!-- -------------- menu 4-------------------- -->
<div id="m40" class="menu40"><a style="text-decoration:none;" href="#" >MENÚ 4</a>
<div class="submenu40">
<div ><a href="#">Submenú 4.1</a></div>
<div ><a href="#">Submenú 4.2</a></div>
<div ><a href="#">Submenú 4.3</a></div>
<div ><a href="#">Submenú 4.4</a></div>
<div ><a href="#">Submenú 4.5</a></div>
<div ><a href="#">Submenú 4.6</a></div>
<div ><a href="#">Submenú 4.7</a></div>
<div ><a href="#">Submenú 4.8</a></div>
<div ><a href="#">Submenú 4.9</a></div>
<div ><a href="#">Submenú 4.10</a></div>
</div>
</div>
<div style=" width:498px; height:300px; background-color:#CCC; padding:10px; padding-top:30px;">
<p>
Contenido de la página
</p>
</div>
</div>
<body>