0

введите сюда описание изображения

$(document).ready(function() {
    $('.menu_burgar').click(function(event) {
        $('.menu_burgar,menu_toggle').toggleClass('active');
    
});
});

.container {
    padding: 0 36px;
    margin: 0 auto;
    max-width: 100vw;   
  }

@media (min-width:750px){
    .container{
        max-width:738px ;
    } 
}


@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
}


@media (max-width:768px){
    .hiden-mobile{
        display: none;
    }  
}


@media (min-width: 992px) {
    .container{ 
        max-width: 970px;
    }
}

    

  
@media (min-width: 1201px) {
    .container{
        max-width: 1230px;
    } 
}
  







/*HEADER*/
 

.header{
    width: 100%;    
    background-color:white;
    z-index: 3;
}
.header .container{
    display: flex;
    align-items: center;
}

.flex-wrap{
    flex-wrap: wrap;
}

.wraper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.header-right{
    margin-left: auto;
    
}

.social-items{
   display: flex;
    gap: 43px;
    list-style-type: none;
 
}




.logo{
    margin-right:auto;
    display: block;
}



.social-button{
 
    width:36px;
    height: 36px;



}
.social-button img{
    position: relative;    
    
}


.social-button:hover{
    border: solid 3px black;
    border-radius: 15px;
    transition: 0.6s;
}

.sl-width{
    padding: 0 30px;
}

.select-lang{
    display: flex;
    height:94px ;
    width: 100%;
    padding:0 15px;
    text-align: center;
    background-color:#F6F6F6;
    font-family:Montserrat;
}

.select-lang:hover{
    background-color:var(--gray) ;
    transition:background 0.5s ease;
}






    
 .exit{
    display:block;
    color: black;
    padding:0 15px;
    height:24px;
    text-align: center;
}
 .exit:hover{
        
    background-color:var(--lightgray);
    transition:background 0.5s ease;
}


.login{
    color:black ;
}


/*SIDEBAR*/
 .side-bar{
    width: 360px;
    height: 100%;   
    background-color: white;
    padding-bottom:100px ;
    padding-top: 60px;        
} 

.side-bar__button
{
    display: flex;
    align-items: center;
    width: 100%;
    height:56px;
    padding-left: 68px;
    transition: 0.3s;
}

.side-bar__button:hover{
    background-color:var(--lightgray);
    
}


.side-bar__button .side-bar__icon{
    width: 32px;
    margin-right: 28px;

}






/*FOOTER*/

.footer{
    overflow: hidden;
    width: 100%;
    background-color:#212121;
    height:296px;
    
}
.footer .container{
    display: flex;
    overflow: hidden;
    
   
}



.fitem{
    color: white;
    padding-top:90px ;
    
    
}
.logo-2{
    padding-bottom: 25px ;
} 

.words{
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    opacity: 0.800000011920929;
}











  
*{
    padding: 0;
    margin: 0;
    border: 0;
}
*,*::before,*::after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}


html,body{
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height:1 ;
    font-size:14px ;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner{padding: 0;border: 0;}
a,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul li{list-style:none;}
li{list-style: none;}
img{vertical-align:top;}












:root {
    --gray:#e4e4e4 ;
    --lightgray:#F6F6F6;
}

:root{
    --text:<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Montserrat"/>
  ;
}




html, body {
    height: 100%;
    max-width: 1920px;
    font-family:Montserrat;
    background-color:var(--lightgray) ;
    
    }
    button {
        /* Сбрасываем дефолтные стили */
        border: none;
        outline: none;
        text-align: center;
        text-decoration: none;
        background-color:white;
        font-size: 16px;}

       

select {
    appearance: none;
}
















.menu_burgar{
display: none;
}

@media (max-width:767px){
    .menu_burgar{
        display: flex;
        position: relative;
        margin: 15px 15px;
        width: 30px;
        height: 20px;
    }

    .menu_burgar span{
        position: absolute;
        background-color:#000000;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        top: 9px;
    }
    .menu_burgar::before,
    .menu_burgar::after{
        content: '';
        background-color: #000000;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
    }

    .menu_burgar.active::before{
        transform:rotate(45deg);
    }

    .menu_burgar::before{
        top: 0;

    }
    .menu_burgar::after{
        bottom: 0;

    }
    .menu_toogle{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color:var(--lightgray);
    }

}





.button{
    height: 32px;
    width: 32px;
    
}



.button:hover{
    background-color:var(--lightgray);
    transition: 0.5s;
}
    


.container {
    padding: 0 36px;
    margin: 0 auto;
    max-width: 100vw;   
  }

@media (min-width:750px){
    .container{
        max-width:738px ;
    } 
}


@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
}


