espero que esten bien, tengo un problema con este menu desplegable, el problema es que cuando hago click en un item para que se despliegue, si estoy con el scroll abajo, sube si o si y queda muy feo.
Encontré otros hechos con Jquery pero me interesa este porque tiene un par de soluciones que se ajustan a mis necesidades. Aqui el Code:
En el Head:
Código:
En el Body: <style type="text/css">
/* The following CSS is only for the demo */
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
height:100%;
font-size:0.9em;
line-height:130%;
background-color:#E2EBED;
text-align:center;
}
#mainContainer{
width:760px;
margin: 0 auto;
border-left:1px solid #000;
border-right:1px solid #000;
height:100%;
text-align:left;
background-color:#FFF;
}
#leftColumn{
width:140px;
float:left;
padding-left:10px;
}
#mainContent{
width:590px;
padding-left:10px;
padding-right:10px;
float:left;
}
#topBar{
height:100px;
}
/* End of demo CSS */
/****************************************************************************************
* LAYOUT CSS FOR THE MENU
****************************************************************************************/
#dhtmlgoodies_listMenu a{ /* Main menu items */
color:#000;
text-decoration:none;
font-weight:bold;
}
#dhtmlgoodies_listMenu ul li a{ /* Sub menu */
color: #F00;
font-weight:normal;
}
#dhtmlgoodies_listMenu ul li ul li a{ /* Sub Sub menu */
color: #000;
font-style:italic;
font-size:0.9em;
font-weight:normal;
}
#dhtmlgoodies_listMenu .activeMenuLink{ /* Styling of active menu item */
color:blue;
}
/*
No bullets
*/
#dhtmlgoodies_listMenu li{
list-style-type:none;
}
/*
No margin and padding
*/
#dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
margin:0px;
padding:0px;
}
/* Margin of sub menu items */
#dhtmlgoodies_listMenu ul{
display:none;
margin-left:10px;
}
</style>
<script type="text/javascript">
var activeMenuItem = new Array();
function isUlInArray(inputObj,ulObj){
while(inputObj && inputObj.id!='dhtmlgoodies_listMenu'){
if(inputObj==ulObj)return true;
inputObj = inputObj.parentNode;
}
return false;
}
function showHideSub(e,inputObj)
{
if(!inputObj)inputObj=this;
var parentObj = inputObj.parentNode;
var ul = parentObj.getElementsByTagName('UL')[0];
if(activeMenuItem.length>0){
for(var no=0;no<activeMenuItem.length;no++){
if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
activeMenuItem[no].style.display='none';
activeMenuItem.splice(no,1);
no--;
}
}
}
if(ul.offsetHeight == 0){
ul.style.display='block';
activeMenuItem.push(ul);
}else{
ul.style.display='none';
}
}
function showHidePath(inputObj)
{
var startTag = inputObj;
showHideSub(false,inputObj);
inputObj = inputObj.parentNode;
while(inputObj){
inputObj = inputObj.parentNode;
if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
if(inputObj.id=='dhtmlgoodies_listMenu')inputObj=false;
}
}
function initMenu()
{
var obj = document.getElementById('dhtmlgoodies_listMenu');
var linkCounter=0;
var aTags = obj.getElementsByTagName('A');
var activeMenuItem = false;
var activeMenuLink = false;
var thisLocationArray = location.href.split(/\//);
var fileNameThis = thisLocationArray[thisLocationArray.length-1];
if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));
for(var no=0;no<aTags.length;no++){
var parent = aTags[no].parentNode;
var subs = parent.getElementsByTagName('UL');
if(subs.length>0){
aTags[no].onclick = showHideSub;
linkCounter++;
aTags[no].id = 'aLink' + linkCounter;
}
if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){
if(aTags[no].parentNode.parentNode){
var parentObj = aTags[no].parentNode.parentNode.parentNode;
var a = parentObj.getElementsByTagName('A')[0];
if(a.id && !activeMenuLink){
activeMenuLink = aTags[no];
activeMenuItem = a.id;
}
}
}
}
if(activeMenuLink){
activeMenuLink.className='activeMenuLink';
}
if(activeMenuItem){
if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));
}
}
window.onload = initMenu;
</script>
Código:
Muchas gracias y saludos!<div id="mainContainer"> <div id="topBar"> <h1>Heading</h2> </div> <div id="leftColumn"> <ul id="dhtmlgoodies_listMenu"> <li><a href="#">Products</a> <ul> <li><a href="#">Menus</a></li> <li><a href="#">Calendar scripts</a></li> <li><a href="#">Window scripts</a></li> <li><a href="#">Form widgets</a></li> </ul> </li> <li><a href="#">Support</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Phone</a></li> <li><a href="http://www.dhtmlgoodies.com">Email</a></li> <li><a href="http://www.dhtmlgoodies.com">QnA</a></li> </ul> </li> <li><a href="#">History</a> <ul> <li><a href="#">1900 - 1940</a> <ul> <li><a href="dhtmlgoodies_menu3.html">Active link</a></li> <li><a href="http://www.dhtmlgoodies.com">Another link</a></li> </ul> </li> <li><a href="http://www.dhtmlgoodies.com">1941 - 1980 </a></li> <li><a href="http://www.dhtmlgoodies.com">1981 - Present time</a></li> </ul> </li> <li><a href="#">The team</a> <ul> <li><a href="#">Person A</a> <li><a href="http://www.dhtmlgoodies.com">Person B</a></li> <li><a href="http://www.dhtmlgoodies.com">Person C</a></li> <li><a href="http://www.dhtmlgoodies.com">Person D</a></li> <li><a href="http://www.dhtmlgoodies.com">Person E</a></li> </ul> </li> <li><a href="#">Locations</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Norway</a></li> <li><a href="http://www.dhtmlgoodies.com">United States</a></li> <li><a href="http://www.dhtmlgoodies.com">United Kingdom</a></li> <li><a href="http://www.dhtmlgoodies.com">Sweden</a></li> <li><a href="http://www.dhtmlgoodies.com">Denmark</a></li> <li><a href="http://www.dhtmlgoodies.com">Finland</a></li> </ul> </li> </ul> </div> </div>
Gustavo.
