Tutorial Menú CSS para WordPress estilo Apple – Square Submenu

En este tutorial voy a explicar como crear un submenú de WordPress al estilo Apple, no es que sea un copy/paste, pero está inspirado en su estilo.

Quiero hacer hincapié en que está pensado para ser utilizado como submenú, aunque editándolo un poco lo podéis sacar para el menú principal si queréis.

 

Imagen del Square Submenu

Antes de empezar voy a mostraros una imagen de como es el menú, el cual he bautizado como “Square Submenu“.

submenu css estilo apple para wordpress
Este menú está pensado y desarrollado para ser utilizado como menú auxiliar, o submenú. Por ejemplo si en vuestro WordPress creáis una página que se llame Tutoriales, y necesitáis un submenú en el que salga: PHP, CSS, WordPress, etc…

La Plantilla

El submenú se ha utilizado para una página de WordPress que necesita dividirse en otras 4 subpáginas más específicas. Por lo que para poder añadirlo solamente a las páginas que yo quiera he creado una plantilla (template).

Desde la gestión de menús de WordPress se ha creado un menú que se llama “square-submenu”. Después, para que aparezca en la plantilla, hay que añadir el siguiente código en ella.

 

 

El código CSS

Y ahora al quid de la cuestión, el código css del square submenu.

 

El código HTML

Una vez procesado por WordPress, así es como queda el resultado final en código.

 

Espero que os sean útiles este tipo de tutoriales, a partir de ahora voy a ir publicando en el blog los menús que vaya desarrollando tanto para WordPress como para cualquier otra página web.
Si os ha gustado esta entrada por favor seguidme en las redes sociales y compartid este enlace. Gracias!

Un pensamiento sobre “Tutorial Menú CSS para WordPress estilo Apple – Square Submenu”

  1. Dude que onda con tu. “Necesitas un explorador moderno” : !

    Jaja eh!
    me gustaría probar un día el menú se ve bueno. El que tienes de cabecera me agrada.

    En fin solo pasaba por acá buscando algo de la vieja escuela para solo ponerle un poco de de algo a un div sin css

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">