Menu Con Javascript

No Creas que me olvide del post de hoy!

el dia de hoy te traigo este menu javascript en el cual no tedras que estar esperando tanto que cargue la pagina tanto sino inmediatamente te llevara a la pagina.

bueno es simple el codigo solo buscar ciertas palabras en el codigo las cambias y listo como aparece en el ejemplo que les mostrare al final de la entrada.

es siquiente codigo que deveras pegar en un elemento

HTML/JAVASCRIPT

solo editas unas palabras y titulos y listo.

CODIGO:

<ul class="tabs">
<li class="active" style=""><a href="#tab1">facebook</a></li>
<li><a href="#tab2">videos</a></li>
<li><a href="#tab3">twitter</a></li>
</ul>
<div id="content-wrapper">
 <div id="crosscol-wrapper" style="text-align:center">
 <div class="crosscol section" id="crosscol">
</div>
</div>
<div class="tab_container">
 <div class="tab_content" id="tab1" style="display: block;">
 <div id="andblogoContenido">
 <div class="main section" id="main">
<div class="widget Blog" id="Blog1">
 <div class="blog-posts hfeed">
           <div class="date-outer">
                 <div class="date-posts">
        <div class="post-outer">
 <div class="post hentry">
 <a name="3196185773161135602"></a> <h3 class="post-title entry-title">
 </h3>
<div class="post-header">
 <div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content">
 aquie va el contenido! <div style="clear: both;">
</div>
</div>
<div class="post-footer">
 <div class="post-footer-line post-footer-line-1">
<span class="post-author vcard"> <span class="fn"></span> </span>  <span class="post-comment-link">  </span> <span class="post-icons"> <span class="item-control blog-admin pid-531118868">  </span> </span> </div>
</div>
</div>
<div class="post-footer-line post-footer-line-2">
 </div>
<div class="post-footer-line post-footer-line-3">
<span class="post-location"> </span> </div>
</div>
</div>
</div>
<div class="post-outer">
 <div class="post hentry">
 <a name="1247203486566990351"></a> <h3 class="post-title entry-title">
 </h3>
<div class="post-header">
 <div class="post-header-line-1">
</div>
</div>
<div class="post-footer">
 <div class="post-footer-line post-footer-line-1">
 </div>
</div>
</div>
<div class="post-footer-line post-footer-line-2">
 </div>
<div class="post-footer-line post-footer-line-3">
<span class="post-location"> </span> </div>
</div>
</div>
</div>
</div>
</div>
 </div>
<div class="blog-pager" id="blog-pager">
 <span id="blog-pager-older-link">  </span> </div>
<div class="clear">
</div>
<div class="blog-feeds">
 <div class="feed-links">
<img   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQNclWgiR-UxqKld5opHNiSTHIE2GODDnBYzsdxo1-c2muskozwyEXPkypz6wLpBOYXdKVTCghDBPCwdZVsxpfrNSNj4qXKxtRSA33XHAR7yq_EmssBRwwCnbdAulrdorvUuTo9SQ7H8/

0/blfeedicono.png" style="margin-right: 4px;" /> Suscribirse a: <a class="feed-link" href="http://andblogo.blogspot.com/feeds/posts/default"   target="_blank" type="application/atom+xml">Entradas (Atom)</a> </div>
</div>
</div>
</div>
<div class="tab_content" id="tab2" style="display: none;">
 <div id="blsobremi" style="text-align:center">
 <div class="blsobremi section" id="blsobremi">
<div class="widget HTML" id="HTML1">
 <h2 class="title">
Sobre mi</h2>
<div class="widget-content">
 aqui va acerca de... </div>
