como hago para que php me muestre el desplegable que elijo

xexu1990 · #1 (**permalink**) 19/11/2014, 11:59

buenas, pues aqui os expongo mi duda a ver si me podeis echar una mano :D

estoy intentando hacer en html 2 botones, uno "motos" y otro "coches" (los botones ya los tengo)

al elegir uno de esos 2 botones quiero que me saque un menu desplegable en la misma pagina que me indique marcas, por ejemplo

BOTON ELEGIDO: coches

MENU DESPLEGABLE: citroen, mercedes, audi etc...

muchas gracias por vuestro tiempo y ayuda.
un saludo!

herzbazi · #2 (**permalink**) 19/11/2014, 12:11

Cita:

Iniciado por xexu1990

buenas, pues aqui os expongo mi duda a ver si me podeis echar una mano :D

estoy intentando hacer en html 2 botones, uno "motos" y otro "coches" (los botones ya los tengo)

al elegir uno de esos 2 botones quiero que me saque un menu desplegable en la misma pagina que me indique marcas, por ejemplo

BOTON ELEGIDO: coches

MENU DESPLEGABLE: citroen, mercedes, audi etc...

muchas gracias por vuestro tiempo y ayuda.
un saludo!

http://www.wifeo.com/code/15-full-css-menu.html

solmedina87 · #3 (**permalink**) 24/11/2014, 15:12

Acá muestran como hacerlo y muy fácil:
[URL="http://www.falconmasters.com/tutoriales/como-hacer-un-menu-desplegable/"]http://www.falconmasters.com/tutoriales/como-hacer-un-menu-desplegable/[/URL]

Fijate que para el menú se usa la etiqueta UL de HTML y cada menu es un LI, si querés un menú desplegable, dentro del LI simplemente hay que hacer otro menú.

El ejemplo:

Código HTML:

<html>
	<head>
		<title>Menu Desplegable</title>
		<style type="text/css">
			
			* {
				margin:0px;
				padding:0px;
			}
			
			#header {
				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#000;
				color:#fff;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
			
			.nav li a:hover {
				background-color:#434343;
			}
			
			.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}
			
			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}
			
		</style>
	</head>
	<body>
		<div id="header">
			<ul class="nav">
				<li><a href="">Inicio</a></li>
				<li><a href="">Servicios</a>
					<ul>
						<li><a href="">Submenu1</a></li>
						<li><a href="">Submenu2</a></li>
						<li><a href="">Submenu3</a></li>
						<li><a href="">Submenu4</a>
							<ul>
								<li><a href="">Submenu1</a></li>
								<li><a href="">Submenu2</a></li>
								<li><a href="">Submenu3</a></li>
								<li><a href="">Submenu4</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="">Acerca de</a>
					<ul>
						<li><a href="">Submenu1</a></li>
						<li><a href="">Submenu2</a></li>
						<li><a href="">Submenu3</a></li>
						<li><a href="">Submenu4</a></li>
					</ul>
				</li>
				<li><a href="">Contacto</a></li>
			</ul>
		</div>
	</body>
</html>