3
I need to implement that R7 portal bar at the top of a website, does anyone know any way to do that? It’s got to make this bar adaptable to any screen size?
That’s the bar:
2 answers
6
Basically, like this:
<html>
<div style=" position:fixed;top:0;left:0;width:100%;">
<script type="text/javascript" src="http://barra.r7.com/bariso.js"></script>
</div>
</html>
I’m not sure if it’s adaptable to any screen, but for the resolutions I tested, including a smartphone, it worked as expected.
1
Follow a template, if you want to modify (remove/add) something in the bar.
HTML
<link rel="stylesheet" type="text/css" href="https://cadastro.r7.com/css/reset.css">
<div class="r7-main-navigation record">
<div><ul class="menu">
<li class="item-1">
<h3 title="Ir para o R7">
<a href="http://r7.com/">R7.com</a>
</h3></li>
<li class="item-2">
<h3 title="Ir para o R7 notícias">
<a href="http://noticias.r7.com">Notícias</a>
</h3></li>
<li class="item-3"><h3 title="Ir para o R7 entretenimento">
<a href="http://entretenimento.r7.com">Entretenimento</a>
</h3></li><li class="item-4"><h3 title="Ir para o R7 esportes">
<a href="http://esportes.r7.com">Esportes</a></h3>
</li>
<li class="item-5"><h3 title="Ir para o R7 vídeos">
<a href="http://videos.r7.com">Vídeos</a>
</h3></li>
<li class="item-6"><h3 title="Ir para o site da Rede Record"><a href="http://www.rederecord.com.br">Rede Record</a></h3></li><li class="item-7"><h3 title="Ir para a página de Shopping">
<a href="http://shopping.r7.com">Shopping</a>
</h3></li><li class="item-8">
<h3 title="Ir para a página de e-mail"><a href="http://email.r7.com">E-mail</a></h3>
</li></ul><ul class="social"><li class="item-1" title="Faça do R7 sua página inicial">
<a href="http://www.r7.com/institucional/faca-do-r7-sua-pagina-inicial/" target="_blank">Faça do R7 sua página inicial</a></li><li class="item-2" title="Visite o R7 no Facebook">
<a href="http://www.facebook.com/campaign/landing.php?campaign_id=235286759835862&url=http://www.facebook.com/portalr7" target="_blank">Visite o R7 no Facebook</a></li>
<li class="item-3" title="Siga o R7 no Twitter">
<a href="http://www.twitter.com/portalr7" target="_blank">Siga o R7 no Twitter</a></li>
<li class="item-4" title="Agentto"><a href="http://www.r7.com/agentto/" target="_blank">Agentto</a></li>
<li class="item-5" title="Receba notícias do R7"><a href="http://www.r7.com/institucional/rss/rss.html" target="_blank">Receba notícias do R7</a></li></ul></div></div>
CSS
.r7-main-navigation,.r7-main-navigation .menu LI,.r7-main-navigation .menu LI H3,.r7-main-navigation .social A {
background-image:url(http://sc.r7.com/header-record/img/r7.main.navigation.png);
}
.r7-main-navigation {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:10px;
height:40px;
overflow:hidden;
}
.r7-main-navigation DIV {
position:relative;
width:998px;
height:40px;
left:50%;
overflow:hidden;
margin:0 0 0 -499px;
}
.r7-main-navigation A {
text-decoration:none;
display:block;
}
.r7-main-navigation A:hover {
text-decoration:underline;
}
.r7-main-navigation UL {
list-style-type:none;
float:left;
margin:0;
padding:0;
}
.r7-main-navigation,.r7-main-navigation .menu LI H3 {
background-position:left top;
background-repeat:repeat-x;
}
.r7-main-navigation .menu LI H3 {
float:left;
font-size:2em;
font-weight:700;
padding-right:12px;
background-position:left top;
background-repeat:repeat-x;
margin:0;
}
.r7-main-navigation .menu A {
float:left;
line-height:40px;
height:40px;
letter-spacing:-1px;
}
.r7-main-navigation LI {
float:left;
}
.r7-main-navigation .menu LI {
background-position:left -40px;
margin-right:12px;
padding:0 1px 0 0;
}
.r7-main-navigation * {
outline:0;
}
.r7-main-navigation,.r7-main-navigation DIV {
zoom:1;
}
.r7-main-navigation:after,.r7-main-navigation DIV:after {
display:block;
clear:both;
content:".";
height:0;
visibility:hidden;
}
.r7-main-navigation .social A {
width:32px;
height:32px;
text-indent:-99999px;
overflow:hidden;
color:transparent;
background-repeat:no-repeat;
margin:0 4px 0 0;
}
.r7-main-navigation .social .item-1 A {
background-position:left -80px;
}
.r7-main-navigation .social .item-2 A {
background-position:-32px -80px;
}
.r7-main-navigation .social .item-3 A {
background-position:-64px -80px;
}
.r7-main-navigation .social .item-4 A {
background-position:-96px -80px;
}
.r7-main-navigation .social .item-5 A {
background-position:-128px -80px;
}
.r7-main-navigation .menu .item-2 A {
color:#000;
}
.r7-main-navigation .menu .item-3 A {
color:#C9168E;
}
.r7-main-navigation .menu .item-4 A {
color:#099505;
}
.r7-main-navigation .menu .item-6 A {
color:#8D8D8D;
}
.r7-main-navigation .menu .item-7 A {
color:#FD6B08;
}
.r7-main-navigation .menu .item-8 A {
color:#56AAE8;
}
.r7-main-navigation.record DIV {
width:830px;
margin:0 0 0 -415px;
}
.r7-main-navigation.record .menu H3 {
font-size:21px!important;
}
.r7-main-navigation.record .menu .item-7,.r7-main-navigation.record .menu .item-8 {
display:none;
}
.r7-main-navigation.record .menu .item-1 {
background:none;
margin:0;
padding:0;
}
.r7-main-navigation.record .menu .item-1 H3 {
margin:0 23px 0 0;
padding:0;
}
.r7-main-navigation.record .menu .item-1 A {
width:40px;
text-indent:-99999px;
overflow:hidden;
color:transparent;
background:url(http://sc.r7.com/header-record/img/r7.main.navigation.png) -160px -80px no-repeat;
}
.r7-main-navigation .menu .item-1 A,.r7-main-navigation .menu .item-5 A {
color:#007DC5;
}
Browser other questions tagged javascript html css
You are not signed in. Login or sign up in order to post.
That’s right @Lucasnunes, but there’s some way to make it responsive?
– Jefferson Alison
@Jeffersonalison I edited the answer. The bar on the smartphone could have gotten a little bigger, but it worked. But, I don’t know if it would be a good idea to change because it is standard and can be updated by R7 at any time.
– Lucas Lima
Got it @Lucasnunes, thank you very much!
– Jefferson Alison