<div class="clear">
</div>
<span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit"   href="//www.blogger.com/rearrange?blogID=2870659219499856885&widgetType=HTML&a  mp;widgetId=HTML1&action=editWidget§ionId=blsobremi" onclick="return   _WidgetManager._PopupConfig(document.getElementById("HTML1"));"   target="configHTML1" title="Editar"> <img alt="" height="18"   src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear">
</div>
</div>
</div>
</div>
</div>
<div class="tab_content" id="tab3" style="display: none;">
 <div id="blcontac" style="text-align:center">
 <div class="blcontac section" id="blcontac">
<div class="widget HTML" id="HTML2">
 <h2 class="title">
Siquenos En Twitter</h2>
<div class="widget-content">
 jaja hola! </div>
<div class="clear">
</div>
<span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit"   href="//www.blogger.com/rearrange?blogID=2870659219499856885&widgetType=HTML&a  mp;widgetId=HTML2&action=editWidget§ionId=blcontac" onclick="return   _WidgetManager._PopupConfig(document.getElementById("HTML2"));"   target="configHTML2" title="Editar"> <img alt="" height="18"   src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear">
</div>
</div>
</div>
</div>
</div>
<div id="blcrrd" style="visibility: hidden;">
<a href="http://goo.gl/4xVx"   target="_blank"><img   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhseaUVuEjTXQPLPOlNErmtrALgpUi4votL2WXx3QaAch8jfoA06NLkwFWm-Jn_upZ071C5W0BJqmN3ahrrQNxm7ud1kA5HwVIJfhAcconqAZXbruA1cfb1Oo4BJNT7JCcdOFc-4jEzrYDn/

0/bldds.png" /></a></div>
 <div class="clear">
 </div>
<div class="blmenu section" id="blmenu">
<div class="widget LinkList"   id="LinkList1">
 <div class="widget-content">
 <ul>
<li></li>
<li></li>
<li></li>
</ul>
<div class="clear">
</div>
<span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit"   href="//www.blogger.com/rearrange?blogID=2870659219499856885&widgetType=LinkLi  st&widgetId=LinkList1&action=editWidget§ionId=blmenu"   onclick="return   _WidgetManager._PopupConfig(document.getElementById("LinkList1"));"   target="configLinkList1" title="Editar"> <img alt="" height="18"   src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear">
</div>
</div>
</div>
</div>
<div id="footer-wrapper">
 <div class="footer section" id="footer">
