LA WEB DE MADFOZ - MODIF MENU HORZ PRINC
  INICIO
  MIRA LA TELE
  ESCUCHA LA RADIO
  VIDEOS MUSICALES
  VIDEOS DE VIENTO
  VIDEOS DE PERCUSION
  VIDEOS DE CUERDA
  PRACTICAR RITMOS
  DESCARGAS WEBMASTERS
  TUTORIALES WEBMASTERS
  => CREAR FAVICON
  => COPIA SEGURIDAD WEB
  => TUTO BOX DESCARGAS
  => MODIF MENU HORZ SECUND
  => JUGAR CON MENUS1
  => MODIF MENU HORZ PRINC
  => Dejar IceBlue sin Box ni Menú, con ancho modificable
  => MENU BOX
  => TUTORIALES MENUS
  COMO HICE MI WEB
  PROBADOR DE CODIGOS
  JUEGOS
  WEBS AMIGAS
  ENLACES
  CONTACTAR



MENU HORIZONTAL PRINCIPAL


Este code se usa para centrar el Menú y se pone en un Box, o, en Texto por encima de la página.



Este code va en Texto por Debajo de la página.

 

LLENARLO:

 

Para poner el nombre del submenu:

Donde pone...Menu1......Menu 2.........

Hay que poner el nombre del sub-menú. Este texto no lleva URL, es solo el título del sub-menú.

 

Para poner los enlaces:

Hay que rellenar los espacios entre las comillas con la URL del enlace y cambiar subkategorie por el nombre del enlace de esa URL.

 

Ejemplo:

<li><a href="">Subkategorie 1.1</a></li>

 

Ha de quedar asi: <li><a href="http://madfoz.es.tl/INICIO.htm">INICIO</a></li>

 

 

 

AÑADIR SUBMENUS

 

 

Es mas comodo si se añaden antes de llenarlo.

 

 Para poner por ejemplo 2 sub-menus mas:

 

PASO 1:

 

Donde pone: #smenu1, #smenu2, #smenu3, #smenu4

 

Hay que añadir los menús al final de la línea para quedar asi: #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 (Según los submenus que se quiera añadir)

 

Y donde pone: #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a

 

Ha de quedar asi: #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a (Según los submenus que se quiera añadir)

 

 

PASO 2:

 

Si se quiere añadir los sub-menus 5 y 6, como en el ejemplo de arriba, se ha de hacer lo siguiente:

Copiar por ejemplo el menu3 y pegarlo debajo mismo.

Es mejor copiar el menu 2 o el 3 y pegarlos debajo mismo, que no con el 1 y el 4 que pueden traer complicaciones. Tal como lo he hecho yo, funciona bien y es mas facil hacer los cambios.

 

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');"><Menu3</a>
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subkategorie 3.1</a></li>
        <li><a href="">Subkategorie 3.2</a></li>
        <li><a href="">Subkategorie 3.3</a></li>
        <li><a href="">Subkategorie 3.4</a></li>
        <li><a href="">Subkategorie 3.5</a></li>
      </ul>
    </li>

Cambiar el texto Menu 3 ... por Menu 4

 

Volver a pegar debajo y cambiar Menu 3... por Menu 5

 

Y por ultimo, debajo de estos te habra quedado el Menu 4, le pones Menu6, sino tendrias dos menus 4 y no funcionaria bien.

 

 

CAMBIAR COLORES DEL MENU

 

PASO 1

 

Cambiar el color del menu

 

Donde pone:

 

menu a
{
   border: 1px solid #888;
   background-color: #fff;

Hay que poner el color de fondo del menu por el negro y quedaria asi:

 

.menu a

{

   border: 1px solid #888;

   background-color: #000;  (negro)

 

PASO 2

 

Cambiar el color del texto

 

En el mismo parrafo del menu a, donde pone: color: #000;

Hay que poner:   color: #fff; (blanco)

 

PASO 3

 

Cambiar el color del menu al pasar el raton

 

Donde pone:

 

menu a:hover
{
   background-color: #ccc;
}


Hay que poner:  

 

menu a:hover

{

   background-color: #F3260B; (Rojo)

}


CODIGO:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Horizontal</title>

<style type="text/css" media="screen">
<!--
body
{
   font-family: Verdana, sans-serif;
   font-size: 14px;
   overflow: auto;
   padding: 10px;
   margin: 0px;
}

ul, li
{
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

.menu
{
   position: absolute;
   z-index: 3;
   top: 10px;
}

.menu li
{
   width: 140px;
   float: left;
}

.menu a
{
   border: 1px solid #888;
   background-color: #fff;
   text-decoration: none;
   text-align: center;
   font-weight: bold;
   cursor: default;
   margin: 0px 2px;
   display: block;
   height: 20px;
   color: #000;
}

.menu a:hover
{
   background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
   font-size: 12px;
   display: none;
   width: 140px;
   float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
   font-weight: normal;
   padding-top: 2px;
   border-top: 0px;
   cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
   with (document)
   {
      if (getElementById)
         getElementById(id).style.display = 'block';
      else if (all)
         all[id].style.display = 'block';
      else
         layers[id].display = 'block';
   }
}

function cache(id)
{
   with (document)
   {
      if (getElementById)
         getElementById(id).style.display = 'none';
      else if (all)
         all[id].style.display = 'none';
      else
         layers[id].display = 'none';
   }
}
//-->
</script>

</head>
<body>

<div class="menu">
  <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
        <li><a href="">Subkategorie 1.1</a></li>
        <li><a href="">Subkategorie 1.2</a></li>
        <li><a href="">Subkategorie 1.3</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>
      <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
        <li><a href="">Subkategorie 2.1</a></li>
        <li><a href="">Subkategorie 2.2</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subkategorie 3.1</a></li>
        <li><a href="">Subkategorie 3.2</a></li>
        <li><a href="">Subkategorie 3.3</a></li>
        <li><a href="">Subkategorie 3.4</a></li>
        <li><a href="">Subkategorie 3.5</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
      <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        <li><a href="">Subkategorie 4.1</a></li>
        <li><a href="">Subkategorie 4.2</a></li>
        <li><a href="">Subkategorie 4.3</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>