@media (max-width:768px){
    .hiden-mobile{
        display: none;
    }  
}


@media (min-width: 992px) {
    .container{ 
        max-width: 970px;
    }
}

    

  
@media (min-width: 1201px) {
    .container{
        max-width: 1230px;
    } 
}
  







/*HEADER*/
 

.header{
    width: 100%;    
    background-color:white;
    z-index: 3;
}
.header .container{
    display: flex;
    align-items: center;
}

.flex-wrap{
    flex-wrap: wrap;
}

.wraper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.header-right{
    margin-left: auto;
    
}

.social-items{
   display: flex;
    gap: 43px;
    list-style-type: none;
 
}




.logo{
    margin-right:auto;
    display: block;
}



.social-button{
 
    width:36px;
    height: 36px;



}
.social-button img{
    position: relative;    
    
}


.social-button:hover{
    border: solid 3px black;
    border-radius: 15px;
    transition: 0.6s;
}

.sl-width{
    padding: 0 30px;
}

.select-lang{
    display: flex;
    height:94px ;
    width: 100%;
    padding:0 15px;
    text-align: center;
    background-color:#F6F6F6;
    font-family:Montserrat;
}

.select-lang:hover{
    background-color:var(--gray) ;
    transition:background 0.5s ease;
}






    
 .exit{
    display:block;
    color: black;
    padding:0 15px;
    height:24px;
    text-align: center;
}
 .exit:hover{
        
    background-color:var(--lightgray);
    transition:background 0.5s ease;
}


.login{
    color:black ;
}


/*SIDEBAR*/
 .side-bar{
    width: 360px;
    height: 100%;   
    background-color: white;
    padding-bottom:100px ;
    padding-top: 60px;        
} 

.side-bar__button
{
    display: flex;
    align-items: center;
    width: 100%;
    height:56px;
    padding-left: 68px;
    transition: 0.3s;
}

.side-bar__button:hover{
    background-color:var(--lightgray);
    
}


.side-bar__button .side-bar__icon{
    width: 32px;
    margin-right: 28px;

}






/*FOOTER*/

.footer{
    overflow: hidden;
    width: 100%;
    background-color:#212121;
    height:296px;
    
}
.footer .container{
    display: flex;
    overflow: hidden;
    
   
}



.fitem{
    color: white;
    padding-top:90px ;
    
    
}
.logo-2{
    padding-bottom: 25px ;
} 

.words{
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    opacity: 0.800000011920929;
}











  
<!DOCTYPE html>
<html lang="en" lang="ua">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/global.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/burger-menu.css"/>
    <link rel="stylesheet" href="JSfile/menu-burger.js"/>
    <link rel="stylesheet" href="css/buttons.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Montserrat"/>
    <title>Ui</title>
  </head>

  <body>
    <header class="header">
      
  
<!-- бургер прав и все верх в бургер -->

