Enjoy the html: Tutorial

Boa noite!

Como o tempo passa rápido, num piscar de olhos já é essa hora! Bom, vim trazer um tutorial de um menu muito simples e organizado que eu simplesmente recomendo.

Enfim, ele pode ser usado em elite de afiliados, como menu... Onde você quiser! Ele é basicamente uma escrita com fundo e quando você clica aparece o resto, mas chega de falar e clique em leia mais!

Vejam um exemplo em que o menu é utilizado no tumblr Gold HTML:

O menu é mais simples do que pensam! É só colar o código abaixo onde quiser que apareça o menu!

<script src="//archive.org/includes/analytics.js?v=cf34f82" type="text/javascript"></script>
<script type="text/javascript">window.addEventListener('DOMContentLoaded',function(){var v=archive_analytics.values;v.service='wb';v.server_name='wwwb-app219.us.archive.org';v.server_ms=297;archive_analytics.send_pageview({});});</script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=t1Bf4PY_" charset="utf-8"></script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script>
<script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script>
<script type="text/javascript">
__wm.init("https://web.archive.org/web");
__wm.wombat("http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt","20150628222504","https://web.archive.org/","web","https://web-static.archive.org/_static/",
"1435530304");
</script>
<link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=S1zqJCYt" />
<link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=qtvMKcIJ" />


<script>__wm.rw(0);</script>
<div id="wm-ipp-base" lang="en" style="display:none;direction:ltr;">
<div id="wm-ipp" style="position:fixed;left:0;top:0;right:0;">
<div id="donato" style="position:relative;width:100%;">
<div id="donato-base">
<iframe id="donato-if" src="https://archive.org/includes/donate.php?as_page=1&platform=wb&referer=https%3A//web.archive.org/web/20150628222504/http%3A//static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt"
scrolling="no" frameborder="0" style="width:100%; height:100%">
</iframe>
</div>
</div><div id="wm-ipp-inside">
<div id="wm-toolbar" style="position:relative;display:flex;flex-flow:row nowrap;justify-content:space-between;">
<div id="wm-logo" style="/*width:110px;*/padding-top:12px;">
<a href="/web/" title="Wayback Machine home page"><img src="https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-200.png" srcset="https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-100.png, https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-150.png 1.5x, https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-200.png 2x" alt="Wayback Machine" style="width:100px" border="0" /></a>
</div>
<div class="c" style="display:flex;flex-flow:column nowrap;justify-content:space-between;flex:1;">
<form class="u" style="display:flex;flex-direction:row;flex-wrap:nowrap;" target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt" onfocus="this.focus();this.select();" style="flex:1;"/><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20150628222504" /><input type="submit" value="Go" />
</form>
<div style="display:flex;flex-flow:row nowrap;align-items:flex-end;">
<div class="s" id="wm-nav-captures" style="flex:1;">
<a class="t" href="/web/20150628222504*/http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt" title="See a list of every capture for this URL">1 capture</a>
<div class="r" title="Timespan for captures of this URL">28 Jun 2015</div>
</div>
<div class="k">
<a href="" id="wm-graph-anchor">
<div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
<canvas id="wm-sparkline-canvas" width="725" height="27" border="0"></canvas>
</div>
</a>
</div>
</div>
</div>
<div class="n">
<table>
<tbody>

<tr class="m">
<td class="b" nowrap="nowrap">May</td>
<td class="c" id="displayMonthEl" title="You are here: 22:25:04 Jun 28, 2015">JUN</td>
<td class="f" nowrap="nowrap">Jul</td>
</tr>

<tr class="d">
<td class="b" nowrap="nowrap"><img src="https://web-static.archive.org/_static/images/toolbar/wm_tb_prv_off.png" alt="Previous capture" width="14" height="16" border="0" /></td>
<td class="c" id="displayDayEl" style="width:34px;font-size:22px;white-space:nowrap;" title="You are here: 22:25:04 Jun 28, 2015">28</td>
<td class="f" nowrap="nowrap"><img src="https://web-static.archive.org/_static/images/toolbar/wm_tb_nxt_off.png" alt="Next capture" width="14" height="16" border="0" /></td>
</tr>

