Solicitamos su permiso para obtener datos estadísticos de su navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúa navegando consideramos que acepta el uso de cookies.

Aceptar Más información
WINTXCODERS Terminal
[[email protected] ~]:$ Bienvenido a la comunidad
Recuerda que puedes participar en nuestra comunidad registrándote

Autor Tema: [LEGAL] Revision de codigo HTML - Menu Desplegable.  (Leído 329 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Wintx Hack

  • Visitante
  • Desconectado
  • *
  • 34
    92
    0
    • Ver Perfil
[LEGAL] Revision de codigo HTML - Menu Desplegable.
« en: 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:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<!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:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
* {
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:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
@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:


Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]

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

  • Visitante
  • Desconectado
  • *
  • 34
    92
    0
    • Ver Perfil
Re:Revision de codigo HTML - Menu Desplegable.
« Respuesta #1 en: 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:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<!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:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
  <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:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<!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

  • Administrador
  • Conectado
  • *
  • 1370
    7478
    72
  • Texto personal
    I'm not a hacker I'm security professional.
    • Ver Perfil
    • WINTXCODERS.COM
Re:Revision de codigo HTML - Menu Desplegable.
« Respuesta #2 en: Noviembre 06, 2015, 01:00:24 am »
Código: (html5)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<!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)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
#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
Entrar a la web
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
Dudas / Sugerencias: [email protected]

Wintx Hack

  • Visitante
  • Desconectado
  • *
  • 34
    92
    0
    • Ver Perfil
Re:Revision de codigo HTML - Menu Desplegable.
« Respuesta #3 en: Noviembre 06, 2015, 03:03:29 pm »

Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
Código: (html5)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<!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)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
#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

  • Administrador
  • Conectado
  • *
  • 1370
    7478
    72
  • Texto personal
    I'm not a hacker I'm security professional.
    • Ver Perfil
    • WINTXCODERS.COM
Re:Revision de codigo HTML - Menu Desplegable.
« Respuesta #4 en: Noviembre 06, 2015, 11:44:05 pm »
Código: (html5)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<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)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
/* 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!
« Última modificación: Noviembre 06, 2015, 11:47:38 pm por WIитX »
Entrar a la web
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
Dudas / Sugerencias: [email protected]

Wintx Hack

  • Visitante
  • Desconectado
  • *
  • 34
    92
    0
    • Ver Perfil
Re:Revision de codigo HTML - Menu Desplegable.
« Respuesta #5 en: Noviembre 07, 2015, 12:06:48 am »

Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
Código: (html5)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<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)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
/* 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

 

Powered by Advanced Topic Prefix Pro