Question

0

264

Vistas

Create a menu from a modal

This is my primary page on my website, I wanna my website no be easy and don´t have so many pages, so when I press "us" I want that open a modal with options to navigate to other pages, like this photo above:

Desired result

My code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/src/styles/pages/menu2.css">
    <title>menu</title>
</head>
<body>
    <div class="container">
        <div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div>
        <div class="right">us</div>
      </div>

</body>
</html>

Css:

html, body, .container {
    height: 100%;
  }
  
  body {
    margin: 0;
  }
  
  .container {
    display: flex;
  }
  
  .left,
  .right {
    font-family: 'Times New Roman', Times, serif;
    font-size: 50px;
    width: 50%;
    height: 100%;
  }
  
  .left {
    background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
    background-size: cover;
  }
  
  .left, .right {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .left {
    color: white;
  }

  .clickable {
    cursor: pointer;
    text-decoration: none;
    color: white;
  }

Can someone help me?

Thank you,

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-13T11:21:07.139Z

you can use this code I added

html, body, .container {
    height: 100%;
  }
  
  body {
    margin: 0;
  }
  
  .container {
    display: flex;
  }
  
  .left,
  .right {
    font-family: 'Times New Roman', Times, serif;
    font-size: 50px;
    width: 50%;
    height: 100%;
   
  }
  
  .right a{
     text-decoration: none;
     color: black;
  }
  
  .left {
    background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
    background-size: cover;
  }
  
  .left, .right {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .left {
    color: white;
  }

  .clickable {
    cursor: pointer;
    text-decoration: none;
    color: white;
  }
  #model{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.option{
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  cursor: pointer;
}

.option a {
text-decoration: none;
color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/src/styles/pages/menu2.css">
    <title>menu</title>
</head>
<body>
    <div class="container">
        <div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div>
        <div class="right" id='us'><a href="#">us</a></div>
   </div>
   <div id="model">
     <div class="option"><a href="">About</a></div>
     <div class="option"><a href="#">News</a></div>
     <div class="option"><a href="#">Contact</a></div>
   </div>

</body>
<script>
const $us = document.getElementById('us');
const $model = document.getElementById('model');
$us.onclick = function(){
$model.style.display = 'flex';
}

$model.onclick = function(){
    this.style.display = 'none';
}

</script>

</html>

0

264

Create a menu from a modal

1 Respuestas

0

Encuentra empleos remotos

Andres GPT