</div>
</div>
<script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); </script> <script type="text/javascript"   src="//www.blogger.com/static/v1/widgets/1384195903-widgets.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"   gapi_processed="true"></script> <script type="text/javascript"> if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {   window['blogger_templates_experiment_id'] =   "templatesV1";window['blogger_blog_id'] =   '2870659219499856885';BLOG_attachCsiOnload('');   }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2870659219499856885',  '//andblogo.blogspot.com/','2870659219499856885'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId':   '2870659219499856885', 'bloggerUrl': 'http://www.blogger.com', 'title':   'Miniblog', 'pageType': 'index', 'url': 'http://andblogo.blogspot.com/',   'canonicalUrl': 'http://andblogo.blogspot.com/', 'canonicalHomepageUrl':   'http://andblogo.blogspot.com/', 'homepageUrl':   'http://andblogo.blogspot.com/', 'blogspotFaviconUrl':   'http://andblogo.blogspot.com/favicon.ico', 'enabledCommentProfileImages': true,   'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber':   '', 'searchLabel': '', 'searchQuery': '', 'pageName': '', 'pageTitle': 'Miniblog',   'encoding': 'UTF-8', 'locale': 'es', 'localeLanguage': 'es', 'isPrivate': false,   'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog':   false, 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42   type\75\42application/atom+xml\42 title\75\42Miniblog - Atom\42   href\75\42http://andblogo.blogspot.com/feeds/posts/default\42 /\76\n\74link   rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Miniblog -   RSS\42 href\75\42http://andblogo.blogspot.com/feeds/posts/default?alt\75rss\42   /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42   title\75\42Miniblog - Atom\42   href\75\42http://www.blogger.com/feeds/2870659219499856885/posts/default\42   /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42   title\75\42RSD\42   href\75\42http://www.blogger.com/rsd.g?blogID\0752870659219499856885\42 /\076',   'meTag': '', 'openIdOpTag': '\74link rel\75\42openid.server\42   href\75\42http://www.blogger.com/openid-server.g\42 /\76\n\74link   rel\75\42openid.delegate\42 href\75\42http://andblogo.blogspot.com/\42 /\76\n',   'imageSrcTag': '', 'latencyHeadScript': '\74script   type\75\42text/javascript\42\76(function() { var   b\75window,e\75\42jstiming\42,g\75\42tick\42;(function(){function   d(a){this.t\75{};this.tick\75function(a,d,c){c\75void 0!\75c?c:(new   Date).getTime();this.t[a]\75[c,d]};this[g](\42start\42,null,a)}var a\75new   d;b.jstiming\75{Timer:d,load:a};if(b.performance\46\46b.performance.timing){var   a\75b.performance.timing,c\75b[e].load,f\75a.navigationStart,a\75a.responseStart;0  \74f\46\46a\76\75f\46\46(c[g](\42_wtsrt\42,void   0,f),c[g](\42wtsrt_\42,\42_wtsrt\42,a),c[g](\42tbsd_\42,\42wtsrt_\42))}try{a\75nul  l,b.chrome\46\46b.chrome.csi\46\46(a\75Math.floor(b.chrome.csi().pageT),c\46\0460\  74f\46\46(c[g](\42_tbnd\42,void   0,b.chrome.csi().startE),\nc[g](\42tbnd_\42,\42_tbnd\42,f))),null\75\75a\46\46b.gt  bExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b  .external.pageT,c\46\0460\74f\46\46(c[g](\42_tbnd\42,void   0,b.external.startE),c[g](\42tbnd_\42,\42_tbnd\42,f))),a\46\46(b[e].pt\75a)}catch(  l){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do   a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[e].load[g](\42a  ft\42)};var h\75!1;function   k(){h||(h\75!0,b[e].load[g](\42firstScrollTime\42))}b.addEventListener?b.addEventL  istener(\42scroll\42,k,!1):b.attachEvent(\42onscroll\42,k);\n   })();\74/script\076', 'mobileHeadScript': '', 'view': '',   'dynamicViewsCommentsSrc':   '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js',   'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/393189cc1460f40b',   'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n'}}, {'name':   'skin', 'data': {'vars': {'postfooterfont': 'normal normal 78% \47Trebuchet MS\47,   Trebuchet, Arial, Verdana, Sans-serif', 'endSide': 'right', 'startSide': 'left',   'descriptionfont': 'normal normal 78% \47Trebuchet MS\47, Trebuchet, Arial,   Verdana, Sans-serif'}, 'override': ''}}, {'name': 'view', 'data': {'classic':   {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard',   'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url':   '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'},   'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name':   'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url':   '/?view\75timeslide'}}}]); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1',   'andblogoCabecera3', null, document.getElementById('Header1'), {},   'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'blcontac',   null, document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1',   'blmenu', null, document.getElementById('LinkList1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'blsobremi',   null, document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar',   null, document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null,   document.getElementById('Blog1'), {'cmtInteractionsEnabled': false,   'lightboxEnabled': true, 'lightboxModuleUrl':   '//www.blogger.com/static/v1/jsbin/3156404218-lbx__es.js', 'lightboxCssUrl':   '//www.blogger.com/static/v1/v-css/228702327-lightbox_bundle.css'},   'displayModeFull')); </script>   <script   src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.es.0lB0pscqNR0.O/m=i  frames_styles_bubble/exm=plusone/rt=j/sv=1/d=1/ed=1/am=UQ/rs=AItRSTOY1QPR7mCNeKMjt  7zTIF4mlXJP2g/cb=gapi.loaded_1" async=""></script><script   src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.es.0lB0pscqNR0.O/m=p  lusone/rt=j/sv=1/d=1/ed=1/am=UQ/rs=AItRSTOY1QPR7mCNeKMjt7zTIF4mlXJP2g/cb=gapi.load  ed_0" async=""></script><script type="text/javascript">(function() { var   b=window,e="jstiming",g="tick";(function(){function   d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new   Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new   d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){var   a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart;0<f&&a>=f  &&(c[g]("_wtsrt",void   0,f),c[g]("wtsrt_","_wtsrt",a),c[g]("tbsd_","wtsrt_"))}try{a=null,b.chrome&&b.chro  me.csi&&(a=Math.floor(b.chrome.csi().pageT),c&&0<f&&(c[g]("_tbnd",void   0,b.chrome.csi().startE), c[g]("tbnd_","_tbnd",f))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==  a&&b.external&&(a=b.external.pageT,c&&0<f&&(c[g]("_tbnd",void   0,b.external.startE),c[g]("tbnd_","_tbnd",f))),a&&(b[e].pt=a)}catch(l){}})();b.tic  kAboveFold=function(d){var a=0;if(d.offsetParent){do   a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[e].load[g]("aft")};var   h=!1;function   k(){h||(h=!0,b[e].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListene  r("scroll",k,!1):b.attachEvent("onscroll",k);  })();</script>   <link href="http://andblogo.blogspot.com/favicon.ico" rel="icon"   type="image/x-icon" /> <link href="http://andblogo.blogspot.com/" rel="canonical" /> <link rel="alternate" type="application/atom+xml" title="Miniblog - Atom"   href="http://andblogo.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Miniblog - RSS"   href="http://andblogo.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Miniblog - Atom"   href="http://www.blogger.com/feeds/2870659219499856885/posts/default" /> <link rel="EditURI" type="application/rsd+xml" title="RSD"   href="http://www.blogger.com/rsd.g?blogID=2870659219499856885" /> <link rel="openid.server" href="http://www.blogger.com/openid-server.g" /> <link rel="openid.delegate" href="http://andblogo.blogspot.com/" />  Miniblog <link type="text/css" rel="stylesheet"   href="//www.blogger.com/static/v1/widgets/2524447400-widget_css_bundle.css" /> <link type="text/css" rel="stylesheet"   href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=2870659219499856885

