Skip to main content
formatação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Notícias
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Notícias</title>
    
    <meta charset=UTF-8> <!-- ISO-8859-1 -->
    <meta name=viewport content="width=device-width, initial-scale=1.0">
    <meta name=description content="Introdução à produção de sites responsivos">
    <meta name=keywords content=""> <!-- Opcional -->
    <meta name=author content='Equipe 05'>

    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/menu.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/carrosselPagCurso.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/stylePagCursos480.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/footer480.css">
-->

<!--<link rel=stylesheet media="screen and (min-width:481px) and (max-width:768px)" href="css/style768.css">
    <link rel=stylesheet media="screen and (min-width:769px) and (max-width:1024px)" href="css/style1024.css">
    <link rel=stylesheet media="screen and (min-width:1025px)" href="css/style1366.css">
-->
    <link rel="shortcut icon" href="imagens/fiebIVazio.png" type="image/x-icon">
    <script src="main.js"></script>
</head>
<body>
     <div id="container">
        <header>  
            <nav> 
                <a href="landpageMobile.html">  <img src="imagens/fiebIVazio.png" id="iconTop" alt=""> </a>
                <input type="checkbox" id="check">
                <label id="icone" for="check"></label>
                <div id="menu">
                    <span></span>
                </div>    
                    <div class="barra"> 
                        <nav id="navMenu">
                             <a href="landpageMobile.html"><div class="link">Home</div></a>
                             <a href="cursos480.html"><div class="link">Cursos</div></a>
                             <a href="unidades480.html"><div class="link">Unidades</div></a>
                             <a href="noticias480.html"><div class="link">Notícias</div></a>
                             <a href="vestib480.html"><div class="link">Vestibulinho</div></a>
                             <a href="test480.html"><div class="link">Teste Vocacional</div></a>
                             <a href="contat480.html"><div class="link">Contato</div></a>
                             <a href="cadastro480.html"><div class="link">Cadastrar</div></a>
                             <a href="login480.html"><div class="link">Login</div></a>
                        </nav>
                    </div>
                </nav>
         </header> 
HomeCursosUnidadesNotíciasVestibulinhoTeste VocacionalContatoCadastrarLogin

CSS do Botão (Eu fiz o código do botão em css)

#check{ display:none; } #icone{ position: absolute; z-index: 5; margin-left: 63.2%; margin-top: 4%; } .barra{ width: 100%; position:absolute; text-align: center; z-index: 3; transition: all .2s linear; } #navMenu{ width: 100%; position:absolute; visibility: hidden; } #navMenu a{ text-decoration:none; } .link{ background-color:#494950; padding: 9.4%; font-family:"arial"; font-size: 18pt; transition: .2s ease-in-out; color:#f4f4f9; border-bottom: 2px solid #222; opacity:0; } .link:hover{ background-color:#050542; }

#check:checked ~ .barra #navMenu a .link{ opacity:1; margin-top: 0%; visibility: visible; } label{ width: 46px; float: left; opacity:0; height: 44px; position: relative; float: left; position: absolute; box-shadow:5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; cursor: pointer; } label:hovert + #menu{ opacity: 1; } #menu{ width: 43px; float: left; opacity: 0.6; height: 43px; position: relative; background-color: #4c0c3f; box-shadow: 5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; position: absolute; margin-left: 84%; z-index: 4; margin-top: 4%; } #check{ position: absolute; display:none; z-index: 4; } span{ width: 59%; height: 7%; top: 47%; left: 21%; position: absolute; background-color: #fff; transition: all 0.1 linear; } span:before{ content:''; top: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } span:after{ content:''; bottom: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; }

#check:checked + label + div > span{ background-color: transparent; } #check:checked + label + div > span:after{ transform: translate(0px, 6px) rotate(45deg); } #check:checked + label + div > span:before{ transform: translate(0px, -8px) rotate(-45deg); } #check:checked + label + div > .tent{ border-radius: 50%; }

**Se#check{
 precisar de algo édisplay:none;
}
#icone{
  falar**  position: absolute;
