Aprende Como hacer el menú de Apple.com con HTML, CSS y Jquery. Menú completo desde los botones, hasta la barra de búsquedas flexible.

Share on Pinterest
Comparte con tus amigos










Enviar

Uno de los menús de navegación mas geniales que he visto en toda la web es el de Apple, siguiendo la ideología que tienen en todos sus diseños, este menú es sencillo y al mismo tiempo elegante, y aunque elegante no pierde la amabilidad que se tiene al navegar por sus elementos.

El menu es muy sencillo, se trata nada mas de una serie de botones para navegar hacia las diversas areas de la web y una barra de búsqueda que cuenta con una característica muy innovadora, comenzando por un pequeño tamaño esta barra se alarga al pulsar sobre ella, dándonos mas espacio para escribir.

Algo que me fascino del menú es la cantidad de detalles que a primera vista no se ven, pero que en conjunto logran un diseño único. El menú lo han hecho mediante imágenes por lo que sus botones son muy bonitos. Así que después de pensarlo decidí intentar replicar su menú de navegación utilizando solo HMTL5, CSS3 y Jquery.

El resultado que obtuve fue el siguiente:

Demo del Menu: http://falconmasters.com/demos/menu_apple/

 

Como hacer el menú de Apple.com

 

Recursos utilizados:

http://necolas.github.io/normalize.css/

http://www.colorzilla.com/gradient-editor/

http://icomoon.io/app/#/select/font

http://www.entypo.com/

