Menu CSS para varias paginas

El_Aprendiz · #1 (**permalink**) 10/02/2013, 17:47

Buen dia, una pregunta muy sencilla ya que me estoy iniciando en css.
He creado un menu CSS para mi web pero resulta que este menu lo deseo utilizar en varias paginas y no quiero crear el menu en cada archivo html.
La pregunta es:
¿Como hago de manera que si en el futuro deseo modificar el menú no modificarlo en cada una de las paginas?
actualemnte posee dos archivos un css donde esta el estilo del menu y un html donde contruyo el menu.

C2am · #2 (**permalink**) 10/02/2013, 19:21

Una alternativa es usa php y luego con una simple linea incluyes tu menu en todas las páginas a través de include('tumenu.html'); o menu.php.

Este no es un tema de CSS, así que reporta el mensaje para que lo muevan al foro php o al foro de diseño web general

Saludos

camilocalderont · #3 (**permalink**) 10/02/2013, 21:42

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.

moro666 · #4 (**permalink**) 13/02/2013, 04:18

http://unpocodephp.blogspot.com.es/2...lantillas.html
http://www.phperos.net/foro/index.ph...6&topic=8295.0

Esto deberia ayudarte un poco!

leoass · #5 (**permalink**) 13/02/2013, 06:01

Si recien te estas iniciando en css, tenes que saber que existen 2 formas de usarlo (al menos yo conozco 2). Una es de la forma en que vos lo haces (dentro del html) y la otra es creando otro archivo de texto con la extension ".css". Dentro de este archivo pondras los estilos de cada seccion de la pagina. Y luego lo unico que haces es llamarlo desde un html. Es tan facil como suena.
Con todo este quiero decir. Lo mismo que ponias dentro del html, lo pones en este archivo (.css) y simplemente lo llamas

acurog · #6 (**permalink**) 16/02/2013, 16:32

Buscar en youtube, hay muy bueno tutoriales al respecto.

Tutorial: Como hacer página Web con Dreamweaver y PHP

alex_dh · #7 (**permalink**) 17/02/2013, 01:39

usando la funcion include de PHP

Código PHP:

Ver original<?php
include('menu.php');
?>

un ejemplo basico

alex_dh · #8 (**permalink**) 17/02/2013, 01:40

Cita:

Iniciado por alex_dh

usando la funcion include de PHP

Código PHP:

Ver original<?php
include('menu.php');
?>

un ejemplo basico

y en el menu.php pones el html de tu menu:

Código HTML:

Ver original<div id="menu"></div>