Ps    z-index: Ja5;
 tentei colocar isso masmargin-left: não63.2%;
 deu certo  margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: 3;
    transition: all .2s linear;
}
#navMenu{
    width: 100%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 9.4%;
    font-family:"arial";
    font-size: 18pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}
   
#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
label{
    width: 46px;
    float: left;
    opacity:0;
    height: 44px;
    position: relative;
    float: left;
    position: absolute;
    box-shadow:5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    cursor: pointer;
}
label:hovert + #menu{
    opacity: 1;
}
#menu{
    width: 43px;
    float: left;
    opacity: 0.6;
    height: 43px;
    position: relative;
    background-color: #4c0c3f;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    position: absolute;
    margin-left: 84%;
    z-index: 4;
    margin-top: 4%;
}
#check{
    position: absolute;
    display:none;
    z-index: 4;
}
span{
    width: 59%;
    height: 7%;
    top: 47%;
    left: 21%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1 linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}

#check:checked + label + div > span{
    background-color: transparent;
}
#check:checked + label + div > span:after{
    transform: translate(0px, 6px) rotate(45deg);
}
#check:checked + label + div > span:before{
    transform: translate(0px, -8px) rotate(-45deg);
}
#check:checked + label + div > .tent{
    border-radius: 50%;
}

Se precisar de algo é só falar

Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}
Notícias
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/menu.css">
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/carrosselPagCurso.css">
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/stylePagCursos480.css">
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/footer480.css">
-->
<link rel="shortcut icon" href="imagens/fiebIVazio.png" type="image/x-icon">
<script src="main.js"></script>
HomeCursosUnidadesNotíciasVestibulinhoTeste VocacionalContatoCadastrarLogin

CSS do Botão (Eu fiz o código do botão em css)

#check{ display:none; } #icone{ position: absolute; z-index: 5; margin-left: 63.2%; margin-top: 4%; } .barra{ width: 100%; position:absolute; text-align: center; z-index: 3; transition: all .2s linear; } #navMenu{ width: 100%; position:absolute; visibility: hidden; } #navMenu a{ text-decoration:none; } .link{ background-color:#494950; padding: 9.4%; font-family:"arial"; font-size: 18pt; transition: .2s ease-in-out; color:#f4f4f9; border-bottom: 2px solid #222; opacity:0; } .link:hover{ background-color:#050542; }

#check:checked ~ .barra #navMenu a .link{ opacity:1; margin-top: 0%; visibility: visible; } label{ width: 46px; float: left; opacity:0; height: 44px; position: relative; float: left; position: absolute; box-shadow:5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; cursor: pointer; } label:hovert + #menu{ opacity: 1; } #menu{ width: 43px; float: left; opacity: 0.6; height: 43px; position: relative; background-color: #4c0c3f; box-shadow: 5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; position: absolute; margin-left: 84%; z-index: 4; margin-top: 4%; } #check{ position: absolute; display:none; z-index: 4; } span{ width: 59%; height: 7%; top: 47%; left: 21%; position: absolute; background-color: #fff; transition: all 0.1 linear; } span:before{ content:''; top: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } span:after{ content:''; bottom: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; }

#check:checked + label + div > span{ background-color: transparent; } #check:checked + label + div > span:after{ transform: translate(0px, 6px) rotate(45deg); } #check:checked + label + div > span:before{ transform: translate(0px, -8px) rotate(-45deg); } #check:checked + label + div > .tent{ border-radius: 50%; }

**Se precisar de algo é  falar**
Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Notícias</title>
    
    <meta charset=UTF-8> <!-- ISO-8859-1 -->
    <meta name=viewport content="width=device-width, initial-scale=1.0">
    <meta name=description content="Introdução à produção de sites responsivos">
    <meta name=keywords content=""> <!-- Opcional -->
    <meta name=author content='Equipe 05'>

    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/menu.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/carrosselPagCurso.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/stylePagCursos480.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/footer480.css">