Jquery: http://code.jquery.com/jquery-latest.js

 

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • juan

    Hola amigo ;D oie, sera que me puedes mandar el codigo del menú porfas, e intentado varias veces pero no me funciona, era que me ayudas amigo? ;D me o envias? porfas, gracias!!

    • PROGRAMADORES AIEP

      pones inspeccionar elemento el demo

  • Pingback: Menú de navegación desplegable con Animaciones CSS 3()

  • David González

    Hola Carlos Arturo, si me permites me gustaría recomendarte que usaras transform:scaleX para modificar la barra de búsqueda al pasar a “focus”. El performance de css es superior al de Jquery y, a la vez, transform permite al navegador recalcular menos por lo cual el rendimiento del codigo en ios y android mejora. Hay un bug con IE10 + windows7 al establecer width 100% en el nav>ul>li , debes definir el ancho de cada celda por porcentages (display:inline-block; width:25%; por ejemplo). Espero que te sirva

    • marvin

      si sirve pero hay q corregir los bordes de alguna manera para que se vean igual en otros navegadores

    • Alex Villarreal

      Oye David tu prodria ayudarme con el menu este que no me sale los estilos de la barra de búsqueda y los iconos estoy diseñado con el dreamweaver css6 y nada mas no sale , falta algun programa o algo que tenga que instalar para poder ver esto?

    • Alex Villarreal

      ya encontré el error , era de sintaxis

  • marvin

    cuando lo pruebo en Internet explore no me sale, mira la imagen al parecer es por es estilo es incompatible con el navegador

    • Que extraño, a mi me funciona perfecto en Internet Explorer.

  • Sergio Ramos

    mmm esta bien todo pero esa barra de busquedas hace busquedas en verddad ? e estado buscando en todo internet como hacer una barra de busquedas que las aga pero que no sea usando google sino que aga busquedas en mi web asi como la que tienes tu, si me puedes ayudar te lo agradeceria enserio

    • La barra de búsquedas de mi sitio web no la he programado yo, es parte de lo que puedes agregar con WordPress

      • Alex Villarreal

        ya encontre el error Carlos era de sintaxis

  • Smerlyn Dävid Gälvän

    Quiero los códigos porfavor?

  • Jhonattan Pulido

    POR FAVOR!!! Como hago funcional la barra de busqueda para mi página web???

    • php_2.0

      Hola, eso se hace con PHP, puedes buscar algunos trucos en google…

  • jose

    ami no me sale la casa y el logo de busqueda y estan igual que el demo todo esta igual

    • osma

      Los iconos no siempre tienen el mismo nombre cuando se bajan desde IcoMoon por ejemplo en mi caso no funcionaba porque el icono de house no se llamaba house se llama home y el de search no se llama search se llama magnificying-glass.

  • Alex Villarreal

    Oye bro espero que estes bien, tengo una duda es que cuando puse la barra de busqueda no se acomodaron los efectos de border radious para redondear y luego le puse un width de 80 % porque no tengo tantos botones como los de apple, para ponerla al lado derecho el problema es que los cambios de sombra y borders y eso no afectan a la barra de busqueda y bueno pues puse la relación del java script. tambien el color como que no agarra al momento de pasarle el raton como que el hover no esta bien pero tengo el código igual que tu, es necesario bajar algo de java?

    Tengo el note pad ++ sera por eso? ahorita voy a intentar ponerla en el dreamweaver haber que pasa

  • Bianca Del Solar Medrano

    hola no me aparecen los iconos en la pagina , me aparecieron al priincipio pero después dejaron de aparecer

    • Bianca Del Solar Medrano

      yo trabajo con safari

  • Jorge

    Hola Amigo soy programador me gusta mucho estos vídeos, Me intereso mucho este tutorial y me preguntaba si tal vez podría usar este menú para un proyecto web.

    • Claro que si, eres libre de hacerlo

      • Len Rojas Matterano

        Hola , Falcon, no hay problema si uso este codigo para mi pagina web? o tiene derechos de autor o algo asi ? me gustaria usarlo solo que no se si sea correcto usar tu codigo saludos

  • Emmanuel López

    Hola, excelente tutorial amigo, tengo una pregunta, se puede adaptar un submenu que se vea igual de bien, lo trate de hacer pero el resultado no lo que esperaba :S.

    • Alberto Guzman

      amigo, será que todavía tienes el código con los submenus, me urge, te lo agradecería mucho si pudieras apoyarme, es para un proyecto escolar y no me salen los submenus para esta barra de navegacion.

  • Jose Gregorio Diaz

    buenas tarde…amigo como hago para poder usar ese mismo menú en mi blogger

  • jorge

    hola amigo como esta me gusta tu tutorial me encanto pero te escrivo para decirte como puedo aser para convertir el menu de apple desplegable que uno pase la flecha por ensima de una letra y salgan mas debajo te pido ese gran favor

  • Alberto Guzman

    Hola amigo que tal? oye tengo una duda, para un proyecto escolar utilize la fantastica barra de navegacion de apple que nos mostraste (muy buen aporte) pero quize poner submenus en algunas categorias y no me jala. te agradeceria mucho tu ayuda, urge, a ver si me pudieras aportar con el codigo porfa. :$ de antemano gracias FalconMasters.

  • José Daniel Pérez Ochoa

    amigo buenas noches excelente tu menu una consulta al colocar estilos de boostrap.min.css el menu me cambia el ancho de cada celda como podria hacer ya que otras partes las necesito con boostrap

  • Gabriel Alejandro Brito

    ¡La animacion de la barra no funciona!

  • Len Rojas Matterano

    Hola Falcon , como estas, podrías decirme si es normal que la opción HOVER se vea en color blanco? el tuyo se marca de otro color , creo que no funciona aqui. que podría ser . observa la imagen ? como lo soluciono ? uso Sublime Text . gracias saludos https://uploads.disquscdn.com/images/c087ebb820d0fd3c7e43e95c743487b50b6e10abe63060d0de71f12654b3eaa6.png

  • Len Rojas Matterano

    Hola Falcon , puedo usar este menu (codigo ) para mi pagina web ? o hay algun problema con copyright ?

    saludos

  • Francisco Martinez

    Buenas Falcon: e utilizado el menu de apple para mi pagina web pero solo me sucede una cosa como puedo hacer la barra para que sea responsive toda la programacion la tengo hecha a base de codigos de otra pagina que tenia que si era responsive de hecho la unica parte que no es responsive es la barra me gustaria saber como puedo realizarla para que sea responsive, puedes alludarme por favor estaria muy agradecido.


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso