Estimados;
Recurro a ustedes por el siguiente problema, la verdad que soy nuevo, y quiero hacer lo siguiente para un proyecto de la U.
tengo una pagina que estoy construyendo con CSS he logrado insertar todo lo que quiero en sus lugares correctos, pero no se como se hace para que por ejemplo al momento de yo hacer click en un meno el contenido de este menu se me muestre en la misma pagina,al lado del menu( la idea es que me va a mostrar formularios o grillas. se como redireccionar los menu y todo pero repito nuevamente no se como mostrar la informacion dentro de la misma pagina index.
adjunto los codigos para que le hechen una mirada
Index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="jquery-ui-1.8.13/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#menu li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
</script>
</head>
<body>
<div class="estilos" id="web">
<div class="estilos" id="header"></div>
<div class="estilos" id="top"></div>
<ul id="menu">
<li><a href="#">Inicio</a>
<ul>
<li><a href="www.google.cl">Quienes Somos</a></li>
<li><a href="#">Mision</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Historia</a></li>
</ul>
</li>
<li><a href="#">Buscar</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu sin submenu</a></li>
</ul>
</div>
</body>
</html>
aqui los css
@charset "utf-8";
.estilos {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
text-decoration: underline;
}
body
{background-image:url(imagen/fondo.png);
background-repeat:no-repeat;
background-position:center;
margin-top:50px;
}
#header{
background-image:url(imagen/head.png);
text-align: center;
margin: 0 auto;
width:1100px;
height:250px;
padding:2px;
padding-left:inherit;
padding-right:40pz;
padding-top:1px;
}
#web{
width:1100px;
margin: 0 auto;
}
//*******menu jquery*********//
#menu{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 3px #888;
-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #FFF;}
#menu ul li, #menu li:last-child{border:none}
a{
display:block;
color:#FFF;
text-decoration:none;
font-family:'Helvetica', Arial, sans-serif;
font-size:13px;
padding:3px 5px;
text-shadow:1px 1px 1px #325179;
}
#menu a:hover{
color:#F9B855;
-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#6594D1;}
#menu ul a:hover{
background-color:#FFF;
color:#2961A9;
text-shadow:none;
-webkit-transition: color, background-color 0.2s linear;
}
ul{
display:block;
background-color:#2961A9;
margin:0;
padding:0;
width:130px;
list-style:none;
}
#menu ul{background-color:#6594D1;}
#menu li ul {display:none;}
/***************top menu***************/
#top
{
background-image:url(imagen/top2.jpg);
width: 1103px;
height:30px;
margin: 0 auto;
text-align: center;
por favor les agradesco mucho la ayuda desde ya muchas gracias
saludos,
francisco
