Foros del Web » Creando para Internet » HTML »

Problemas con menús

 Estas en el tema de Problemas con menús en el foro de HTML en Foros del Web. Buenas, tengo un problemilla con el webkit me parece que es... Tengo una web con un menú que hace una transition de izquierda a derecha ...
  #1 (permalink)  
Antiguo 15/09/2011, 09:08
 
Fecha de Ingreso: septiembre-2011
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Problemas con menús
Buenas, tengo un problemilla con el webkit me parece que es...

Tengo una web con un menú que hace una transition de izquierda a derecha onmouseover, lo que quiero conseguir es que, por defecto, me muestre el primer elemento del menú siempre visible, pero no encuentro la forma de hacerlo..

Os paso el HTML5 y el css que utilizo haber si alguien consigue comentarme algo!

Es una parte del HTML5, pero suficiente para lo que busco hacer :S
HTML5

Código: 
<!doctype html>
<html lang="es">
	<head>
		
		<meta charset="utf-8">
	<!--  http-equiv="Content-Type" content="text/html" -->
		<title>IMAN</title>
		<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="print.css" type="text/css" media="print" />
		<script src="js/funciones.js"></script>
		<script src="js/jquery-1.6.2.js" type="text/javascript"></script>
		<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	</head>
	<body>

		<div id="wrapper"><!-- #wrapper -->
			<nav><!-- top nav -->
				<div class="menu" id="div_menu">
					<ul>

						<li><a href="#" onClick="habilita_div(div_Inicio)" id="menu_inicio">Inicio</a></li>
						<li><a href="#" onClick ="habilita_div(div_Memoria)" id="menu_mem">Objetivos</a></li>
						<li><a href="#" onClick ="habilita_div(div_Consorcio)" id="menu_conso">Consorcio</a></li>
						<li><a href="#" onClick ="habilita_div(div_Noticias)" id="menu_noti">Noticias</a></li>
						<li><a href="#" onClick ="habilita_div(div_Resultados)" id="menu_res">Resultados</a></li>
						<li><a href="#" onClick ="habilita_div(div_Contacto)" id="menu_cont">Contactos</a></li>
						<!-- <li><a href="http://www.w3.org/" id="w3c"><pre style='display:inline'>	</pre>
						&nbsp;&nbsp;<img src="images/val_W3C.gif" style="margin-top:-15px" alt=""/></a></li> -->
					</ul>
				</div>
			</nav><!-- end of top nav -->

			<header><!-- header -->
				<h1 style="color:white; text-shadow:12px 12px 7px #000000;" >IMAN - Innovation MANager</h1> 
				<h2 style="color:white; text-shadow:12px 12px 7px #000000;">Sistema global para la gestión de la I+D+i en una organización</h2>
			</header><!-- end of header -->
			
			<!-- Menú de "Inicio" -->
			<div id="div_Inicio" >
			<section id="main_ini"><!-- #main content area -->
					<section id="content_ini"><!-- #content -->
								<section class="accordbk">
								<article class="horizontalaccordion">
								<ul>
									<li id="inicio" style="">
										<h3>Inicio</h3>
										<div style="height: 400px; width: 730px;"><img src="images/acc1.jpg" alt="" /><p><b>Descripción</b></p>
										<p></p>
										<br>
										<br>
										<br>
										<p>El objetivo general del proyecto es la construcción de una solución global 
										para la Gestión de la I+D+i, la cual facilite la gestión de las actividades 
										de innovación en una organización en línea con todas las áreas de la misma 
										(utilizando el conocimiento existente y generando a su vez conocimiento utilizable 
										por las distintas áreas y por la organización en su conjunto), y con la situación 
										tecnológica y económica y organizacional exterior. Se pretende que la solución sea
										compatible con las principales normativas internacionales en el campo de la I+D+i 
										(de las cuales se hablará más adelante en la memoria) existentes y las que están 
										siendo definidas en la actualidad.</p>
										</div>
									</li>
									<li id="dat_interes">
										<h3>Acerca de IMAN</h3>
										<div style="height: 400px; width: 730px;"><img src="images/acc1.jpg" alt="" /><p><b>Datos de Interés</b></p>
										<p></p>
										<br>
										<br><p></p>
										<p>La naturaleza de la aplicación IMAN la hace muy interesante 
										para un amplio abanico de empresas, principalmente aquellas interesadas 
										en la innovación en la mejora de sus procesos de negocio. La innovación 
										es un aspecto muy importante en los tiempos que vivimos hoy en día, siendo 
										la mejora y la creación de nuevos paquetes de productos dos factores 
										imprescindibles y fundamentales para comenzar una nueva época de bonanza 
										económica, donde reemplazar las antiguas costumbres del mercado.</p>
										</div>
									</li>
								</ul>
								</article>
								</section>
								<br>
					</section><!-- end of #content -->

			</section><!-- end of #main content -->
			</div>
		</div><!-- #wrapper -->
	</body>
