Uneweb Instituto: Diseña un menú Vertical tipo Slider con transiciones de CSS3

En el siguiente tutorial vamos a crear otro menú tipo slider con efectos de transición de css3 (Otros Ejercicios de menú con propiedades de CSS3: menú 1 – menú 2), un ejercicio donde crearemos un hermoso menú que a la vez es muy práctico, muy sencillo y fácil para usar en algunos de nuestros proyectos.

Esto es lo que vamos a conseguir, el resultado de nuestro ejercicio de hoy:

Para una perfecta Visualización utiliza estos navegadores en sus respectivas versiones:

Vamos a comenzar!!.

EL HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<div id="slider">

      <ul>

          <li>

             <a href="" class="menudesplieg">HTML5</a>

                <div>

                    <h5>HTML5</h5>

                       <p>HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web                          modernos. Algunos de ellos son técnicamente similares a las etiquetas 

                       </p>

                       <p class="desplieg">

                          <a href="http://es.wikipedia.org/wiki/HTML5">Leer Mas...</a>

                       </p>

               </div>

          </li>

          <li>

             <a href="" class="menudesplieg">CSS3</a>

                <div>

                   <h5>CSS3</h5>

                     <p>CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras claves 

                     tomadas del inglés para especificar los nombres de sus selectores, propiedades y atributos.

                     </p>

                     <p class="desplieg">

                        <a href="http://es.wikipedia.org/wiki/CSS3#CSS_3">Leer Mas...</a>

                     </p>

                </div>

         </li>

         <li>

            <a href="" class="menudesplieg">PHP</a>

              <div>

                 <h5>PHP</h5>

                   <p>PHP es un lenguaje de programación de uso general de script del lado del servidor originalmente diseñado                      para el desarrollo web de contenido dinámico.

                   </p>

                   <p class="desplieg">

                      <a href="http://es.wikipedia.org/wiki/PHP">Leer Mas...</a>

                   </p>

               </div>

         </li>

         <li>

            <a href="" class="menudesplieg">MySQL</a>

               <div>

                  <h5>MySQL</h5>

                     <p>MySQL es un sistema de gestión de bases de datos relacional, multihilo y multiusuario 

                     con más de seis millones de instalaciones.

                     </p>

                     <p class="desplieg">

                        <a href="http://es.wikipedia.org/wiki/Mysql">Leer Mas...</a>

                     </p>

              </div>

        </li>

         <li>

            <a href="" class="menudesplieg">JQuery</a>

                <div>

                   <h5>JQuery</h5>

                      <p>Query es una biblioteca de JavaScript, creada inicialmente por John Resig, 

                         que permite simplificar la manera de interactuar con los documentos HTML

                      </p>

                      <p class="desplieg">

                         <a href="http://es.wikipedia.org/wiki/Jquery">Leer Mas...</a>

                      </p>

               </div>

         </li>

    </ul>

 </div>

En el código html básicamente tenemos un div contenedor <div id=”slider”>, luego una lista desordenada <ul> en ella su respectivo ítem <li> y el enlace <a> que al situarnos sobre el desplegara una acción, se despliega el <div> interior que a su vez tiene un titulo <h5>, un párrafo <p> que es el texto de introducción y dentro de un párrafo <p> tenemos el enlace a ver mas. Esto es todo lo que tenemos en el código html, Fácil cierto.

seria mas o menos algo asi:

EL CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

#slider {

    height: 280px;

}

#slider ul:before {

    background: rgb(0,153,153); /* Old browsers */

    background: -moz-linear-gradient(left,  rgb(0,153,153) 0%, rgb(74,153,153) 66%, rgb(106,183,182) 86%, rgb(0,153,153) 99%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,153,153)), color-stop(66%,rgb(74,153,153)), color-stop(86%,rgb(106,183,182)), color-stop(99%,rgb(0,153,153))); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(left,  rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /*Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(left,  rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /* Opera 11.10+ */

    background: -ms-linear-gradient(left,  rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /* IE10+ */

    background: linear-gradient(to right,  rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009999', endColorstr='#009999',GradientType=1 ); /* IE6-8 */

    border-radius: 30px 0 0 30px;

    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.65);

    content: "";

    height: 100%;

    margin-top: -40px;

    position: absolute;

    width: 182px;

    z-index: 100;

}

#slider ul {

    list-style: none outside none;

    margin-left: 10px;

    margin-top: 10px;

    padding: 40px 0;

    position: relative;

    width: 182px;

}

#slider ul li {

    height: 40px;

    width: 182px;

}

#slider ul li a.menudesplieg {

    border-bottom: 1px solid #00CFCA;

    color: white;

    display: block;

    font-family: 'Trebuchet MS';

    font-size: 1.6em;

    font-style: italic;

    letter-spacing: -1px;

    padding-left: 22px;

    position: absolute;

    text-decoration: none;

    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    width: 160px;

    z-index: 110;

}

#slider ul li div {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);

     border-radius: 0 15px 15px 0;

    color: white;

    height: 266px;

    left: 0;

    opacity: 0;

    overflow: hidden;

    padding: 0 15px 15px;

    position: absolute;

    top: 0;

    transition: 1s left,1s width,1s opacity;

    -webkit-transition: 1s left,1s width,1s opacity;

    -moz-transition: 1s left,1s width,1s opacity;

    -o-transition: 1s left,1s width,1s opacity;

    width: 152px;

    z-index: 50;

}

#slider ul li:hover div {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);

    left: 182px;

    opacity: 1;

    width: 276px;

}

#slider ul li div h5 {

    border-bottom: 1px solid #888;

    color: #009999;

    font-family: trebuchet ms;

    font-size: 2.5em;

    margin: 0 0 5px;

    text-align: center;

}

#slider ul li div p {

    font-family: trebuchet ms;

    font-size: 1em;

    font-style: italic;

    font-weight: normal;

    overflow: hidden;

    padding-top: 15px;

    width: 276px;

}

#slider ul li div p.desplieg {

    float: right;

}

#slider ul li div p.desplieg a {

    background: none repeat scroll 0 0 #FFFFFF;

    border-radius: 8px 8px 8px 8px;

    color: #009999;

    display: inline-block;

    font-size: 15px;

    font-weight: bold;

    height: 18px;

    margin: 10px 0;

    padding: 4px;

    text-decoration: none;

}

El código css que generamos también es muy intuitivo y fácil de comprender, pero hare referencia a algunas propiedades. En el div #slider ul:before que es la parte que nos mostrara los enlaces, damos algunas propiedades importantes, por ejemplo el Gradient o degradado, para eso utilizamos una herramienta generadora de css onlinehttp://www.colorzilla.com/gradient-editor/ para hacer este trabajo, y lo generamos para los distintos navegadores. Y la propiedad de transición que nos hace este trabajo elegante se la aplicamos al <div> que se encuentra dentro del ítem <li> de la lista <ul> del <div slider>, igualmente generamos el código transition para los diferentes navegadores según su prefijo. Lo demás es código css de posicionamiento y para hacer la parte visual muy agradable.

Adicionalmente te recomiendo adjuntar o incluir el código reset css dehttp://meyerweb.com/eric/tools/css/reset/ o algun otro codigo css para resetear los css de los diferentes navegadores para tener un mejor control de nuestro ejercicio.

Esto es todo por este ejercicio, pero se puede crear mas, aumentar su funcionalidad pero ya lo dejo a tu imaginación.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información

sábado, 11 de julio de 2015

Diseña un menú Vertical tipo Slider con transiciones de CSS3

EL HTML

EL CSS

No hay comentarios:

Publicar un comentario

Entradas populares