Skip to content

Instantly share code, notes, and snippets.

@thulioph

thulioph/A-Pen-by-Thulio-Philipe.markdown

Created September 2, 2013 20:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thulioph/6417131 to your computer and use it in GitHub Desktop.
Save thulioph/6417131 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Thulio Philipe.
Raw
index.html
<section class="boxLastNoticias"> <!--inicio boxLastNoticias-->
<div id="contentBoxLasNoticias"> <!--inicio contentBoxLasNoticias-->
<h2 class="tituloUltimasNoticias">últimas notícias</h2>
<div id="tabLastNoticias" class="tabsLasNoticias"> <!--inicio tabLastNoticias-->
<ul>
<li>
<a href="http://www.google.com.br">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
</ul>
</div> <!--fim tabLastNoticias-->
<div id="tabMaisComentadas" class="tabsLasNoticias"> <!--inicio tabMaisComentadas-->
<ul>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
</ul>
</div> <!--fim tabMaisComentadas-->
<div id="tabsTags" class="tabsLasNoticias"> <!--inicio tabsTags-->
<ul>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
</ul>
</div> <!--fim tabsTags-->
<div id="tabsListadas" class="tabsLasNoticias"> <!--inicio tabsListadas-->
<ul>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="dataBoxLastNoticias">20/02/2013 - 13h48 -</span>
<span class="nomeBoxLastNoticias">debate</span>
<span class="prevBoxLastNoticias">“A Situação dos Municípios”</span>
</a>
</li>
</ul>
</div> <!--fim tabsListadas-->
<div id="tabsBoxLasNoticias">
<ul>
<li><a href="#tabLastNoticias">+ Últimas Notícias</a></li>
<li><a href="#tabMaisComentadas">+ Comentadas</a></li>
<li><a href="#tabsTags">Tags</a></li>
<li><a href="#tabsListadas">+ Listadas</a></li>
</ul>
</div>
</div> <!--fim contentBoxLasNoticias-->
</section> <!--fim boxLastNoticias-->
Raw
script.js
$(document).ready(function(){
$('#contentBoxLasNoticias .tabsLasNoticias').hide(); // esconde todas as divs com a classe (.tabsLasNoticias)
$('#contentBoxLasNoticias #tabLastNoticias').show(); // mostra só a div com o id (#tabsLasNoticias)
$('#tabsBoxLasNoticias ul li:first').addClass('active'); // adiciona a classe (.active) na primeira li da lista com o id (#tabsBoxLasNoticias)
$('#tabsBoxLasNoticias ul li a').click(function(){ // atribui as seguintes funções quando clicar o (a) da lista com o id (#contentBoxLasNoticias)
$('#tabsBoxLasNoticias ul li').removeClass('active'); // Remove active class from all links
$(this).parent().addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#contentBoxLasNoticias .tabsLasNoticias').hide(); // Hide all divs
$(currentTab).fadeIn('slow'); // Show div with id equal to variable currentTab
return false;
});
});
Raw
style.css
body{
font-size:10px;
}
#tabsBoxLasNoticias ul li{
background-color: #9d9d9d;
float: left;
border-right: 2px solid #5e5e5e;
z-index: 999;
}
#tabsBoxLasNoticias ul li:last-child{
border-right: none;
}
#tabsBoxLasNoticias ul li a {
display: block;
color: #5E5E5E;
text-decoration: none;
font-family: sourceitalic;
font-size: 1.7em;
padding: 15px 20px 10px 18px;
margin-top: -5px;
}
#tabsBoxLasNoticias ul li.active a {
color: #FFFFFF;
background: url(../img/active.png) no-repeat left top;
}
#tabLastNoticias,
#tabMaisComentadas,
#tabsTags,
#tabsListadas {
width: 490px;
height: 255px;
margin-bottom: 10px;
}
#tabLastNoticias ul li,
#tabMaisComentadas ul li,
#tabsTags ul li,
#tabsListadas ul li {
width: 470px;
margin-left: 10px;
padding-bottom: 15px;
border-top: 1px solid #7B7B7B;
/*background-color: red;*/
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#tabLastNoticias ul li:hover,
#tabMaisComentadas ul li:hover,
#tabsTags ul li:hover,
#tabsListadas ul li:hover{
background-color: #cc0033;
}
#tabLastNoticias ul li:hover .dataBoxLastNoticias,
#tabMaisComentadas ul li:hover .dataBoxLastNoticias,
#tabsListadas ul li:hover .dataBoxLastNoticias,
#tabsTags ul li:hover .dataBoxLastNoticias,
#tabLastNoticias ul li:hover .nomeBoxLastNoticias,
#tabMaisComentadas ul li:hover .nomeBoxLastNoticias,
#tabsTags ul li:hover .nomeBoxLastNoticias,
#tabsListadas ul li:hover .nomeBoxLastNoticias,
#tabMaisComentadas ul li:hover .prevBoxLastNoticias,
#tabLastNoticias ul li:hover .prevBoxLastNoticias,
#tabsTags ul li:hover .prevBoxLastNoticias,
#tabsListadas ul li:hover .prevBoxLastNoticias{
color: #ffffff;
}
#tabLastNoticias ul li:first-child,
#tabMaisComentadas ul li:first-child,
#tabsTags ul li:first-child,
#tabsListadas ul li:first-child {
border-top: none;
}
.dataBoxLastNoticias {
font-family: semiboldit;
color: #000;
font-size: 1.4em;
width: 125px;
display: inline-block;
padding-top: 5px;
}
.nomeBoxLastNoticias{
text-transform: uppercase;
font-size: 1.4em;
color: #5a5a5a;
font-family: semiboldit;
display: inline-block;
width: 150px;
}
.prevBoxLastNoticias {
font-family: semiboldit;
color: #3C3C3C;
font-size: 1.6em;
padding: 10px 5px 0 0;
display: inline-block;
}
.tabsLasNoticias a{
text-decoration: none;
color: none;
display: block;
margin-left: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment