0

he estado creando una pagina web la cual segun yo me habia quedado bastante bien hasta que llegue al momento del responsive desing ya que no encuentre la manera de crear el menu responsive, ya he probado de muchisimas maneras por ejemplo con flexbox,css grid, con los elementos en bloque,poniendo en un mismo contenedor los enlaces y los botones de registro e inicio y no logro crearlo entonces lo que pasa es que la seccion de los enleces no se pone de forma vertical al igual que me pasa con los otros dos botones los de resgistro y inicio de sesion me hace imposible queria saber si alguien de los que vea este post pueda ayudarme en crear dicho menu ya que se me hace muy compliacado crearlo aqui les dejo el codigo para que lo vean

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Font Awesome-->
<link rel="stylesheet" href="../fontawesome-free-5.15.0-web/css/all.css">
<!--Custom Css-->
<link rel="stylesheet" href="../css/style.css">
<title>East Rooms</title>
<!--header-->
<div class="container">
    <header class="header">
        <nav class="nav_main">
            <a href="index.html" class="tittle">EAST<br>ROOM</a>
           
            <ul class="links_container ">
                <li> <a href="#" class="links link1">About</a></li>
                <li> <a href="#" class="links link2">Price</a></li>
                <li>  <a href="#" class="links link3">Platforms</a></li>
               <li>  <a href="#" class="links link4">Download</a></li>
               <li>  <a href="#" class="links link5">Support</a></li>
               <li>  <a href="#" class="links link6">Contact</a></li>
            </ul>
            <div class="entrance ">
                <ul>
                    <li> <a href="#" class="log_in">Log In</a></li>
                    <li> <a href="#" class="sign_up">Sign Up <i class="fas fa-sign-in-alt"></i></a></li>
                </ul>
                <a class="btn_responsive"><i class="fas fa-bars icon_menu_responsive"></i></a>
            </div>

           
        </nav>
        
        
        <main class="main_text">
            <h1>Welcome To <br> East Rooms</h1>
            <div class="line"><div></div></div>
            <div class="text2">
            <h2 class="text2">The Best Music In One Place </h2>
            <h2>Aviable In 100 Different Contries</h2>
            <h2>More Than 4,000,000 Million music free</h2>
            <h2>More Than 40,000,000 Million Music For $ 20</h2>
            <h2>Aviable In Windows,MacOS,Linux,Android/IOS</h2>
            </div>
        </main>
</div>
    <footer class="footer_links">
        
            <h3>Follow Us</h3>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            

        

        
    </footer>
</header>