&zx=a80edfa6-2aaa-410e-b26b-c5d732181a02" /> <style id="page-skin-1" type="text/css"></style> <style>  ul.tabs {     margin: 0;     padding: 0;     float: left;     list-style: none;     height: 32px;     border-bottom: 1px solid #999;     border-left: 1px solid #999;     width: 100%; } ul.tabs li {height: 31px; float: left; margin: 0; padding: 0; line-height: 31px;     border: 1px solid #999; border-left: none; margin-bottom: -1px; overflow:   hidden; position: relative; background: #dddddd;}  ul.tabs li a {font-size:15px;     text-decoration: none;     color: #000;     display: block;     font-size: 1.2em;     padding: 0 20px;     border: 1px solid #fff;     outline: none; } ul.tabs li a:hover {    background: #99CC99; } html ul.tabs li.active, html ul.tabs li.active a:hover {     background: #fff;     border-bottom: 1px solid #fff; }.tab_container {     border: 1px solid #999;     border-top: none;     overflow: hidden;     clear: both;     float: left; width: 100%;     background: #fff; } .tab_content {     padding: 20px;     font-size: 1.2em; }  </style>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"   type="text/javascript"></script> <script src="http://sites.google.com/site/scriptsbalcon/b/blsecciones.txt"   type="text/javascript"></script> <style>*{outline:none}</style> <script type="text/javascript">var   a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",k="?m=1";function   l(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return   d+k;case 2:return 0<=e[1].search(g)?null:d+f;default:return   null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[  b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var   m=l();m&&window.location.replace(m)}; </script><script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script>   <script type="text/javascript"   src="//pagead2.googlesyndication.com/pagead/js/google_top_exp.js"></script><style>  .gc-bubbleDefault{background-color:transparent   !important;text-align:left;padding:0 !important;margin:0 !important;border:0   !important;table-layout:auto !important}.gc-reset{background-color:transparent   !important;border:0 !important;padding:0 !important;margin:0   !important;text-align:left}.pls-bubbleTop{border-bottom:1px solid #ccc   !important}.pls-topTail,.pls-vertShimLeft,.pls-contentLeft{background-image:url(//  ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif)   !important}.pls-topTail{background-repeat:repeat-x   !important;background-position:bottom   !important}.pls-vertShim{background-color:#fff   !important;text-align:right}.pls-vertShimLeft{background-repeat:repeat-y   !important;background-position:right   !important;height:4px}.pls-vertShimRight{height:4px}.pls-confirm-container   .pls-vertShim{background-color:#fff3c2   !important}.pls-contentWrap{background-color:#fff !important;position:relative   !important;vertical-align:top}.pls-contentLeft{background-repeat:repeat-y;backgrou  nd-position:right;vertical-align:top}.pls-dropRight{background-image:url(//ssl.gst  atic.com/s2/oz/images/stars/po/bubblev1/bubbleDropR_3.png)   !important;background-repeat:repeat-y   !important;vertical-align:top}.pls-vert,.pls-tailleft,.pls-dropTR   .pls-dropBR,.pls-dropBL,.pls-vert   img{vertical-align:top}.pls-dropBottom{background-image:url(//ssl.gstatic.com/s2/o  z/images/stars/po/bubblev1/bubbleDropB_3.png)   !important;background-repeat:repeat-x   !important;width:100%;vertical-align:top}.pls-topLeft{background:inherit   !important;text-align:right;vertical-align:bottom}.pls-topRight{background:inherit   !important;text-align:left;vertical-align:bottom}.pls-bottomLeft{background:inheri  t !important;text-align:right}.pls-bottomRight{background:inherit   !important;text-align:left;vertical-align:top}.pls-tailtop,.pls-tailright,.pls-tai  lbottom,.pls-tailleft{display:none;position:relative}.pls-tailbottom,.pls-tailtop,  .pls-tailright,.pls-tailleft,.pls-dropTR,.pls-dropBR,.pls-dropBL{background-image:  url(//ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/bubbleSprite_3.png)   !important;background-repeat:no-repeat}.pls-tailbottom{background-position:-23px   0}.pls-confirm-container .pls-tailbottom{background-position:-23px   -10px}.pls-tailtop{background-position:-19px   -20px}.pls-tailright{background-position:0   0}.pls-tailleft{background-position:-10px   0}.pls-tailtop{vertical-align:top}.gc-bubbleDefault   td{line-height:0;font-size:0}.pls-topLeft img,.pls-topRight   img,.pls-tailbottom{vertical-align:bottom}.pls-bottomLeft   img,.bubbleDropTR,.pls-dropBottomL img,.pls-dropBottom img,.pls-dropBottomR   img,.pls-bottomLeft{vertical-align:top}.pls-dropTR{background-position:0   -22px}.pls-dropBR{background-position:0 -27px}.pls-dropBL{background-position:0   -16px}.pls-spacertop,.pls-spacerright,.pls-spacerbottom,.pls-spacerleft{position:s  tatic   !important}.pls-spinner{bottom:0;position:absolute;left:0;margin:auto;right:0;top:  0}  </style>

Fotografias del menu.

ESCRITO POR: Andy Gomez

enlaces: El Balcòn

Comparte este articulo con tus amigos en las redes sociales y Vota por el articulo en Bitacoras.com

20 abril 2013

Menu Con Javascript

No hay comentarios :

Publicar un comentario

Gracias

Categorias

Facebook Fans

Agregame en Google+

Seguidores

Estadisticas Usuarios

Enlaces

Contador De Sequidores