<!--<link rel=stylesheet media="screen and (min-width:481px) and (max-width:768px)" href="css/style768.css">
    <link rel=stylesheet media="screen and (min-width:769px) and (max-width:1024px)" href="css/style1024.css">
    <link rel=stylesheet media="screen and (min-width:1025px)" href="css/style1366.css">
-->
    <link rel="shortcut icon" href="imagens/fiebIVazio.png" type="image/x-icon">
    <script src="main.js"></script>
</head>
<body>
     <div id="container">
        <header>  
            <nav> 
                <a href="landpageMobile.html">  <img src="imagens/fiebIVazio.png" id="iconTop" alt=""> </a>
                <input type="checkbox" id="check">
                <label id="icone" for="check"></label>
                <div id="menu">
                    <span></span>
                </div>    
                    <div class="barra"> 
                        <nav id="navMenu">
                             <a href="landpageMobile.html"><div class="link">Home</div></a>
                             <a href="cursos480.html"><div class="link">Cursos</div></a>
                             <a href="unidades480.html"><div class="link">Unidades</div></a>
                             <a href="noticias480.html"><div class="link">Notícias</div></a>
                             <a href="vestib480.html"><div class="link">Vestibulinho</div></a>
                             <a href="test480.html"><div class="link">Teste Vocacional</div></a>
                             <a href="contat480.html"><div class="link">Contato</div></a>
                             <a href="cadastro480.html"><div class="link">Cadastrar</div></a>
                             <a href="login480.html"><div class="link">Login</div></a>
                        </nav>
                    </div>
                </nav>
         </header> 

CSS do Botão (Eu fiz o código do botão em css)

#check{
    display:none;
}
#icone{
    position: absolute;
    z-index: 5;
    margin-left: 63.2%;
    margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: 3;
    transition: all .2s linear;
}
#navMenu{
    width: 100%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 9.4%;
    font-family:"arial";
    font-size: 18pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}
   
#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
label{
    width: 46px;
    float: left;
    opacity:0;
    height: 44px;
    position: relative;
    float: left;
    position: absolute;
    box-shadow:5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    cursor: pointer;
}
label:hovert + #menu{
    opacity: 1;
}
#menu{
    width: 43px;
    float: left;
    opacity: 0.6;
    height: 43px;
    position: relative;
    background-color: #4c0c3f;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    position: absolute;
    margin-left: 84%;
    z-index: 4;
    margin-top: 4%;
}
#check{
    position: absolute;
    display:none;
    z-index: 4;
}
span{
    width: 59%;
    height: 7%;
    top: 47%;
    left: 21%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1 linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}

#check:checked + label + div > span{
    background-color: transparent;
}
#check:checked + label + div > span:after{
    transform: translate(0px, 6px) rotate(45deg);
}
#check:checked + label + div > span:before{
    transform: translate(0px, -8px) rotate(-45deg);
}
#check:checked + label + div > .tent{
    border-radius: 50%;
}

Se precisar de algo é só falar

Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}
adicionou 341 caracteres ao conteúdo
Fonte Link
Dunga
  • 59
  • 1
  • 12
Notícias
<body>
 <div id="container">
    <header>  
        <nav> 
            <a href="landpageMobile.html">  <img src="imagens/fiebIVazio.png" id="iconTop" alt=""> </a>
            <input type="checkbox" id="check">
            <label id="icone" for="check"></label>
            <div id="menu">
                <span></span>
            </div>    
                <div class="barra"> 
                    <nav id="navMenu">
                         <a href="landpageMobile.html"><div class="link">Home</div></a>
                         <a href="cursos480.html"><div class="link">Cursos</div></a>
                         <a href="unidades480.html"><div class="link">Unidades</div></a>
                      <link rel="stylesheet" media="screen <aand href="noticias480.html"><div(max-width:480px)" class="link">Notícias<href="css/div><style480/a>
                         <a href="vestib480menu.html"><div class="link">Vestibulinho</div></a>css">
                       <link rel="stylesheet" <amedia="screen href="test480.html"><divand class="link">Teste(max-width:480px)" Vocacional<href="css/div><style480/a>
                         <a href="contat480carrosselPagCurso.html"><div class="link">Contato</div></a>css">
                      <link rel="stylesheet" media="screen <aand href="cadastro480.html"><div(max-width:480px)" class="link">Cadastrar<href="css/div><style480/a>
                         <a href="login480stylePagCursos480.html"><div class="link">Login</div></a>
                    </nav>
                </div>
            </nav>css">
