cargar contenidos de menu en div

marlonphp · #1 (**permalink**) 06/04/2015, 09:44

Hola buenas tardes.. necesito un poco de su ayuda...
estoy creando un sitio.. y tengo un menu con submenus y quiero que al hacer clic en los submenus, me muestre el contenido en un div llamado contenido que se muestra en la misma pagina...

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Portal</title>
 
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
</head>
 
<body style="background:#E3E3E3;">
<div id="contenedor">
  <div id="header">
        <div class="logo">
            <img style="float:right;"src="img/header/Logo100alto.png" />
        </div>
<div class="menu">
<ul style="margin-left:60px;">
    <li><a href="index.php">HOME</a></li>
    <li><a href="#">EMPRESA</a>
        <ul>
        <li><a href="empresa/historia.php">&nbsp;Somos</a></li>
        <li><a href="empresa/equipo.php">&nbsp;Equipo</a></li>
        <li><a href="empresa/objetivo.php">&nbsp;Objetivo</a></li>
    </ul>
    </li>
    <li><a href="#">CLIENTES</a></li>
</ul>
</div>
</div>
 
  <div id="contenido">
 
  </div>
 
</div>
</body>
</html>

de manera grafica quedaria mas o menos:

Código HTML:

Ver original---------------------------------------------------------------------------------------
HOME            EMPRESA              CLIENTE
                        somos
                        equipo
                        objetivo
--------------------------------------------------------------------------------------
div del contenido
 
al presionar el menu o submenu, la informacion me muestre en este div, y no en otra pestaña del navegador... 
 
-----------------------------------------------------------------------------------

Espero que me uedan ayudar o decirme como hacerlo.. gracias..

marlonphp · #2 (**permalink**) 06/04/2015, 11:46

Alguien sabe.. o tiene algun ejemplo de como hacerlo... por favor..

Jilti · #3 (**permalink**) 06/04/2015, 13:21

Saludos, a mi se me ocurre con javascript.

El código sería el siguiente, luego tu lo completas.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Portal</title>
 
    <link rel="stylesheet" type="text/css" href="css/style.css">
<script language="javascript" type="text/javascript">           
                function muestra(nombrediv, muestraoculta) {
                        if(muestraoculta == 'm') {
                                document.getElementById(nombrediv).style.display = '';
                        }
                        
                        if(muestraoculta == 'o') {
                                document.getElementById(nombrediv).style.display = 'none';
                        }
                        
                        if(muestraoculta != 'm' && muestraoculta != 'o') {
                                if(document.getElementById(nombrediv).style.display == '') {
                                        document.getElementById(nombrediv).style.display = 'none';
                                } else {
                                        document.getElementById(nombrediv).style.display = '';
                                }
                        }
                }
        </script>
</head>
 
<body style="background:#E3E3E3;">
<div id="contenedor">
  <div id="header">
        <div class="logo">
            <img style="float:right;"src="img/header/Logo100alto.png" />
        </div>
<div class="menu">
<ul style="margin-left:60px;">
    <li><a href="index.php">HOME</a></li>
    <li><a href="#">EMPRESA</a>
        <ul>
        <li><a href="javascript:;" onClick="muestra('somos', 'm'); muestra('equipo', 'o'); muestra('objetivo', 'o');";>Somos</a></li>
        <li><a href="javascript:;" onClick="muestra('somos', 'o'); muestra('equipo', 'm'); muestra('objetivo', 'o');";>&nbsp;Equipo</a></li>
        <li><a href="javascript:;" onClick="muestra('somos', 'o'); muestra('equipo', 'o'); muestra('objetivo', 'm');";>&nbsp;Objetivo</a></li>
    </ul>
    </li>
    <li><a href="#">CLIENTES</a></li>
</ul>
</div>
</div>
 
<div style="display:none" id="somos">
 Aqui el contenido de SOMOS
</div>
<div style="display:none" id="equipo">
Aqui el contenido de Equipo
</div>
<div style="display:none" id="objetivo">
 Aqui el contenido de Objetivo
</div>
 
</div>
</body>
</html>

Creas un div con cada uno de los contenidos que se muestren. En los enlaces tienes que poner todos los div con un valor "m" o "o" para decirle cual es el se tiene que mostrar.

No es lo que querías, pero espero que te sirva... Saludos

superweb360 · #4 (**permalink**) 06/04/2015, 13:32

esto parece que es lo que buscas, pero hay que pagar 7 dólares

http://www.menucool.com/horizontal/tab-menu