jltsdm escribió:Hola con todos, mi nombre es Giannina y mi pregunta es la siguiente, hace un tiempo seguia estas lecciones pero por problemas de salud, tuve que dejarlas un tiempo, hace un par de dias volvi a esta pagina para continuar, y me di con la sorpresa de que cambiaron algo :cry: , cuando me fui no habian las lecciones 5 y 6 y ademas indicaban la forma de hacer una barra de navegacion desplegable, pero ahora que vuelvo a la pgina vi que ya estaban en linea las lecciones 5 y 6 :lol: :wink: , peeeeeeero lamentablemente quitaron la explicacion de barra de navegacion desplegable :cry: :? :evil: , yo crei que lo habia visto en otro lado pero hoy vi esta pagina de un compañero nuestro que tiene ese ejemplo, y la vedad es que yo quisiera hacer ese tipo de barra, si alguien fuese tan amable de decirme o mejor dicho, enviarme los codigos del HTML y del CSS para poder lograr ese efecto, se los agradeceria mucho...
Para que me entiendan aqui les dejo el link de la plantilla que vi con ese efecto de barra de navegacion desplegable... Agradeceria su Ayuda... Kisses... Gianni....
Este es el Link:
http://webcctvejemplo.mywebcommunity.org/plantilla.html
Hola, antes que nada, como siges?? la verdad no recuerdo bien porque ya tiene rato que no checo el tutorial, porcierto muy bueno pero espero te sirva esta breve explicacion.
primero en tu hoja html pones estos codigos entre <head> y </head>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
despues en lugar de <body> pones <body onload="init();"> pero terminas con </body> como estaba ahi mismo despues de tu texto de bienvenida pones <div id="navegacion">
<ul>
Sección 1
Sección 2
Sección 3
</div>
y cierras con esto antes del </body>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
y luego haces otro .css poniendo estos codigos
/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
position:absolute;
overflow:hidden;
left:-1000px;
top:-1000px;
text-align: left;
}
/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
position:absolute;
}
/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
position:relative;
left:0px; top:0px;
border:1px solid #999;
z-index:2;
}
.transMenu.top .items {
border-top:none;
}
/* each TR.item is one menu item */
.transMenu .item {
color:#000000;
background-image: url(objetos/fondo-no-activo.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-decoration:none;
/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
border:none;
cursor:pointer;
cursor:hand;
}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
position:absolute;
left:0px;
top:0px;
z-index:1;
-moz-opacity:.8;
filter:alpha(opacity=95);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:3;
top:3px; width:2px;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:1;
left:3px; height:2px;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
background-image: url(objetos/fondo-activo.gif);
color:#385385;
}
/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
margin-left:10px;
}
.textoNoIdent {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}
.formError {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
border-top: 1px solid #C4CCCC;
border-right: 1px solid #ACB5B5;
border-bottom: 1px solid #6F7777;
border-left: 1px solid #ACB5B5;
padding: 2px 0 2px 0.25em;
background-color: #F5E984;
}
.txtError {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #990000;
background-color: #E9E9E9;
padding: 5px;
text-align: justify;
}
y terminas poniendo esto donde controlas lo que aparece en el menu.
f (TransMenu.isSupported())
{
var ms=new TransMenuSet(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);
var desplegable1 = ms.addMenu(document.getElementById('desplegable1'));
desplegable1.addItem('Seccion 1','ruta');
desplegable1.addItem('Seccion 2','ruta');
var desplegable2_0 = desplegable1.addMenu(desplegable1.items[1]);
desplegable2_0.addItem('Sub-Seccion 2.1','ruta');
desplegable2_0.addItem('Sub-Seccion 2.2','ruta');
desplegable2_0.addItem('Sub-Seccion 2.3','ruta');
desplegable1.addItem('Seccion 3','ruta');
desplegable1.addItem('Seccion 4','ruta');
desplegable1.addItem('Seccion 5','ruta');
var desplegable1_0 = desplegable1.addMenu(desplegable1.items[4]);
desplegable1_0.addItem('Sub-Seccion 5.1','ruta');
desplegable1_0.addItem('Sub-Seccion 5.2','ruta');
var desplegable2 = ms.addMenu(document.getElementById('desplegable2'));
desplegable2.addItem('Seccion 1','ruta');
desplegable2.addItem('Seccion 2','ruta');
var desplegable2_0 = desplegable2.addMenu(desplegable2.items[1]);
desplegable2_0.addItem('Sub-Seccion 2.1','ruta');
desplegable2_0.addItem('Sub-Seccion 2.2','ruta');
desplegable2_0.addItem('Sub-Seccion 2.3','ruta');
desplegable2.addItem('Seccion 3','ruta');
desplegable2.addItem('Seccion 4','ruta');
desplegable2.addItem('Seccion 5','ruta');
var desplegable2_0 = desplegable2.addMenu(desplegable2.items[4]);
desplegable2_0.addItem('Sub-Seccion 5.1','ruta');
desplegable2_0.addItem('Sub-Seccion 5.2','ruta');
var desplegable3 = ms.addMenu(document.getElementById('desplegable3'));
desplegable3.addItem('Seccion 1','ruta');
desplegable3.addItem('Seccion 2','ruta');
var desplegable3_0 = desplegable3.addMenu(desplegable3.items[1]);
desplegable3_0.addItem('Sub-Seccion 2.1','ruta');
desplegable3_0.addItem('Sub-Seccion 2.2','ruta');
desplegable3_0.addItem('Sub-Seccion 2.3','ruta');
desplegable3.addItem('Seccion 3','ruta');
desplegable3.addItem('Seccion 4','ruta');
desplegable3.addItem('Seccion 5','ruta');
var desplegable3_0 = desplegable3.addMenu(desplegable3.items[4]);
desplegable3_0.addItem('Sub-Seccion 5.1','ruta');
desplegable3_0.addItem('Sub-Seccion 5.2','ruta');
TransMenu.renderAll();
}
con terminacion .txt en lugar de html
Saludos