Ver Mensaje Individual
  #3 (permalink)  
Antiguo 10/02/2013, 21:42
camilocalderont
 
Fecha de Ingreso: diciembre-2011
Ubicación: Bogotá
Mensajes: 47
Antigüedad: 12 años, 4 meses
Puntos: 1
Respuesta: Menu CSS para varias paginas

Css no fue concebido para crear contenido, solo para darle estilo al mismo.

De cualquier manera que se cree el contenido (php ó html) tienes la posibilidad de modificar el estilo del menú desde un solo archivo css.

Haber voy a explicarlo de otra manera:


1. Tienes que crear la estructura del menu que va a ser la misma en todas las pagina(pueden cambiar los enlaces)

Código HTML:
<ul>
  <li>Inicio</li>
  <li>Empresa
      <ul>
            <li>Mision</li>
            <li>Vision</li>
      </ul>

</li>
  <li>Servicios</li>
  <li>Contacto</li>
</ul> 

luego decidir si va a tener submenu ó no, luego de esto ponerle clase ó id a las etiquetas que necesitan estilo,
en este caso el ul principal y el li padre.

Código HTML:
<ul id="menu">
  <li>Inicio</li>
  <li class="parent">Empresa
      <ul>
            <li>Mision</li>
            <li>Vision</li>
      </ul>

</li>
  <li>Servicios</li>
  <li>Contacto</li>
</ul> 

2. Luego crear el estilo css que va a afectar a estas etiquetas:


Código:
@charset "utf-8";
#menu{
	list-style:none;
	list-style-type:none;
	height: 30px;
}

#menu li{
	background:#FFF;
	color:#000;
}

#menu li:hover{
	background:#000;
	color:#FFF;
}
.
.
.
.

3. por ultimo debes incluir el archivo css en cada pagina que contenga el menu.

Código HTML:
<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Menu</title>
    <link rel="alternate stylesheet" href="css/estilo.css" />
    </head>

    <body>
    
        <ul id="menu">
          <li>Inicio</li>
          <li class="parent">Empresa
              <ul>
                    <li>Mision</li>
                    <li>Vision</li>
              </ul>
        
        </li>
          <li>Servicios</li>
          <li>Contacto</li>
        </ul>
    
    </body>
</html> 

4. De esta manera modificando el archivo estilo.css puedes modificar los estilos del menu para todas las paginas.
__________________
Camilo Calderon Tapia
www.pau.com.co