Blog 7: Menú CSS
¿Qué es un Menú CSS?
Un menú en CSS es un conjunto de enlaces que permiten la navegación por un sitio web. CSS nos ayuda a personalizar el diseño, el estilo y la interacción con el menú, haciendo que sea más atractivo visualmente.
Diseño básico de un menú
A continuación se muestra cómo crear un menú simple con HTML y CSS:
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
<style>
.menu { list-style-type: none; }
.menu li { display: inline; margin-right: 10px; }
.menu li a { text-decoration: none; color: black; }
</style>
¿Por qué usar CSS en un menú?
CSS permite añadir efectos como transiciones, cambios de color, y posiciones dinámicas, lo que mejora la experiencia del usuario.
Código del inicio del menú
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<div class="example">
<ul id="nav">
<li class="current"><a href="#">HOME</a></li>
<li><a href="#">Mantenimiento</a>
<ul>
<li><a href="producto.php">Producto</a></li>
<li><a href="autor.html">laboratorio</a></li>
<li><a href="pais.html">pais</a></li>
<li><a href="presentacion.html">Presentacion</a></li>
<li><a href="formato.html">unidad de medida</a></li>
</UL>
<li><a href="#">Procesos</a>
<ul>
<li><a href="frame.html">Importación</a></li>
<li><a href="frame_ventas.html">Ventas</a></li>
<li><a href="frame_kardex.html">Kardex</a></li>
<li><a href="xbox.html">Inventario</a></li>
</UL>
</li>
<li><a href="#">Reportes</a>
<ul>
<li><a href="nintendo.html">Vehiculo</a></li>
<li><a href="contenido.html">Lista de propietarios</a></li>
<li><a href="play5.html">lista de Vehiculos por marca</a></li>
<li><a href="xbox.html">Lista de Repuestos </a></li>
</UL>
</li>
<li><a href="#">Contactenos</a>
<ul>
<li><a href="test01.HTML">Ubicación</a></li>
<li><a href="lista2.HTML">Formulario</a>
</ul>
</li>
</ul>
</div>
Creación del menú
País
<HTML>
<head>
</head>
<script>
function f_guardar()
{
// alert("hola 1");
op.value=1;
}
function f_mostrar()
{
// alert("hola 2");
op.value=2;
}
function f_buscar()
{
// alert("hola 3");
op.value=3;
}
</script>
<BODY>
<H2> MANTENIMIENTO DE PAIS</H2>
<form id="form1" name="form1" method=POST action="M_PAIS.PHP">
CODIGO:
<input type="text" name="COD">
</label>
<p>
DESCRIPCION:
<input type="text" name="DES">
</label>
</p>
<input type="hidden" name="op" id="op">
<input type="SUBMIT" value="GUARDAR" NAME="GUARDAR" onClick="f_guardar()">
<input type="SUBMIT" value="MOSTRAR" NAME="MOSTRAR" onClick="f_mostrar()">
<input type="SUBMIT" value="BUSCAR" NAME="BUSCAR" onClick="f_buscar()">
</form>
</BODY>
</HTML>
Presentación
<HTML>
<head>
</head>
<script>
function f_guardar()
{
// alert("hola 1");
op.value=1;
}
function f_mostrar()
{
// alert("hola 2");
op.value=2;
}
function f_buscar()
{
// alert("hola 3");
op.value=3;
}
function f_buscar_nombre()
{
// alert("hola 4");
op.value=4;
}
</script>
<BODY>
<H2> PRESENTACION</H2>
<form id="form1" name="form1" method=POST action="presentacion.php">
CODIGO:
<input type="text" name="COD">
</label>
<p>
NOMBRE:
<input type="text" name="NOM">
</label>
<p>
?>
<?php
echo "PRESENTACION: ";
echo "<select name='presentacion'>";
include("abre_conexion.php");
$result=mysql_query("select * from presentacion order by pre_descripcion");
while($row=mysql_fetch_array($result))
{
echo "<option value='". $row[0] . "'" .">". $row[1] . "</option>" ;
}
include("cierra_conexion.php");
echo "</select> <p>";
?>
</p>
</label>
<p>
<input type="hidden" name="op" id="op">
<input type="SUBMIT" value="GUARDAR" NAME="GUARDAR" onClick="f_guardar()">
<input type="SUBMIT" value="MOSTRAR" NAME="MOSTRAR" onClick="f_mostrar()">
<input type="SUBMIT" value="BUSCAR" NAME="BUSCAR" onClick="f_buscar()">
<input type="SUBMIT" value="BUSCAR * nombre" NAME="BUSCAR2" onClick="f_buscar_nombre()">
</form>
</BODY>
</HTML>
Producto
<?php
$opcion= $_POST["op"];
echo " MANTENIMIENTO DE PAIS <br>";
echo $opcion . "<br>";
if ($opcion==1)
{
$codigo=$_POST["COD"];
$descripcion=$_POST["DES"];
echo "CODIGO: " . $codigo . "<br>";
echo "DESCRIPCION: " . $descripcion . "<br>";
// Abrimos la conexion a la base de datos
include("abre_conexion.php");
$_GRABAR_SQL = "INSERT INTO PAIS (pai_codigo,pai_descripcion) VALUES ('$codigo','$descripcion')";
mysql_query($_GRABAR_SQL);
// Cerramos la conexion a la base de datos
include("cierra_conexion.php");
echo "<p>Los datos han sido guardados con exito.</p> ";
}
if ($opcion==2)
{
echo "MOSTRAR TODOS LOS REGISTROS MARCAS <BR>";
include("abre_conexion.php");
//$con=mysql_connect('localhost','root','');
//mysql_select_db("sistem17",$con) or die("no se pudo conectar") ;
$result=mysql_query("select * from pais order by pai_descripcion");
while($row=mysql_fetch_array($result))
{
echo $row[0] ;
echo " ". $row[1] . "<br>";
}
include("cierra_conexion.php");
}
if ($opcion==3)
{
echo "BUSCAR REGISTROS DE ARCHVOS <br>";
$codigo=$_POST["COD"];
echo "CODIGO A BUSCAR: " . $codigo . "<br>";
include("abre_conexion.php");
$result=mysql_query("select * from PAIS where PAI_codigo='$codigo'");
$sw=0;
while($row=mysql_fetch_array($result))
{
if ($codigo==$row[0])
{
echo "Registro localizado <br>";
echo "CODIGO: " . $row[0] . "<BR>";
echo "MARCA: " . $row[1] . "<BR>";
$sw=1;
}
}
if($sw==0)
{
echo " REGISTRO NO ENCONTRADO!!! <br>";
}
include("cierra_conexion.php");
}
echo "<a href='index.html'>VOLVER A MENU </A>";
?>
.jpg)
.jpg)
No hay comentarios.:
Publicar un comentario