Tutopixel

Hola! . ¿Qué tal amigos? . En esta ocación les traigo un el código de un menú de navegación en css3 + Html . Para que puedan intregarlo a su página web o simplemente aprender un poco el lenguaje del diseño de CSS3 . Versión compatible con casi todos los navegadores. (Algunas animaciones no funcionan en IE 8 - IE 9.) El menú También les dejo la intalación manual en el post. Primero vamos al código HTML : <nav> <ul class="nav"> <li><a href="Acá la dirección" title="titulo 1">link 1</a></li> <li ><a href="Acá la dirección" title="titulo 2">link 2</a></li> <li><a href="Acá la dirección title="titulo 3">link 3</a></li> <li><a href="Acá la dirección" title="titulo 4">link 4</a></li> <li><a href="Acá la dirección" title="titulo 5">link 5</a></li> <li><a href="Acá la dirección" title="titulo 6">link 6</a></li> </ul> </nav> Y ahora al código CSS : .nav { height: 48px; display: inline-block; } .nav > li, .nav:active > .active { float: left; position: relative; margin: 0 0 4px; height: 44px; color: #ccc; text-shadow: 0 1px rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.05); border: 1px solid #232428; border-bottom-color: #1f2326; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2); } .nav > li:hover { color: #b0d157; text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5); } .nav > li.active, .nav > .active:active, .nav > li:active { z-index: 2; margin: 4px 0 0; height: 43px; color: #aaa; text-shadow: 0 1px black; background-color: rgba(255, 255, 255, 0.03); border-color: #212425; border-width: 1px 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05); } .nav > li:active { z-index: 3; } .nav > li:first-child { border-left-width: 1px !important; border-left-color: #212425; border-radius: 5px 0 0 5px; } .nav > li:last-child { border-right-width: 1px !important; border-right-color: #212425; border-radius: 0 5px 5px 0; } .nav > li + li, .nav:active > .active + li, .nav:active > li + .active { border-left-width: 0; } .nav > .active + li, .nav > .active:active + li, .nav > li:active + li, .nav > li:active + .active { border-left-width: 1px; } .nav > li > a { display: block; line-height: 44px; padding: 0 20px; font-size: 12px; font-weight: bold; color: inherit; text-decoration: none; outline: 0; } Explicación básica del código. Solo tenemos que editar la dirección de lo que yo demarqué con rojo. Es a la página que irá nuestro boton una vez presionado sobre el. <nav> <ul class="nav"> <li><a href="Acá la dirección" title="titulo 1">link 1</a></li> </ul> </nav> Y si queremos agregar más tabs . Solo agregamos <li><a href="Acá la dirección" title="titulo 1">link 1</a></li> Entre : <nav> <ul class="nav"> /***** AQUÍ ****/ </ul> </nav> Eso es todo amigos espero que les haya gustado Si te ayudamos no olvides darnos tu megusta en facebook! Muchas Gracias!