Foros | Webinarios | Blogs
 

Ayuda HTML

Seguir
Hola amigos de ante mano muchas gracias por la ayuda, estoy tratando de hacer los siguiente en una pagina web privada al abrirla que en la parte inferior esten varias como pestañas que al darles click se abra otro informacion sin salirme de la pagina, es que vi una y me gusto la idea pero como es en el trabajo no puedo tomar prestado el codigo, ayuda por favor.


1 Solución propuesta

SOLUCIÓN ACEPTADA
Hola dazirt, para eso necesitas hacer un código HTML, y otro CSS que estén ligados.
El HTML, son las acciones que va a realizar cada una de las opciones del menu
El CSS, son las definiciones de ancho, color, etc ... es decir, todo el aspecto visual, además de definir el comportamiento de cada acción.

Eso se hace de la siguiente manera :

Comenzamos con el HTML :

<div id="menu">
<ul>
<li><a href="/enlace-externo?codeHref=aHR0cDovL3d3dy5MQSBTRUNDSSZPYWN1dGU7TiBRVUUgUVVFUiZFYWN1dGU7UyBWSVNVQUxJWkFSLw%3D%3D&hash=d2fac020dfe2737bcae17e057c414630" class="active">Ejemplo 1</a></li>
<li><a href="/enlace-externo?codeHref=aHR0cDovL3d3dy5MQSBTRUNDSSZPYWN1dGU7TiBRVUUgUVVFUiZFYWN1dGU7UyBWSVNVQUxJWkFSLw%3D%3D&hash=d2fac020dfe2737bcae17e057c414630">Ejemplo 2</a></li>
<li><a href="/enlace-externo?codeHref=aHR0cDovL3d3dy5MQSBTRUNDSSZPYWN1dGU7TiBRVUUgUVVFUiZFYWN1dGU7UyBWSVNVQUxJWkFSLw%3D%3D&hash=d2fac020dfe2737bcae17e057c414630">Ejemplo 3</a></li>
<li><a href="/enlace-externo?codeHref=aHR0cDovL3d3dy5MQSBTRUNDSSZPYWN1dGU7TiBRVUUgUVVFUiZFYWN1dGU7UyBWSVNVQUxJWkFSLw%3D%3D&hash=d2fac020dfe2737bcae17e057c414630">Ejemplo 4</a></li>
</ul>
</div>

Puedes agrgar tantos <li></li> como quieras, teniendo en cuenta que cada linea, es una opción del menu que se va a visualizar.

Básicamente lo que hacemos acá fue crear un div, y darle un id llamado menu.
Dentro de este div le agregamos una lista con las secciones / páginas que queremos que se dirija, y el texto que queremos darle a este menú.

--------------------------------------------------------------------------------------------------------------------------------

Seguimos con el CSS :

body {
background-color:#222;
margin:0px;
padding:0px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}

a {
text-decoration:none;
}

#menu {
float: left;
width: 170px;
margin-top: 30px;
margin-left: 5px;
}

#menu ul {
list-style: none;
}

#menu li a {
display: block;
height: 25px;
width: 100px;
padding: 9px;
margin: 5px;
background: inherit;
border-right: 4px solid #444;
color: #999;
text-transform: lowercase;
font-size: 0.9em;
}

#menu li a:hover {
color: #f4f4f4;
background: #333;
border-right: 4px solid #98cb00;
}

#menu li .active {
color: #999;
background: #333;
border-right: 4px solid #444;
}

Acá le dimos estilos al body, un fondo y el tipo de fuente.
Al menu le dimos forma, un ancho, un alto, hover, active y varias cosas más.

Con este ejemplo, practicando, y cambiando valores, vas a poder crear tu propio menu.

Comenta resultados.
Saludos !!