3

Preciso implementar aquela barra do portal R7 no topo de um site, alguém conhece alguma maneira de fazer isso? É tem como deixar essa barra adaptável a qualquer tamanho de tela?

Essa é a barra: barra do portal r7

2 Respostas 2

6

Basicamente, assim:

<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>

Eu não tenho certeza se ela é adaptável para qualquer tela, mas para as resoluções que testei, incluindo um smartphone, funcionou como esperado.

3
  • Isso mesmo @LucasNunes, mas tem alguma forma de deixa-lo responsivo? Commented 19/03/2014 às 21:25
  • @JeffersonAlison Editei a resposta. A barra no smartphone poderia ter ficado um pouco maior, mas funcionou. Mas, eu não sei se seria uma boa ideia alterar pois ela é padrão e pode ser atualizada pelo R7 a qualquer momento.
    – Lucas Lima
    Commented 19/03/2014 às 21:39
  • Entendi @LucasNunes, muito obrigado! Commented 26/03/2014 às 17:55
1

Segue um modelo, caso queira modificar (retirar/adicionar) algo na barra.

Ver demonstrativo no JSFiddle

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&amp;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;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .