Revision de codigo HTML - Menu Desplegable.

Wintx Hack · Noviembre 05, 2015, 01:17:32 PM

Hola hola amigos de Wintx Coders en esta oportunidad vengo otra vez con mis " Revisiones de codigos " y es que hice un menu desplegable como practica de lo que he aprendido & siguiendo un tutorial de la Web, yo les voy a publicar el code & un archivo adjunto de las fonts(Icons) que utilice. Se me hizo muy dificil en varios momentos(Mas que todo con el Css) pero para alante porque poco a poco lo que aprenda quiero aportarselo a ustedes.

PD: No se como colocar el codigo HTML5 aqui en el foro pero se los dejare en un "CODE":

Index.HTML - Tittle : Wintx Hack Project 0.1

Código [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Wintx Hack Project</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">
	<link rel="stylesheet" type="text/css" href="fonts.css">
</head>
<body>

      <header>
             <nav>
             	<ul>
             		
             		<li><a href="#"><span class="primero"><i class="icon icon-home2"></i></span>Inicio</a></li>
             		<li><a href="#"><span class="segundo"><i class="icon icon-price-tag"></i></span>Categorias</a>
             		    <ul>
             		    	<li><a href="#">Item 1</a></li>
             		    	<li><a href="#">Item 2</a></li>
             		    	<li><a href="#">Item 3</a></li>
             		    	<li><a href="#">Item 4</a></li>
             		    	<li><a href="#">Item 5</a></li>
             		    </ul>

             		</li>
             	    <li><a href="#"><span class="tercero"><i class="icon icon-file-text"></i></span>Servicios</a></li>
             	    <li><a href="#"><span class="cuarto"><i class="icon "></i></span>Acerca de</a></li>
             	    <li><a href="#"><span class="quinto"><i class="icon icon icon-mail4"></i></span>Contacto</a></li>
             			
             	</ul>


             </nav>
      	</header>

</body>
</html>

estilos.css

Código [Seleccionar]

* {
	margin: 0;
	padding: 0;
}

header {

	width: 100%;
}

nav {
	margin: 20px auto;
	width: 90%;
	max-width: 1000px;
}

nav ul {
	list-style: none;

}

nav > ul {
	display: table;
	overflow: hidden;
	width: 100%;
	background-color: #000;
	position: relative;
}

nav > ul li {
	display: table-cell;
}

/*Sub-Menu*/

nav > ul > li:hover > ul{
	display: block;
	height: 100%;

}

nav > ul > li > ul {
	display: block;
	position: absolute;
	background: #000;
	left: 0;
	right: 0;
	overflow: hidden;
	height: 0%;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;

}

nav > ul li a {
	color: #FFF;
	display: block;
	line-height: 20px;
	padding: 20px;
	position: relative;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;

}

nav > ul > li > ul > li a:hover {
	background: #5da5a2;
}

nav > ul > li > a span {
	background: #174459;
	display:block;
	height: 100%;
	width: 100%;
	left: 0;
	position: absolute;
	top: -55px;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;


}

nav > ul > li > a span .icon {
	display: block;
	line-height: 60px;
}

nav > ul > li > a:hover > span {
	top: 0;

}

/*Colores*/

nav ul li a .primero {
	background: #0e5061;
}

nav ul li a .segundo {
	background: #5da5a2;
}

nav ul li a .tercero {
	background: #f25724;
}

nav ul li a .cuarto {
	background: #174459;
}

nav ul li a .quinto {
	background: #37a4d9;
}

Fonts

Código [Seleccionar]

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?m86xfl');
	src:url('fonts/icomoon.eot?m86xfl#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?m86xfl') format('truetype'),
		url('fonts/icomoon.woff?m86xfl') format('woff'),
		url('fonts/icomoon.svg?m86xfl#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-home2:before {
	content: "\e900";
}
.icon-file-text:before {
	content: "\e902";
}
.icon-price-tag:before {
	content: "\e901";
}
.icon-mail4:before {
	content: "\e903";
}
.icon-world:before {
	content: "\e904";
}

Archivos Adjuntos:

Spoiler

http://www.4shared.com/zip/1yYmLDubba/Wintx_Hack_-_Para_Wintx_Coders.html

[close]

NOTA : Para probar el menu tienen que descargar la carpeta que subi ya que contiene la carpeta de las Fonts.css(Contiene los icons)

Wintx Hack · Noviembre 05, 2015, 05:00:23 PM

Buenas buenas, disculpenme el doble mensaje pero pasa lo siguiente, tengo una duda para los mas experimentados & es el siguiente ...

Anteriormente publique mi Menu despegable & ya terminado eso quiero terminar de maquetizar mi pagina web(Conocimientos basicos siendo sincero).

Codigo anterior:

Código [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Wintx Hack Project</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">
	<link rel="stylesheet" type="text/css" href="fonts.css">
</head>
<body>

      <header>
             <nav>
             	<ul>
             		
             		<li><a href="#"><span class="primero"><i class="icon icon-home2"></i></span>Inicio</a></li>
             		<li><a href="#"><span class="segundo"><i class="icon icon-price-tag"></i></span>Categorias</a>
             		    <ul>
             		    	<li><a href="#">Item 1</a></li>
             		    	<li><a href="#">Item 2</a></li>
             		    	<li><a href="#">Item 3</a></li>
             		    	<li><a href="#">Item 4</a></li>
             		    	<li><a href="#">Item 5</a></li>
             		    </ul>

             		</li>
             	    <li><a href="#"><span class="tercero"><i class="icon icon-file-text"></i></span>Servicios</a></li>
             	    <li><a href="#"><span class="cuarto"><i class="icon "></i></span>Acerca de</a></li>
             	    <li><a href="#"><span class="quinto"><i class="icon icon icon-mail4"></i></span>Contacto</a></li>
             			
             	</ul>


             </nav>
      	</header>

</body>
</html>

Lo siguiente que hice fue colocar las etiquetas en este codigo siguiendo etiquetas basicas que conozco & quedaria de la siguiente manera:

Código [Seleccionar]

  <section>
          
          <div class="">
            
          </div>
          
        </section>

        <aside class="">
          
        </aside>

        <footer></footer>

Este codigo lo colocaria al finalizar mi etiqueta "Header" & el codigo completo quedaria de la siguiente manera:

Código [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Wintx Hack Project</title>
	<link rel="stylesheet" type="text/css" href="estilos.css">
	<link rel="stylesheet" type="text/css" href="fonts.css">
</head>
<body>

      <header>
             <nav>
             	<ul>
             		
             		<li><a href="#"><span class="primero"><i class="icon icon-home2"></i></span>Inicio</a></li>
             		<li><a href="#"><span class="segundo"><i class="icon icon-price-tag"></i></span>Categorias</a>
             		    <ul>
             		    	<li><a href="#">Item 1</a></li>
             		    	<li><a href="#">Item 2</a></li>
             		    	<li><a href="#">Item 3</a></li>
             		    	<li><a href="#">Item 4</a></li>
             		    	<li><a href="#">Item 5</a></li>
             		    </ul>

             		</li>
             	    <li><a href="#"><span class="tercero"><i class="icon icon-file-text"></i></span>Servicios</a></li>
             	    <li><a href="#"><span class="cuarto"><i class="icon "></i></span>Acerca de</a></li>
             	    <li><a href="#"><span class="quinto"><i class="icon icon icon-mail4"></i></span>Contacto</a></li>
             			
             	</ul>


             </nav>
      	</header>

        <section>
          
          <div class="">
            
          </div>
          
        </section>

        <aside class="">
          
        </aside>

        <footer></footer>

</body>
</html>

Mi duda es la siguiente ... ¿Esta bien las etiquetas que estoy utilizando?

2 - : Que debo hacer para colocar bloques en cada etiqueta ya sea "Section", " Aside " & Footer.

Maquetizar la pagina que estoy haciendo.

WIитX · Noviembre 06, 2015, 01:00:24 AM

Código (html5) [Seleccionar]

<!DOCTYPE html>
<head>
</head>
<body>
<div id="bloque1">
    <img src="http://wintxcoders.com/images/logo.png"/>
<p>Hola esto es un párrafo sin class"</p>
<p>Hola esto es otro párrafo sin class"</p>
</div>

<div id="bloque2">
    <p class="texto">Hola esto es un texto en el bloque 2"</p>
</div>
</body>
</html>

Hola de nuevo! deberías a ver abierto otro post, pero bueno

ya que estamos te respondo aquí.

Para hacer grupos o "contenedores" se usan los divs un div es un contenedor y en el meter todo lo que quieras que este dentro por ejemplo un menu con etiquetas <ul> <p> entonces cuando tu vas a tu CSS y pones por ejemplo:

Código (xml) [Seleccionar]


#bloque1 {
width: 500px;
height: 600px;
background-color: red;
}

#bloque1 p {
font-family: Open Sans;
color: Black;
font-size: 30px;
}

#bloque1 p significa que todos los elementos p que están dentro de tu contenedor tendrán un tamaño de 30px, será la font de color negro y la fuente del texto será Open Sans. Luego #bloque1 si te fijas dentro de bloque1 está la imagen pues la imagen estará dentro del rectángulo que hemos creado nuestro rectángulo mide 500x600 pues nuestra imagen será así de grande ósea quedará dentro del contenedor.

Saludos

Wintx Hack · Noviembre 06, 2015, 03:03:29 PM

Cita de: WIитX en Noviembre 06, 2015, 01:00:24 AM
Código (html5) [Seleccionar] Expand
<!DOCTYPE html> <head> </head> <body> <div id="bloque1"> <img src="http://wintxcoders.com/images/logo.png"/> <p>Hola esto es un párrafo sin class"</p> <p>Hola esto es otro párrafo sin class"</p> </div> <div id="bloque2"> <p class="texto">Hola esto es un texto en el bloque 2"</p> </div> </body> </html>

Hola de nuevo! deberías a ver abierto otro post, pero bueno ya que estamos te respondo aquí.

Para hacer grupos o "contenedores" se usan los divs un div es un contenedor y en el meter todo lo que quieras que este dentro por ejemplo un menu con etiquetas <ul> <p> entonces cuando tu vas a tu CSS y pones por ejemplo:

Código (xml) [Seleccionar] Expand
#bloque1 { width: 500px; height: 600px; background-color: red; } #bloque1 p { font-family: Open Sans; color: Black; font-size: 30px; }

#bloque1 p significa que todos los elementos p que están dentro de tu contenedor tendrán un tamaño de 30px, será la font de color negro y la fuente del texto será Open Sans. Luego #bloque1 si te fijas dentro de bloque1 está la imagen pues la imagen estará dentro del rectángulo que hemos creado nuestro rectángulo mide 500x600 pues nuestra imagen será así de grande ósea quedará dentro del contenedor.

Saludos

Hola bro, muchisimas gracias por tu respuesta & disculpame por no abrir otro post para mi segunda duda, pero bueno al caso.

Utilice tu codigo, primero lo hice a mi manera & no tuve resultado alguno. No me mostraba los bloques. Luego copie tu codigo y lo pegue & de igual manera hice con tu codigo css & no pasaba nada. Yo habia enlazado y todo el css a el index.html pero no pase nada.

Si puedes pasar el codigo ya completo te lo agradeceria. Es para entender mejor.

Porque no se si hice algo mal yo o no entendi haha no se pq no me muestra nada en el navegador de las Divs & eso que le colocaste un background-color.

WIитX · Noviembre 06, 2015, 11:44:05 PM

Código (html5) [Seleccionar]

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="css/index.css">
		<title>WINTXCODERS | Beta</title>
	</head>
	<body>
<!-- INICIO DEL PRIMER CONTENEDOR !-->
<div id="box1">
	<p>Todo lo que escribo aquí se escribirá dentro del cuadro blanco</p>
	<p class="texto">En este texto cree un class para que no obedezca al div</p>
</div>
	</body>
</html>

Código (CSS) [Seleccionar]

/* FUENTES Y DEMÁS */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
/* FIN FUENTES Y DEMÁS */

body {
	margin: 0;
	background: url(../images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#box1 {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 500px;
    height: 800px;
    background-color: #FFF;
    font-family: Open Sans;
    font-size: 30px;
}

#box1 .texto {
	    font-family: Open Sans;
    font-size: 15px;
}

Si te fijas e creado 1 div id en el e metido 2 párrafos, por defecto el párrafo obedecerá lo que pongas en el <div id=".."> pero al segundo párrafo le puse un class por que en este caso quería que la letra fuese más pequeña

Hay te dejo ajuntado todo

Saludos!

Wintx Hack · Noviembre 07, 2015, 12:06:48 AM

Cita de: WIитX en Noviembre 06, 2015, 11:44:05 PM
Código (html5) [Seleccionar] Expand
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/index.css"> <title>WINTXCODERS | Beta</title> </head> <body>  <div id="box1"> <p>Todo lo que escribo aquí se escribirá dentro del cuadro blanco</p> <p class="texto">En este texto cree un class para que no obedezca al div</p> </div> </body> </html>

Código (CSS) [Seleccionar] Expand
/* FUENTES Y DEMÁS */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300); /* FIN FUENTES Y DEMÁS */ body { margin: 0; background: url(../images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #box1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 500px; height: 800px; background-color: #FFF; font-family: Open Sans; font-size: 30px; } #box1 .texto { font-family: Open Sans; font-size: 15px; }

Si te fijas e creado 1 div id en el e metido 2 párrafos, por defecto el párrafo obedecerá lo que pongas en el <div id=".."> pero al segundo párrafo le puse un class por que en este caso quería que la letra fuese más pequeña

Hay te dejo ajuntado todo

Saludos!

Debo agradecerte bro, descargare los archivos adjuntos, me estudiare el codigo & empezare a trabajar a raiz de mi menu desplegable para terminar de maquetizar la web.

Errores, Dudas &/o Inconvenientes creo otro post.

Cierro Tema. Salu2

Revision de codigo HTML - Menu Desplegable.

Wintx Hack

Noviembre 05, 2015, 01:17:32 PM

Wintx Hack

Noviembre 05, 2015, 05:00:23 PM #1

WIитX

Noviembre 06, 2015, 01:00:24 AM #2

Wintx Hack

Noviembre 06, 2015, 03:03:29 PM #3

WIитX

Noviembre 06, 2015, 11:44:05 PM #4 Last Edit: Noviembre 06, 2015, 11:47:38 PM by WIитX

Wintx Hack

Noviembre 07, 2015, 12:06:48 AM #5