<link rel="stylesheet" media="screen and (max-width:480px)" <href="css/header>
     <div id="content">
         <div class="wrapper">
             <a href="#">
                 <div class="box">
                     <img src="imagensstyle480/astroMobfooter480.png" class="imageB" alt="">
                     <div class="cont">css">
                       
-->
<link rel="shortcut <imgicon" src="imagenshref="imagens/fogueteFfiebIVazio.png" class="icon" alt="">
                         <h5>Administração</h5>
                     </div>
                 </div>
             <type="image/a>x-icon">
        <script <src="main.js"></div>script>
HomeCursosUnidadesNotíciasVestibulinhoTeste VocacionalContatoCadastrarLogin

CSS do Botão (Eu fiz o código do botão em css)

#check{ display:none; } #icone{ position: absolute; z-index: 5; margin-left: 63.2%; margin-top: 4%; } .barra{ width: 100%; position:absolute; text-align: center; z-index: 3; transition: all .2s linear; } #navMenu{ width: 100%; position:absolute; visibility: hidden; } #navMenu a{ text-decoration:none; } .link{ background-color:#494950; padding: 9.4%; font-family:"arial"; font-size: 18pt; transition: .2s ease-in-out; color:#f4f4f9; border-bottom: 2px solid #222; opacity:0; } .link:hover{ background-color:#050542; }

#check:checked ~ .barra #navMenu a .link{ opacity:1; margin-top: 0%; visibility: visible; } label{ width: 46px; float: left; opacity:0; height: 44px; position: relative; float: left; position: absolute; box-shadow:5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; cursor: pointer; } label:hovert + #menu{ opacity: 1; } #menu{ width: 43px; float: left; opacity: 0.6; height: 43px; position: relative; background-color: #4c0c3f; box-shadow: 5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; position: absolute; margin-left: 84%; z-index: 4; margin-top: 4%; } #check{ position: absolute; display:none; z-index: 4; } span{ width: 59%; height: 7%; top: 47%; left: 21%; position: absolute; background-color: #fff; transition: all 0.1 linear; } span:before{ content:''; top: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } span:after{ content:''; bottom: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; }

#check:checked + label + div > span{ background-color: transparent; } #check:checked + label + div > span:after{ transform: translate(0px, 6px) rotate(45deg); } #check:checked + label + div > span:before{ transform: translate(0px, -8px) rotate(-45deg); } #check:checked + label + div > .tent{ border-radius: 50%; }

#check{
    display:none;
}
#icone{
    position: absolute;
    z-index: 5;
    margin-left: 63.2%;
    margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: 3;
    transition: all .2s linear;
}
#navMenu{
    width: 100%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 9.4%;
    font-family:"arial";
    font-size: 18pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}
   
#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
label{
    width: 46px;
    float: left;
    opacity:0;
    height: 44px;
    position: relative;
    float: left;
    position: absolute;
    box-shadow:5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    cursor: pointer;
}
label:hovert + #menu{
    opacity: 1;
}
#menu{
    width: 43px;
    float: left;
    opacity: 0.6;
    height: 43px;
    position: relative;
    background-color: #4c0c3f;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    position: absolute;
    margin-left: 84%;
    z-index: 4;
    margin-top: 4%;
}
#check{
    position: absolute;
    display:none;
    z-index: 4;
}
span{
    width: 59%;
    height: 7%;
    top: 47%;
    left: 21%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1 linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}

#check:checked + label + div > span{
    background-color: transparent;
}
#check:checked + label + div > span:after{
    transform: translate(0px, 6px) rotate(45deg);
}
#check:checked + label + div > span:before{
    transform: translate(0px, -8px) rotate(-45deg);
}
#check:checked + label + div > .tent{
    border-radius: 50%;
}