</html>
Básicamente, añado el menú principal y después por mediación de los ul y li creo la lista formateada con el css.


Muchas gracias!
  #2 (permalink)  
Antiguo 15/09/2011, 09:09
 
Fecha de Ingreso: septiembre-2011
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Problemas con menús
CSS

Código: 
* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}

body {
line-height: 1;
background: #f1f1f1 url("images/bg.gif") repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px;
}
	
/* layout */

#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 3px;
margin-bottom: 3px;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}

#div_menu {
width: 940px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 5px;
}

nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: #110E0F;
}

header {
width: 940px;
height: 170px;
margin: 0 auto;
background: #fff url("images/headerimg.jpg") no-repeat left top;
}

#main_ini{
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_mem {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_conso {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_not {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_res {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#main_contact {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}

#datos_interes {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}

#content {
float: right;
width: 940px;
}

#cont_tab{
border:'';
width:500px;
}

#tab_footer{
border:'';
width:940px;
margin-right: 700px;
}

footer {
width: 940px;
margin: 0 auto;
clear: both;
}

/* basics */

h1,h2,h3,h4,h5 {
font-weight: bold;
clear: both;
color: #333;
}


h6{
font-weight: bold;
font-size:16px;
color: #444;
}

a:link, a:visited {
color:#6DBB0D;
}

a:hover, a:active {
color: #333;
}

p {
margin-bottom: 18px;
}

li {
padding-left: 5px;
}

/* nav */

nav .menu {
font-size: 16px;
font-weight: bold;
}

nav .menu ul {
margin: 0;
padding: 17px 0 0 20px;
list-style: none;
line-height: normal;
}

nav .menu li {
display: block;
float: left;
}

nav .menu a {
display: block;
float: left;
margin-right: 5px;
margin-left: 25px;
padding: 0px 15px;
text-decoration: none;
color: #FFF;
}

nav .menu a:hover {
color: #639cb9;
}

/** HEADER */

header h1, header h2 {
margin: 0;
padding: 0 0 0 30px;
line-height: normal;
}

header h1 { 	
font-size: 40px;
float: left;
padding-top: 20px; 
}

header h1 a:link, header h1 a:visited {
text-decoration: none;
color: #FFF;
}

header h1 a:hover { 
text-decoration: underline; 
}

header h2 {
padding: 20px 0 0 30px;
font-style: italic;
font-size: 14px;
color: #FFFFFF;
}

/** ARTICLES **/

article {
padding: 0 30px 0 30px;
}

article img {
border: none;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}

article h2 {
margin-top: 20px;
}

#content p, ul, ol, hr {
margin-bottom: 24px;
}

#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}

#content h1, h2, h3, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
}

.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}

.alignright, img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}

.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}

/* footer widget blocks */

aside h3 {
font-size: 18px;
}

aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
}

aside li a {
display: block;
text-decoration: none;
}