<!--Custom JavaScript-->
<script src="../js/script.js"></script>
</body>
</html>


          * {
  box-sizing: border-box;
      }
      
      body {
 font-family: sans-serif;
 font-size: 16px;
 margin: 0;
 background-color: #353b48;
 color: #ffffff;
      }
      
      li{
  display: inline-block;
 list-style: none;
      }
      
      a {
 text-decoration: none;
 color: #ffffff;
      }
      
      
      
      /* navigation */
      .nav_main {
 padding: 10px;
 display: flex;
 justify-content: space-between;
 align-items: center;
      }
      
      
      .nav_main .tittle {
 display: block;
 padding: 7px;
 font-size: 15px;
border: 1px solid #ffffff;
border-radius: 10px;
 transition: 0.5s ease;
      }
      
      .nav_main .tittle:hover {
 color: #000000;
 background-color: #ffffff;
      }
      
      
      
      .links_container{
 text-align: left;
      }
      
      .nav_main .links  {
 margin: 0 10px;
      }
      
      
      .nav_main .links::after{
 content: '';
 display: block;
 width: 0;
 height: 2px;
 background: #ffffff;
 transition: width 0.3s

      }
      
      .nav_main .links:hover::after{
 width: 100%;

 transition: width 0.3s;
      }
      .nav_main .entrance{

 position:relative;
 padding-right: 30px; 

      }
      
      .nav_main .entrance .log_in {
 padding: 10px;
 border: 3px solid #ffffff;
 border-radius: 15px;
 transition: 0.5s ease;
      }
      .nav_main .entrance .log_in:hover {
 color: #000000;
 background-color: #ffffff;
      }
      .nav_main .entrance .sign_up {
 padding: 15px;
 border: 3px solid #ffffff;
 border-radius: 20px;
 font-size: 18px;
 transition: 0.3s ease;

      }
      .nav_main .entrance .sign_up:hover {
 color: #000000;
 background-color: #ffffff;


      }
      .fa-sign-in-alt {
 font-size: 18px;
      }
      
      .btn_responsive{
 display: none;
 position: absolute;
 top:0;
 left: 0;
 transform: translateZ(20px);
 font-size: 40px;
 cursor: pointer;
      }
      
      
      
      /* main text */
      .main_text {

 padding-top: 50px;
 padding-left: 50px;
 display: flex;
 flex-direction: row;
      }
      .main_text > h1 {
  font-size: 75px;
  letter-spacing: 3px;
      }

      .main_text .line {
 width: 10px;
 border-radius: 5px;

 background-color: #ffffff;
      }
      
      .main_text h2 {
        font-size: 30px;
      }

      .main_text .text2 {
 color: #d4d3d3;

 padding: 0 10px;
      }
      /*footer*/
      .footer_links {
 text-align: center;
      }
      
      .footer_links h3 {
  font-size: 30px;
      }
      
      .footer_links a {
 padding: 10px;
 font-size: 30px;
 transition: 0.5s ease;
      }
      
      .footer_links a:hover {
 border-radius: 30px;
 color: #000000;
 background-color: #ffffff;
      }
      
      @media (max-width:870px){



 .nav_main .entrance{
  position: absolute;

   right: 55%;
 }

 .main_text{
   display: block;
   }
      }
      
      @media (max-width: 780px){
 .na_main .tittle{
   display:none;
   }
 .btn_responsive{
   display: block;

  }
      }

1 respuesta 1

0

Yo tengo un ejemplo, es este

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 50px;
    background: #333;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}


.contenedor {
    width: 98%;
    margin: auto;
}

h1 {
    line-height: 50px;
    float: left;
}

header .contenedor {
    display: table;
}

#menu-bar {
    display: none;
}

header label {
    float: right;
    font-size: 28px;
    margin: 10px 0;
    cursor: pointer;
}

.menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(51, 51, 51, 0.9);
    transition: all 0.5s;
    transform: translateX(-100%);
}

.menu a {
    display: block;
    color: #fff;
    height: 50px;
    padding: 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.menu a:hover {
    background: rgba(255, 255, 255, 0.3);
}

#menu-bar:checked ~ .menu {
    transform: translateX(0%);
}

@media (min-width: 1024px) {
    .menu {
        position: static;
        width: auto;
        height: auto;
        transform: translateX(0%);
        float: right;
        display: flex;
    }

    header label,
    .fas {
        display: none;
    }

    .menu a {
        border: none;
    }

    .contenedor {
        width: 1000px;
    }
}
<!--<>-->
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <title>Ejemplo</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <script src="https://kit.fontawesome.com/0e2ef34874.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="menu.css">
</head>

<Body>
    <header>
        <div class="contenedor">
            <h1>My Site</h1>
            <input type="checkbox" id="menu-bar">
            <label class="fas fa-bars" for="menu-bar"></label>
            <nav class="menu">
                <a href="#">Home</a>
                <a href="#">Products</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </nav>
        </div>
    </header>
</Body>

</html>

Este menu utiliza un evento con un checkbox cuando se presiona sobre el label el checkbox se activa y el menu se muestra y viceversa... Puedes buscar muchos ejemplos en youtube si amigo con mejor explicación... hasta con bootstrap 4...

Espero te sea de útilidad...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.