<!-- зробити джс який добавляє актів клас до елемента який треба показувати в хедері
 на мобілці -->







      <div class="container flex-wrap wraper">


        <div class="menu_burgar">
                <span></span>
                <span></span>
                <span></span>
              </div>
        <div class="menu_toggle">

        </div>      



        <img class="logo" src="photo/ЛОГО.svg" />
        <ul class="social-items header-right flex-wrap">
          <li class="social-item">
            <button class="social-button">
              <img class="social-icon" src="photo/инста.svg" />
            </button>
          </li>
          <li class="social-item">
            <button class="social-button">
              <img class="social-icon" src="photo/линкедин.svg" />
            </button>
          </li>
          <li class="social-item">
            <button class="social-button">
              <img class="social-icon" src="photo/твит.svg" />
            </button>
          </li>
          <li class="social-item">
            <button class="social-button">
              <img class="social-icon" src="photo/телега.svg" />
            </button>
          </li>
          <li class="social-item">
            <button class="social-button">
              <img class="social-icon" src="photo/FaceBook.svg" />
            </button>
          </li>
        </ul>
        <div class="flex-wrap hiden-mobile sl-width">
          <select class="select-lang">
            <option value="ua">Ua</option>
            <option value="en">En</option>
          </select>
        </div>
        <div class="block">
          <button class="exit">
            <img src="photo/login.svg" />
            <a
              class="login"
              href="https://www.google.com/search?q=exit&oq=exit&aqs=chrome..69i57j0i512l9.1231346703j0j15&sourceid=chrome&ie=UTF-8"
            >
              Увійти
            </a>
          </button>
        </div>
      </div>
    </header>
    <!-- Зробити ничку сайдбару
    адаптер 
    соціали жирні лінії
     и доробити вже до кінця 
     і позвонить Тарасу -->

    <main>
      <div class="container hiden-mobile">       
           <div class="side-bar ">  
            <ul>
                  <li class="side-bar__item">
                        <button class="side-bar__button">
                          <span class="side-bar__icon"><img src="SVG/GROUP1.svg" ></span>
                          <span class="side-bar__text">Новини</span>
                        </button>
                    
                  </li>
                  <li class="side-bar__item">
                    <button class="side-bar__button">
                      <span class="side-bar__icon"><img src="SVG/Group2.svg" > </span>
                      <span class="side-bar__text">Події міста</span>
                    </button>
                    
                  </li>
                  <li class="side-bar__item">
                    <button class="side-bar__button">
                      <span class="side-bar__icon"><img src="SVG/Group3.svg" ></span>
                      <span class="side-bar__text">Веб-камери</span> 
                    </button>
                      
                    </li>
                    <li class="side-bar__item">
                      <button class="side-bar__button">
                        <span class="side-bar__icon"><img src="SVG/Group4.svg" ></span>
                        <span class="side-bar__text">Екскурсії та розваги</span>
                      </button>
                      
                    </li>
                    <li class="side-bar__item">
                      <button class="side-bar__button">
                        <span class="side-bar__icon"><img src="SVG/group5.svg" ></span>
                        <span class="side-bar__text">Транспорт Кам’янця</span>
                      </button>
                      
                    </li>
                    <li class="side-bar__item">
                      <button class="side-bar__button">
                        <span class="side-bar__icon"><img src="SVG/Group6.svg" ></span>
                        <span class="side-bar__text">Де перекусити</span>
                      </button>                     
                    </li>
                    <li class="side-bar__item">
                      <button class="side-bar__button">
                        <span class="side-bar__icon"><img src="SVG/Group7.svg" ></span>
                        <span class="side-bar__text">Де зупинитись</span>
                      </button>
                    </li>
                    <li class="side-bar__item">
                      <button class="side-bar__button">
                        <span class="side-bar__icon"><img src="SVG/Group8.svg" ></span>
                        <span class="side-bar__text">Навчальні заклади</span>
                      </button>
                      
                    </li>
              </ul>
        </div>       
      </div>
    </main>
    <footer class="footer">
      <div class="container">
        <ul class="fitem header-right">
          <li>
            <img class="logo-2" src="SVG/ЛОГО2.svg" />
          </li>
          <li class="words">
            Використання будь-яких матеріалів, розміщених на сайті, дозволяється
            за умови
          </li>
          <li class="words">
            посилання на KamPod.com. Редакція порталу може не поділяти точку
            зору авторів
          </li>
          <li class="words">
            і не несе відповідальності за авторські матеріали, за достовірність
            та зміст реклами.
          </li>
        </ul>
      </div>
    </footer>





  </body>







  





</html>

1
  • а где js код то?
    – Armen
    Commented 24 авг. 2023 в 9:05

1 ответ 1

0

Чтобы использовать какую-то библиотеку, надо её подключить.

Например, вы используете $, это jQuery, значит надо сначала подключить его. Ссылка на доки.

Сперва в конец <body> добавляем <script> с jQuery

<script
  src="https://code.jquery.com/jquery-3.7.0.min.js"
  integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
  crossorigin="anonymous"
></script>

Потом свой скрипт <script src="./JSfile/menu-burger.js"></script>

Скрипты подключаются через тег <script> в <head>, либо перед закрывающим тегом </body>

И еще .menu_burgar,menu_toggle убери запятую (такого синтаксиса нет в наименовании классов), наверное там требуется точка.

3
  • не работает и дальше
    – KIFDE
    Commented 24 авг. 2023 в 9:13
  • @KIFDE скинь снимок папок. у тебя есть папка JSfile? и где оно. и где сам js код?
    – Armen
    Commented 24 авг. 2023 в 9:15
  • @KIFDE это jquery потому и не работает, сейчас минутку.
    – Armen
    Commented 24 авг. 2023 в 9:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.