Estás aquí
Navegación de diapositivas con jQuery y CSS3Noticias 

Navegación de diapositivas con jQuery y CSS3

BlogUneWeb

Navegación de diapositivas con jQuery y CSS3

Sólo otro menú móvil de navegación de la aplicación de estilo que es pegajosa en el lado izquierdo de la página web cuando toggled y empuja a la sección de contenido principal a la derecha con una capa completa.

Construido encima de HTML5, CSS3 transiciones y transformaciones y jQuery toggleClassmétodo.

Cómo usarlo:

1. Crear el código HTML para una navegación lado con un botón de activación.

1 <header>
2   <div class="navBtn">+</div>
3   <nav>
4    <a href="">Home</a>
5    <a href="">About</a>
6    <a href="">Contact</a>
7   </nav>
8 </header>

2. El CSS necesario para la navegación del lado Estilo y hacer que responda utilizando CSS3 preguntas de los medios.

01 /* 1024 */
02 @media onlyscreen and (max-width:1024px) {
03
04 header {width:8%; }
05
06 }
07
08 /* 768 */
09 @media onlyscreen and (max-width:768px) {
10
11 header {width:10%; }
12
13 }
14
15 /* 480 */
16 @media onlyscreen and (max-width:480px) {
17
18 .main {width:90%; }
19
20
21 /* 320 */
22 @media onlyscreen and (max-width:320px) {
23  header {
24  width:15%;
25 }
26 }

2. Crear un elemento de recubrimiento que cubre el contenido principal, como la navegación lateral está abierta.

1 <div class="overlay"></div>

3. Estilo de la superposición de lo que quiera.

1 .overlay {
2   width:100%;
3   background:#384047;
4   opacity: .85;
5   z-index:1;
6   height:100%;
7   position:fixed;
8   display:none;
9 }

4. Ajustar el contenido principal de un elemento contenedor con la clase CSS de “principal”.

1 <div class="main">
2   ...
3 </div>

5. Los estilos CSS para animar el comportamiento de “empuje”.

1 .push {
2   margin-left:240px;
3   margin-right:-240px;
4   transition: .3s ease-in;
5 }

6. Incluye la última versión de jQuery JavaScript biblioteca en la parte inferior de la página.

1 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

7. Un poco javacript para permitir la navegación del lado usando jQuery toggleClassmétodo.

01 $(document).ready(function () {
02
03   var toggle<a href="http://www.jqueryscript.net/menu/">Menu</a> = function() {
04     $('header').toggleClass('toggle');
05     $('.main').toggleClass('push');
06     $('.overlay').toggleClass('block');
07     $('#social, .logo').toggleClass('reveal');
08   };
09
10   //Nav
11   $('.navBtn').click(function() {
12     toggleMenu();
13   });
14
15   Mousetrap.bind('esc', function() {
16     toggleMenu();
17   });
18
19 });

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

Entradas relacionadas