Nunosean - Menus

StyleShop Theme Preview

Menus

Menu Horizontal Top

<script type="text/javascript" src="https://sites.google.com/site/nunoseann/Nunosean1%281%29.js"></script><script type="text/javascript">             $(function() {                 var d=300;                 $('#navigation a').each(function(){                     $(this).stop().animate({                         'marginTop':'-80px'                     },d+=150);                 });                  $('#navigation > li').hover(                 function () {                     $('a',$(this)).stop().animate({                         'marginTop':'-2px'                     },200);                 },                 function () {                     $('a',$(this)).stop().animate({                         'marginTop':'-80px'                     },200);                 }             );             });         </script> <ul id="navigation">     <li class="h"><a href="" _fcksavedurl=""><span>Nunosean</span></a></li>     <li class="a"><a href="" _fcksavedurl=""><span>Nunosean</span></a></li>     <li class="s"><a href="" _fcksavedurl=""><span>Nunosean</span></a></li>     <li class="p"><a href="" _fcksavedurl=""><span>Nunosean</span></a></li>     <li class="r"><a href="" _fcksavedurl=""><span>Nunosean</span></a></li>     <li class="c"><a href="" _fcksavedurl=""><span>Nunosean</span></a></li> </ul> <style type="text/css"> ul#navigation {     position: fixed;     margin: 0px;     padding: 0px;     top: 0px;      list-style: none;     z-index:999999;     width:721px; } ul#navigation li {     width: 103px;     display:inline;     float:left;     } ul#navigation li a {     display: block;     float:left;     margin-top: -2px;     width: 100px;     height: 25px;     background-color:#E7F2F9;     background-repeat:no-repeat;     background-position:50% 10px;     border:1px solid #BDDCEF;     -moz-border-radius:0px 0px 10px 10px;     -webkit-border-bottom-right-radius: 10px;     -webkit-border-bottom-left-radius: 10px;     -khtml-border-bottom-right-radius: 10px;     -khtml-border-bottom-left-radius: 10px;     text-decoration:none;     text-align:center;     padding-top:80px;     opacity: 0.7;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);   } ul#navigation li a:hover{      background-color:#CAE3F2; } ul#navigation li a span{     letter-spacing:2px;     font-size:11px;     color:#60ACD8;     text-shadow: 0 -1px 1px #fff;       } ul#navigation .h a{     background-image: url(http://www.imagengratis.org/images/homezs7iz.png); } ul#navigation .a a      {     background-image: url(http://www.imagengratis.org/images/cardsx9cs.png); } ul#navigation .s a      {     background-image: url(http://www.imagengratis.org/images/searchbe6lb.png); }  ul#navigation .r a   {     background-image: url(http://www.imagengratis.org/images/rssme4tm.png); } ul#navigation .p a     {     background-image: url(http://www.imagengratis.org/images/carduz2ru.png); } ul#navigation .c a    {     background-image: url(http://www.imagengratis.org/images/maiil.png); }  </style>

Menu Hrizontal Colores

<script src="https://sites.google.com/site/nunoseann/Nunosean2.js" type="text/javascript"></script><script src="https://sites.google.com/site/nunoseann/Nunoseann2.js" type="text/javascript"></script><script src="https://sites.google.com/site/nunoseann/Nunosean3.js" type="text/javascript"></script> <ul>     <li class="green">     <p><a href="#" _fcksavedurl="#">Nunosean</a></p>     <p class="subtext">Descripción</p>     </li>     <li class="yellow">     <p><a href="#" _fcksavedurl="#">Nunosean</a></p>     <p class="subtext">Descripción</p>     </li>     <li class="red">     <p><a href="#" _fcksavedurl="#">Nunosean</a></p>     <p class="subtext">Descripción</p>     </li>     <li class="blue">     <p><a href="#" _fcksavedurl="#">Nunosean</a></p>     <p class="subtext">Descripción</p>     </li>     <li class="purple">     <p><a href="#" _fcksavedurl="#">Nunosean</a></p>     <p class="subtext">Descripción</p>     </li> </ul> <style type="text/css"> ul{ 	margin:0; 	padding:0; }  li{ 	width:100px; 	height:50px; 	float:left; 	color:#191919; 	text-align:center; 	overflow:hidden; }  a{ 	color:#FFF; 	text-decoration:none; }  p{ 	padding:0px 5px; }  	.subtext{ 		padding-top:15px; 	}   .green{background:#6AA63B url("http://www.imagengratis.org/images/verdeuc2vu.jpg") top left no-repeat;} .yellow{background:#FBC700 url("http://www.imagengratis.org/images/amarilloic5pi.jpg") top left no-repeat;} .red{background:#D52100 url("http://www.imagengratis.org/images/rojokm6sk.jpg") top left no-repeat;} .purple{background:#5122B4 url("http://www.imagengratis.org/images/violetaws6fw.jpg") top left no-repeat;} .blue{background:#0292C0 url("http://www.imagengratis.org/images/azulsp1is.jpg") top left no-repeat;}     <style type="text/css"> </style>

Like This Theme?

StyleShop

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?

Registrarse gratis