**Se precisar de algo é só falar**
Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}
<body>
 <div id="container">
    <header>  
        <nav> 
            <a href="landpageMobile.html">  <img src="imagens/fiebIVazio.png" id="iconTop" alt=""> </a>
            <input type="checkbox" id="check">
            <label id="icone" for="check"></label>
            <div id="menu">
                <span></span>
            </div>    
                <div class="barra"> 
                    <nav id="navMenu">
                         <a href="landpageMobile.html"><div class="link">Home</div></a>
                         <a href="cursos480.html"><div class="link">Cursos</div></a>
                         <a href="unidades480.html"><div class="link">Unidades</div></a>
                         <a href="noticias480.html"><div class="link">Notícias</div></a>
                         <a href="vestib480.html"><div class="link">Vestibulinho</div></a>
                         <a href="test480.html"><div class="link">Teste Vocacional</div></a>
                         <a href="contat480.html"><div class="link">Contato</div></a>
                         <a href="cadastro480.html"><div class="link">Cadastrar</div></a>
                         <a href="login480.html"><div class="link">Login</div></a>
                    </nav>
                </div>
            </nav>
     </header>
     <div id="content">
         <div class="wrapper">
             <a href="#">
                 <div class="box">
                     <img src="imagens/astroMob.png" class="imageB" alt="">
                     <div class="cont">
                         <img src="imagens/fogueteF.png" class="icon" alt="">
                         <h5>Administração</h5>
                     </div>
                 </div>
             </a>
         </div>

CSS do Botão (Eu fiz o código do botão em css)

#check{
    display:none;
}
#icone{
    position: absolute;
    z-index: 5;
    margin-left: 63.2%;
    margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: 3;
    transition: all .2s linear;
}
#navMenu{
    width: 100%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 9.4%;
    font-family:"arial";
    font-size: 18pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}
   
#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
label{
    width: 46px;
    float: left;
    opacity:0;
    height: 44px;
    position: relative;
    float: left;
    position: absolute;
    box-shadow:5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    cursor: pointer;
}
label:hovert + #menu{
    opacity: 1;
}
#menu{
    width: 43px;
    float: left;
    opacity: 0.6;
    height: 43px;
    position: relative;
    background-color: #4c0c3f;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    position: absolute;
    margin-left: 84%;
    z-index: 4;
    margin-top: 4%;
}
#check{
    position: absolute;
    display:none;
    z-index: 4;
}
span{
    width: 59%;
    height: 7%;
    top: 47%;
    left: 21%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1 linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}

#check:checked + label + div > span{
    background-color: transparent;
}
#check:checked + label + div > span:after{
    transform: translate(0px, 6px) rotate(45deg);
}
#check:checked + label + div > span:before{
    transform: translate(0px, -8px) rotate(-45deg);
}
#check:checked + label + div > .tent{
    border-radius: 50%;
}

**Se precisar de algo é só falar**
Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}
Notícias
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/menu.css">
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/carrosselPagCurso.css">
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/stylePagCursos480.css">
<link rel="stylesheet" media="screen and (max-width:480px)" href="css/style480/footer480.css">
-->
<link rel="shortcut icon" href="imagens/fiebIVazio.png" type="image/x-icon">
<script src="main.js"></script>
HomeCursosUnidadesNotíciasVestibulinhoTeste VocacionalContatoCadastrarLogin

CSS do Botão (Eu fiz o código do botão em css)

#check{ display:none; } #icone{ position: absolute; z-index: 5; margin-left: 63.2%; margin-top: 4%; } .barra{ width: 100%; position:absolute; text-align: center; z-index: 3; transition: all .2s linear; } #navMenu{ width: 100%; position:absolute; visibility: hidden; } #navMenu a{ text-decoration:none; } .link{ background-color:#494950; padding: 9.4%; font-family:"arial"; font-size: 18pt; transition: .2s ease-in-out; color:#f4f4f9; border-bottom: 2px solid #222; opacity:0; } .link:hover{ background-color:#050542; }

