En el día de hoy veremos como agregar un genial menú desplegable el cual ha sido hecho con CSS3 por scrips-tutorials, al cual le he hecho unas pequeñas modificaciones para adaptarlo a Blogger.
El menú es muy ligero por lo que no ralentizara la carga de tu blog.
Para agregar el menú a tu blog debes ir a Plantilla, Editar HTML y estando en el editor de la plantilla oprime las teclas Ctrl + F (te aparecerá el buscador de códigos) y pega allí la etiqueta </header> y cuando la encuentres pega debajo de ella lo siguiente:
<div id='contact-links'>
<div id='my-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='URL FACEBOOK'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBW1r0qK5oGHOhcaCrwKjgLuedpUIBBmkeoWLXZaqlCImPMDybzO0OZE0ZM3uEM_K_NkQC1HrlB_MBW0tyvU0AKKfZk2_aM1-J6IDeSI5NwtNgKTox1KdU4zOmvOTCzMapfRi1XRL_8pAJ/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='URL TWITTER'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpEQDuf7Dqj2LxSJdxdisR8n_tA5V1hiajSb9QJ0i7FIy34cujg8h7XX2JZk8qjlxk53bxk5cl57EJFTynnP1bezYuv_beqnbIlgJRyUfy0Kp58b3OL73cx_1mzk_6tHHuY7m2Fxe6DuE/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='URL GOOGLE+'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRQOP492zbR-EhnMgEYcQsckf2DmsCGGdaTJWzzUHpuCjmHwH7pwIyDiXGPuDd04LzoGWohracjqvt-yIONYNyTbud1PmLHES0FJMA085pqi31CvGStlNw8jRPqQSTn_pf23W0KyTYZ54b/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='URL RSS'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbki23FU2U5OBzVi5IO9pqChbL7tYUyyCKheCg9-Ppqhpxegfd-uotQZ-NexJoZhk8_QXiKmn6NvBPa85xGoQSLaHmnIL8YYw720F9tiZCiNZ7qEj2ezUZeLgCkOgmLfBrIPiMnz5tjvz/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menú elemento 1</a></li> <li><a href='#'>Menú elemento 2</a></li> <li><a href='#'>Menú elemento 3</a></li> <li><a href='#'>Menú elemento 4</a></li> <li><a href='#'>Menú elemento 5</a></li> </ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menú elemento 1</a></li> <li><a href='#'>Menú elemento 2</a></li> <li><a href='#'>Menú elemento 3</a></li> <li><a href='#'>Menú elemento 4</a></li> <li><a href='#'>Menú elemento 5</a></li> </ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menú elemento 1</a></li> <li><a href='#'>Menú elemento 2</a></li> <li><a href='#'>Menú elemento 3</a></li> <li><a href='#'>Menú elemento 4</a></li> <li><a href='#'>Menú elemento 5</a></li> </ul>
</li>
<li><a href='#'> Menú</a></li> <li><a href='#'>Menú</a></li> <li><a href='#'>Dropdown</a> <ul>
<li><a href='#'>Menú elemento 1</a></li> <li><a href='#'>Menú elemento 2</a></li> <li><a href='#'>Menú elemento 3</a></li> <li><a href='#'>Menú elemento 4</a></li> <li><a href='#'>Menú elemento 5</a></li> </ul>
</li>
</ul>
</nav>
<!-- menu-search form -->
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>
Lo resaltado en color azul corresponde a los iconos sociales que van en la parte superior, lo resaltado en color verde corresponde a la estructura del menú propiamente dicho y los símbolos # reemplazalos por las URL que quieres que vayan en el menú.
Ahora ve antes de ]]></b:skin> pega el siguiente código CSS:
#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: left;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: right;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSS0p8MDbRnS9BT5BBD9_SknAQFpWg2R8NvnRlAj0ASSMQiSEqEnim2oTRUvLSWg991zLP75FswPGQIZYupJ7YFJVYufKZKUUvj7dwCurzIRU5Gc3jquOmMTnz3dnwupH7b4amMxNia4iJ/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #F9F9F9;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4;
}
Ahora solo debes guardar los cambios y empezar a disfrutar de este genial menú.
Si quieres seguir encontrando los mejores recursos para tu blog vuelve y visitanos otra vez.
Comparte este artículo ↓
0 Komentar untuk "Menú desplegable hecho con CSS3 para Blogger"