aside li a:hover {
text-decoration: underline;
}

#footer-area {
background: #000;
color: #FFF;
font-size: 85%;
padding: 10px 0;
width: 940px;
height: 40px;
overflow: hidden;
}

.footer-segment {
float: left;
margin-right: 20px;
margin-left: 20px;
width: 190px;
}

footer aside h4 {
color: #FFF;
font-size: 16px;
line-height: 1.5em;
}

footer a:link, footer a:visited {
color: #FFF;
}

footer p {
margin-top: -15px;
}

/** ACCORDION */
.accordbk {
background: #fff;
/*Color degradado de fondo*/
background:-webkit-gradient(linear, 50% 0%, 51% 80%, from(#286a8d), to(#FFFFFF));
/*url(images/accordinfo.gif) bottom right no-repeat;*/
}

.horizontalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
height: 432px;
}

.horizontalaccordion>ul>li {
display:block;
overflow: hidden;
float:left;
margin: 0;
padding: 0;
list-style:none;
width:40px;
height: 450px;
background:#f0f0f0;
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 {
display:block;
float:left;
margin: 0;
padding:10px;
height:19px;
width:450px;
border-left:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background:#cccccc;
white-space:nowrap;
-moz-transform: rotate(90.0deg) translate(-40px,0px);
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px);
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px);
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px);
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}

/*Posición del texto dentro de los menús*/
.horizontalaccordion>ul>li>div {
display:none;
float:left;
overflow: auto;
position:relative;
top:-30px;
left:50px;
*top:0px;
*left:0px;
margin:0;
width:640px;
height:450px;
}

.horizontalaccordion>ul>li>div img {
float: left;
margin-right: 8px;
}

.horizontalaccordion>ul>li:hover {
overflow: hidden;
width: 780px;
}

.horizontalaccordion:hover>ul>li:hover>div {
display:block;
}

.horizontalaccordion:hover>ul>li:hover>h3 {
color:#fff;
background:#000000;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}

.horizontalaccordion>ul>li>h3:hover {
cursor:pointer;
}

.horizontalaccordion h4 {
font-size: 16px;
}
He sub-rallado dónde hace la transición, es decir, cuando me pongo encima del menú (que no le hago click), el menú se despliega. Lo que busco es que por ejemplo "Inicio" esté siempre desplegado.
  #3 (permalink)  
Antiguo 15/09/2011, 09:32
 
Fecha de Ingreso: septiembre-2011
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Problemas con menús
La chicha por lo que veo está aquí:

<CODE>
.horizontalaccordion:hover>ul>li:hover>div {
display:block;
}

.horizontalaccordion:hover>ul>li:hover>h3 {
color:#fff;
background:#000000;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=1.0);
progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rota tion=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startC olorstr=#ff454545, endColorstr=#ff000000)";
}

.horizontalaccordion>ul>li>h3:hover {
cursor:pointer;
}
</CODE>

Es dónde se hace el evento cuando pasa el ratón por encima, entonces lo que no sé, es cómo hacer para pasarle a "Inicio" el horizontalaccordion sin el hover y al otro con el hover para que esté abierto, pero claro el problema también está en que el cuando nos pongamos encima del otro menú, este tiene que esconder al que estaba abierto por defecto..
  #4 (permalink)  
Antiguo 16/09/2011, 01:38
 
Fecha de Ingreso: septiembre-2011
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Problemas con menús
Alguien sabe cómo simular un Onmouseover, para decirle que por defecto, estoy encima del <li> que quiero que se abra???

He encontrado funciones de simular click pero no llego a sacar la función para que se muestre

Un saludo
  #5 (permalink)  
Antiguo 19/09/2011, 07:36
 
Fecha de Ingreso: septiembre-2011
Mensajes: 5
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Problemas con menús
Cerrar el post si podéis por favor, ya lo tengo solucionado.

Un saludo.

Etiquetas: css, html5, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:42.