#check:checked ~ .barra #navMenu a .link{ opacity:1; margin-top: 0%; visibility: visible; } label{ width: 46px; float: left; opacity:0; height: 44px; position: relative; float: left; position: absolute; box-shadow:5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; cursor: pointer; } label:hovert + #menu{ opacity: 1; } #menu{ width: 43px; float: left; opacity: 0.6; height: 43px; position: relative; background-color: #4c0c3f; box-shadow: 5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; position: absolute; margin-left: 84%; z-index: 4; margin-top: 4%; } #check{ position: absolute; display:none; z-index: 4; } span{ width: 59%; height: 7%; top: 47%; left: 21%; position: absolute; background-color: #fff; transition: all 0.1 linear; } span:before{ content:''; top: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } span:after{ content:''; bottom: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; }

#check:checked + label + div > span{ background-color: transparent; } #check:checked + label + div > span:after{ transform: translate(0px, 6px) rotate(45deg); } #check:checked + label + div > span:before{ transform: translate(0px, -8px) rotate(-45deg); } #check:checked + label + div > .tent{ border-radius: 50%; }

**Se precisar de algo é só falar**
Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}
formatação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

CSS do Botão (Eu fiz o código do botão em css) #check{ display:none; } #icone{ position: absolute; z-index: 5; margin-left: 63.2%; margin-top: 4%; } .barra{ width: 100%; position:absolute; text-align: center; z-index: 3; transition: all .2s linear; } #navMenu{ width: 100%; position:absolute; visibility: hidden; } #navMenu a{ text-decoration:none; } .link{ background-color:#494950; padding: 9.4%; font-family:"arial"; font-size: 18pt; transition: .2s ease-in-out; color:#f4f4f9; border-bottom: 2px solid #222; opacity:0; } .link:hover{ background-color:#050542; }

#check:checked ~ .barra #navMenu a .link{ opacity:1; margin-top: 0%; visibility: visible; } label{ width: 46px; float: left; opacity:0; height: 44px; position: relative; float: left; position: absolute; box-shadow:5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; cursor: pointer; } label:hovert + #menu{ opacity: 1; } #menu{ width: 43px; float: left; opacity: 0.6; height: 43px; position: relative; background-color: #4c0c3f; box-shadow: 5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; position: absolute; margin-left: 84%; z-index: 4; margin-top: 4%; } #check{ position: absolute; display:none; z-index: 4; } span{ width: 59%; height: 7%; top: 47%; left: 21%; position: absolute; background-color: #fff; transition: all 0.1 linear; } span:before{ content:''; top: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } span:after{ content:''; bottom: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; }

#check:checked + label + div > span{ background-color: transparent; } #check:checked + label + div > span:after{ transform: translate(0px, 6px) rotate(45deg); } #check:checked + label + div > span:before{ transform: translate(0px, -8px) rotate(-45deg); } #check:checked + label + div > .tent{ border-radius: 50%; }

Se precisar de algo é só falar Ps: Ja tentei colocar isso mas não deu certo:

body{ overflow: hidden; } #check:checked > body{ overflow: visible; }

#check{
    display:none;
}
#icone{
    position: absolute;
    z-index: 5;
    margin-left: 63.2%;
    margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: 3;
    transition: all .2s linear;
}
#navMenu{
    width: 100%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 9.4%;
    font-family:"arial";
    font-size: 18pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}
   
#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
label{
    width: 46px;
    float: left;
    opacity:0;
    height: 44px;
    position: relative;
    float: left;
    position: absolute;
    box-shadow:5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    cursor: pointer;
}
label:hovert + #menu{
    opacity: 1;
}
#menu{
    width: 43px;
    float: left;
    opacity: 0.6;
    height: 43px;
    position: relative;
    background-color: #4c0c3f;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    position: absolute;
    margin-left: 84%;
    z-index: 4;
    margin-top: 4%;
}
#check{
    position: absolute;
    display:none;
    z-index: 4;
}
span{
    width: 59%;
    height: 7%;
    top: 47%;
    left: 21%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1 linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}

