WINTXCODERS Terminal
[visitante@wintxcoders-pc ~]:$ Bienvenido a la comunidad
Recuerda que puedes participar en nuestra comunidad registrándote

Revision de codigo HTML - Menu Desplegable.

Iniciado por Wintx Hack, Noviembre 05, 2015, 01:17:32 PM

« anterior - próximo »

Wintx Hack

Visitante

  • Desconectado
  • 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

    <!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

    * {
    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

    @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
    You are not allowed to view links. Register or Login
    [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

    Visitante

  • Desconectado
  • 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:

    <!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:

      <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:

    <!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

  • Desconectado
  • 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
    Entrar a la web You are not allowed to view links. Register or Login
    "Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
    Dudas / Sugerencias: You are not allowed to view links. Register or Login

    Wintx Hack

    Visitante

  • Desconectado
  • You are not allowed to view links. Register or Login
    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

    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

  • Desconectado
  • Noviembre 06, 2015, 11:44:05 PM #4 Last Edit: Noviembre 06, 2015, 11:47:38 PM by WIитX
    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!
    Entrar a la web You are not allowed to view links. Register or Login
    "Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
    Dudas / Sugerencias: You are not allowed to view links. Register or Login

    Wintx Hack

    Visitante

  • Desconectado
  • You are not allowed to view links. Register or Login
    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!

    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