Menú Horizontal para blogger

Comparteme :

Menú desplegable fijo de varios niveles en 3D

Para ver este magnífico menús, especialmente creado una más del blog de demostración, donde se puede ir directamente:

Demostración

Para configurar este menú para blog de Blogger, necesitamos un par de pasos. Busque la línea siguiente en la plantilla ]]></b:skin> y justo por encima de agregar el código de estilo CSS para nuestro menú flip 3D:

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5wlt7bS5I47Ql0gbAf3-RTRsprxMzTKMXQSTgNRrSU8lfGJTGggMgXE2bhjGUGSpmOh-sTuN4wrB_Pkt9S3AxKIM_RhgPRO6DM6XCW9vB80n4G_DKJbo6QdFjtfzLq4QW3pzf8QXAiY/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:#09c; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5wlt7bS5I47Ql0gbAf3-RTRsprxMzTKMXQSTgNRrSU8lfGJTGggMgXE2bhjGUGSpmOh-sTuN4wrB_Pkt9S3AxKIM_RhgPRO6DM6XCW9vB80n4G_DKJbo6QdFjtfzLq4QW3pzf8QXAiY/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

Guardar la plantilla. A continuación, tenemos que encontrar la etiqueta </head> y <body>
y debajo de ella añadir código HTML:

<div id='menufixed'>
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='#'><b>Home</b></a></li>
<li><a class='top-a' href='#'><b>Menu 1</b></a>
<div class='col3'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
<ul class='col'>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 10</a></li>
<li><a href='#'>Sub Menu 11</a></li>
<li><a href='#'>Sub Menu 12</a></li>
<li><a href='#'>Sub Menu 13</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 2</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 3</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 4</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 5</a></li>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 5</b></a></li>
</ul>
</div>
</div>

Como se puede ver, los enlaces en el menú, se puede meter mucho. Utilizar. Importante ! Código fijo ahora funcionará en absoluto. Al final del post el menú de configuración de vídeo del blog.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Menú Horizontal para blogger.

Comparte

BLOGUERO TUTORIAL