Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Нужна помощь в создании меню


Recommended Posts

При создании макета мы не думали что нам придется использовать JS, и теперь мы не знаем что делать. Нам надо чтоб на 2 блоке при нажатии на вариант* у нас менялись PDF файлы. Но как оказалось без JS это не сделать, а с JS мы не знакомы.

<!DOCTYPE html>
<html lang="ru">
<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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected];600;900&display=swap" rel="stylesheet">
    <script src="Untitled-1.js"></script>
    <title>Подготовка к ОГЭ</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header center" id="header">
        <ul class="menu">
            <li><a class="menu__link" href="#items">Предметы</a></li>
            <li><a class="menu__link" href="#maths">Математика</a></li>
            <li><a class="menu__link" href="#informatics">Информатика</a></li>
            <li><a class="menu__link" href="#physics">Физика</a></li>
        </ul>      
    </div>
    <div class="top center">
        <h1 class="heading__top" id="items">Подготовка к экзаменам</h1>
        <div class="items__top">
            <div class="maths__top">
                <div class="maths__photo"><a href="#items__maths"><img src="img/maths.svg" alt="maths__photo"></a></div>
                <div class="heading__maths">
                    <div class="heading__maths__text">
                        <h4 class="heading1__top">Математика</h4>
                    </div>    
                </div>
            </div>
            <div class="informatics__top">
                <div class="informatics__photo"><a href="#items__informatics"><img src="img/informatics.svg" alt="informatics__photo"></a></div>
                <div class="heading__informatics">
                    <div class="heading__informatics__text">
                        <h4 class="heading2__top">Информатика</h4>
                    </div>
                </div>    
            </div>
            <div class="physics__top">
                <div class="physics__photo"><a href="#items__physics"><img src="img/physics.svg" alt="physics__photo"></a></div>
                <div class="heading__physics">
                    <div class="heading__physics__text">
                        <h4 class="heading3__top">Физика</h4>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="maths center">
            <div class="list__maths">
                <ul class="list__maths__text">
                    <h2 class="heading__maths1" id="maths" id="items__maths">Математика</h2>
                    <li class="listt__maths"><a id="var1">>Вариант 1</a></li>
                    <li class="listt__maths">Вариант 2</li>
                    <li class="listt__maths">Вариант 3</li>
                    <li class="listt__maths">Вариант 4</li>
                    <li class="listt__maths">Вариант 5</li>
                    <li class="listt__maths">Вариант 6</li>
                    <li class="listt__maths">Вариант 7</li>
                    <li class="listt__maths">Вариант 8</li>
                    <li class="listt__maths">Демоверсия</li>
                    <li class="listt__maths">Спецификатор</li>
                    <li class="listt__maths">Кодификатор</li>
                    <li class="listt__maths">Справочный материал</li>
                </ul>
            </div>
        <div class="materials__maths">
            <iframe class="options1" src="https://drive.google.com/file/d/12suI88_guQ7dlRkPoGgJfdM7KmNsq0yA/preview" allow="autoplay"></iframe>
            <!-- <iframe class="options2" src="https://vpr-ege.ru/images/oge/100ballov-oge22-ma-var2.pdf" allow="autoplay"></iframe> -->
        </div>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    }
   body {
      font-family: 'Montserrat', sans-serif;
    }
   img {
       max-width: 100%;
    }
   .center {
      padding-left: calc(50% - 695px);
      padding-right: calc(50% - 695px);
    }
   a {
      text-decoration: none;
      }
    .header {
      background-color: #53C6CD;;
      height: 53px;  
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
    }
    .menu {
      list-style-type: none;
      display: flex;
      gap: 50px;
    }
    .menu__link {
      font-style: normal;
      font-weight: 500;
      font-size: 18px;
      line-height: 22px;
      display: flex;
      align-items: center;
      color: #FFFFFF;
    }
    .top {
      background-color: #75D4DA;
      min-height: 1080px;
      padding-top: 42px;
      padding-bottom: 107px;
    }
    .heading__top {
      font-style: normal;
      font-weight: 900;
      font-size: 96px;
      line-height: 117px;
      color: #FFFFFF;
    }
   .items__top {
      gap: 127px;
      margin-top: 72px; 
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
   }
   .maths__top {
      width: 364px;
      background-color: #77CFE2;
      height: 706px;      
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      border-radius: 12px;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
      margin-top: 72px;
     
   }
   .maths__photo {
      margin-top: 171px;
      display: flex;
      align-items: center;
   }
   .heading__maths {
      display: flex;
      background: #75CADD;
      height: 155px;
      width: 100%;
      justify-content: center;
      margin-top: 200px;
   }
   .heading__maths__text{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
   }
   .heading1__top {
      font-weight: 600;
      font-size: 36px;
      line-height: 44px;
      display: flex;
      align-items: center;
      text-align: center; 
      color: #FFFFFF;
   }
    
    .informatics__top {
     width: 364px;
     background-color: #77CFE2;
     height: 706px;      
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     border-radius: 12px;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
     margin-top: 72px;
   }
    .informatics__photo {
     margin-top: 171px;
     display: flex;
     align-items: center;
   }
    .heading__informatics {
     display: flex;
     background: #75CADD;
     height: 155px;
     width: 100%;
     justify-content: center;
     margin-top: 200px;
   }
   .heading__informatics__text{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
   }
    .heading2__top {
     font-weight: 600;
     font-size: 36px;
     line-height: 44px;
     display: flex;
     align-items: center;
     text-align: center; 
     color: #FFFFFF;
   }
   .physics__top {
    width: 364px;
    background-color: #77CFE2;
    height: 706px;      
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
    margin-top: 72px;
  }
   .physics__photo {
    margin-top: 171px;
    display: flex;
    align-items: center;
  }
   .heading__physics {
    display: flex;
    background: #75CADD;
    height: 155px;
    width: 100%;
    justify-content: center;
    margin-top: 200px;
  }
  .heading__physics__text{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
   .heading3__top {
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    display: flex;
    align-items: center;
    text-align: center; 
    color: #FFFFFF;
  }
  .maths {
    background-color: #7BDDE3;
    min-height: 1080px;
    padding-top: 36px;
    padding-bottom: 36px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .heading__maths1 {
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 59px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
  }
  .list__maths__text{
    margin-top: 61px;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 29px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 35px;
    color: #FFFFFF;
    
  }
  .options1 {
    height: 1008px;
    width: 857px;
  }
  .options2 {
    height: 1008px;
    width: 857px;
  }

  .materials__maths{
    background-color: #75D4DA;
  }

 

Link to comment
Share on other sites


01.03.2022 в 19:02, dkuzzm сказал:

а с JS мы не знакомы.

 

в сети полно примеров на всякие разные темы. неужели лень такая поискать. если не знакомы то учим, не хотим учить - тогда идем и заказываем правки.

А вот если делаем по примерам и не получается что то вот тогда обращаемся сюда. вы же даже не посмотрели примеры и не попытались что то вообще сделать

Link to comment
Share on other sites

01.03.2022 в 22:51, buslikdrev сказал:

Он и разместил в разделе услуг.

 

тогда извините если что не так сказал, не заметил что в разделе услуг размещено

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.