#check:checked + label + div > span{
    background-color: transparent;
}
#check:checked + label + div > span:after{
    transform: translate(0px, 6px) rotate(45deg);
}
#check:checked + label + div > span:before{
    transform: translate(0px, -8px) rotate(-45deg);
}
#check:checked + label + div > .tent{
    border-radius: 50%;
}

**Se precisar de algo é só falar**
Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}

CSS do Botão (Eu fiz o código do botão em css) #check{ display:none; } #icone{ position: absolute; z-index: 5; margin-left: 63.2%; margin-top: 4%; } .barra{ width: 100%; position:absolute; text-align: center; z-index: 3; transition: all .2s linear; } #navMenu{ width: 100%; position:absolute; visibility: hidden; } #navMenu a{ text-decoration:none; } .link{ background-color:#494950; padding: 9.4%; font-family:"arial"; font-size: 18pt; transition: .2s ease-in-out; color:#f4f4f9; border-bottom: 2px solid #222; opacity:0; } .link:hover{ background-color:#050542; }

#check:checked ~ .barra #navMenu a .link{ opacity:1; margin-top: 0%; visibility: visible; } label{ width: 46px; float: left; opacity:0; height: 44px; position: relative; float: left; position: absolute; box-shadow:5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; cursor: pointer; } label:hovert + #menu{ opacity: 1; } #menu{ width: 43px; float: left; opacity: 0.6; height: 43px; position: relative; background-color: #4c0c3f; box-shadow: 5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; position: absolute; margin-left: 84%; z-index: 4; margin-top: 4%; } #check{ position: absolute; display:none; z-index: 4; } span{ width: 59%; height: 7%; top: 47%; left: 21%; position: absolute; background-color: #fff; transition: all 0.1 linear; } span:before{ content:''; top: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } span:after{ content:''; bottom: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; }

#check:checked + label + div > span{ background-color: transparent; } #check:checked + label + div > span:after{ transform: translate(0px, 6px) rotate(45deg); } #check:checked + label + div > span:before{ transform: translate(0px, -8px) rotate(-45deg); } #check:checked + label + div > .tent{ border-radius: 50%; }

Se precisar de algo é só falar Ps: Ja tentei colocar isso mas não deu certo:

body{ overflow: hidden; } #check:checked > body{ overflow: visible; }

CSS do Botão (Eu fiz o código do botão em css)

#check{
    display:none;
}
#icone{
    position: absolute;
    z-index: 5;
    margin-left: 63.2%;
    margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: 3;
    transition: all .2s linear;
}
#navMenu{
    width: 100%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 9.4%;
    font-family:"arial";
    font-size: 18pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}
   
#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
label{
    width: 46px;
    float: left;
    opacity:0;
    height: 44px;
    position: relative;
    float: left;
    position: absolute;
    box-shadow:5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    cursor: pointer;
}
label:hovert + #menu{
    opacity: 1;
}
#menu{
    width: 43px;
    float: left;
    opacity: 0.6;
    height: 43px;
    position: relative;
    background-color: #4c0c3f;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    position: absolute;
    margin-left: 84%;
    z-index: 4;
    margin-top: 4%;
}
#check{
    position: absolute;
    display:none;
    z-index: 4;
}
span{
    width: 59%;
    height: 7%;
    top: 47%;
    left: 21%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1 linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}

#check:checked + label + div > span{
    background-color: transparent;
}
#check:checked + label + div > span:after{
    transform: translate(0px, 6px) rotate(45deg);
}
#check:checked + label + div > span:before{
    transform: translate(0px, -8px) rotate(-45deg);
}
#check:checked + label + div > .tent{
    border-radius: 50%;
}

**Se precisar de algo é só falar**
Ps: Ja tentei colocar isso mas não deu certo:

body{
    overflow: hidden;
}
#check:checked > body{
    overflow: visible;
}
Fonte Link
Dunga
  • 59
  • 1
  • 12
Carregando