<tr class="y">
<td class="b" nowrap="nowrap">2014</td>
<td class="c" id="displayYearEl" title="You are here: 22:25:04 Jun 28, 2015">2015</td>
<td class="f" nowrap="nowrap">2016</td>
</tr>
</tbody>
</table>
</div>
<div class="r" style="display:flex;flex-flow:column nowrap;align-items:flex-end;justify-content:space-between;">
<div id="wm-btns" style="text-align:right;height:23px;">
<span class="xxs">
<div id="wm-save-snapshot-success">success</div>
<div id="wm-save-snapshot-fail">fail</div>
<a id="wm-save-snapshot-open" href="#" title="Share via My Web Archive" >
<span class="iconochive-web"></span>
</a>
<a href="https://archive.org/account/login.php" title="Sign In" id="wm-sign-in">
<span class="iconochive-person"></span>
</a>
<span id="wm-save-snapshot-in-progress" class="iconochive-web"></span>
</span>
<a class="xxs" href="http://faq.web.archive.org/" title="Get some help using the Wayback Machine" style="top:-6px;"><span class="iconochive-question" style="color:rgb(87,186,244);font-size:160%;"></span></a>
<a id="wm-tb-close" href="#close" style="top:-2px;" title="Close the toolbar"><span class="iconochive-remove-circle" style="color:#888888;font-size:240%;"></span></a>
</div>
<div id="wm-share" class="xxs">
<a href="/web/20150628222504/http://web.archive.org/screenshot/http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt"
id="wm-screenshot"
title="screenshot">
<span class="wm-icon-screen-shot"></span>
</a>
<a href="#" id="wm-video" title="video">
<span class="iconochive-movies"></span>
</a>
<a id="wm-share-facebook" href="#" data-url="https://web.archive.org/web/20150628222504/http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt" title="Share on Facebook" style="margin-right:5px;" target="_blank"><span class="iconochive-facebook" style="color:#3b5998;font-size:160%;"></span></a>
<a id="wm-share-twitter" href="#" data-url="https://web.archive.org/web/20150628222504/http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt" title="Share on Twitter" style="margin-right:5px;" target="_blank"><span class="iconochive-twitter" style="color:#1dcaff;font-size:160%;"></span></a>
</div>
<div style="padding-right:2px;text-align:right;white-space:nowrap;">
<a id="wm-expand" class="wm-btn wm-closed" href="#expand" onclick="__wm.ex(event);return false;"><span id="wm-expand-icon" class="iconochive-down-solid"></span> <span class="xxs" style="font-size:80%;">About this capture</span></a>
</div>
</div>
</div>
<div id="wm-capinfo" style="border-top:1px solid #777;display:none; overflow: hidden">
<div id="wm-capinfo-notice" source="api"></div>
<div id="wm-capinfo-collected-by">
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center">COLLECTED BY</div>
<div style="padding:3px;position:relative" id="wm-collected-by-content">
<div style="display:inline-block;vertical-align:top;width:50%;">
<span class="c-logo" style="background-image:url(https://archive.org/services/img/webwidecrawl);"></span>
Organization: <a style="color:#33f;" href="https://archive.org/details/webwidecrawl" target="_new"><span class="wm-title">Internet Archive</span></a>
<div style="max-height:75px;overflow:hidden;position:relative;">
<div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
The Internet Archive discovers and captures web pages through many different web crawls.

At any given time several distinct crawls are running, some for months, and some every day or longer.

View the web archive through the <a href="http://archive.org/web/web.php">Wayback Machine</a>.
</div>
</div>
<div style="display:inline-block;vertical-align:top;width:49%;">
<span class="c-logo" style="background-image:url(https://archive.org/services/img/wide00012)"></span>
<div>Collection: <a style="color:#33f;" href="https://archive.org/details/wide00012" target="_new"><span class="wm-title">Wide Crawl Number 12 - started March, 14th 2015</span></a></div>
<div style="max-height:75px;overflow:hidden;position:relative;">
<div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
Web wide crawl with initial seedlist and crawler configuration from January 2015.
</div>
</div>
</div>
</div>
<div id="wm-capinfo-timestamps">
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center" title="Timestamps for the elements of this page">TIMESTAMPS</div>
<div>
<div id="wm-capresources" style="margin:0 5px 5px 5px;max-height:250px;overflow-y:scroll !important"></div>
<div id="wm-capresources-loading" style="text-align:left;margin:0 20px 5px 5px;display:none"><img src="https://web-static.archive.org/_static/images/loading.gif" alt="loading" /></div>
</div>
</div>
</div></div></div></div><div id="wm-ipp-print">The Wayback Machine - https://web.archive.org/web/20150628222504/http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt</div>
<script type="text/javascript">//<![CDATA[
__wm.bt(725,27,25,2,"web","http://static.tumblr.com/stnnkm0/Rt7lz98m5/drop_down.txt","20150628222504",1996,"https://web-static.archive.org/_static/",["https://web-static.archive.org/_static/css/banner-styles.css?v=S1zqJCYt","https://web-static.archive.org/_static/css/iconochive.css?v=qtvMKcIJ"], false);
__wm.rw(1);
//]]></script>

<form>
<select name="links" onchange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value">
<option selected>MENU</option>
<option value="www.link.tumblr.com" style="COLOR: #666666; BACKGROUND-COLOR: #FFF0F5">Nome do LINK</option>
<option value="www.link.tumblr.com" style="COLOR: #666666; BACKGROUND-COLOR: #FFFFFF">Nome do LINK</option>>
<option value="www.link.tumblr.com" style="COLOR: #666666; BACKGROUND-COLOR: #FFF0F5">Nome do LINK</option>
<option value="www.link.tumblr.com" style="COLOR: #666666; BACKGROUND-COLOR: #FFFFFF">Nome do LINK</option>>
<option value="www.link.tumblr.com" style="COLOR: #666666; BACKGROUND-COLOR: #FFF0F5">Nome do LINK</option>
</select>
</form>

Explicação:

Explicação Menu DropDown - Enjoy the html

<option selected>MENU</option> - Aqui mostra o que fica no titulo do menu, antes de você clicar

Em www.link.tumblr.com é o link de aonde irá quando você clicar no texto. Color é a cor da fonte, background-color a cor de fundo, e nome do link já diz!

</select>

</form>

Créditos ao mundohtml.tumblr. Espero que tenham gostado! Dúvidas, comente.

Tutorial - Menu DropDown

Nenhum comentário:

Postar um comentário