+ Ответить в теме
Показано с 1 по 2 из 2

Тема: Не работает скрипт для меню

  1. #1
    Новичок Alexaaaaa на пути к лучшему Аватар для Alexaaaaa
    Регистрация
    08.11.2019
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Не работает скрипт для меню

    Очень простой код для JS по какой то причине не работает, по идее, должно выскакивать меню при нажатии кнопки, по факту - ничего не происходит.


    JS
    menu.onclick = function myFunction() {
    var x = document.getElementByID('mytopnav');

    if(x.className === "topnav"){
    x.className += " responsive";
    }
    else{
    x.className = "topnav";
    }
    }


    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>MyCompany</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    </head>
    <body>
    <header>
    <div class="header-logo">MyCompany</div>
    <nav>
    <div class="topnav" id="mytopnav">
    <a href="#">HOME</a>
    <a href="#">ABOUT</a>
    <a href="#">SERVICES</a>
    <a href="#">PARTFOLIO</a>
    <a href="#">TESTIMONIALS</a>
    <a href="#">CONTACT</a>
    <a href="#" id="menu" class="icon" >☰</a>
    </div>
    </nav>
    </header>


    <script src="script.js"></script>
    </body>
    </html>



    CSS
    *{
    margin: 0;
    padding: 0;
    }

    a{
    text-decoration: none;
    }

    li{
    list-style: none;
    }

    body{
    font-family: 'Open Sans', sans-serif ;
    }

    header{
    width: 100%;
    background:#000;
    display: flex;
    }

    .header-logo{
    text-transform: uppercase;
    color:#FFF;
    font-weight: 800;
    font-size:24px;
    cursor:pointer;
    margin-top:56px;
    margin-left:12%;
    }

    nav{
    margin-top:56px;
    margin-left:29%;
    }

    .topnav a{
    color:white;
    text-align: center;
    padding:12px 16px;
    font-size:14px;
    font-weight: bold;
    }

    .topnav a:hover{
    border-bottom: 3px solid #fcac45;
    }

    .topnav .icon{
    display:none;
    }

    @media screen and (max-width: 1300px){

    nav{
    margin-left:20%;
    }
    }

    @media screen and (max-width: 1105px){
    nav{
    margin-left:10%;
    }
    }

    @media screen and (max-width: 1010px){
    .topnav a {
    display:none;

    }

    .topnav a.icon{

    float:right;
    margin-top:-17px;
    display:block;
    color:white;
    font-size: 25px;
    }

    nav{
    width: 100%;
    }

    .topnav.responsive{
    position:relative;
    top:50px;
    left:-200px;
    }

    header .topnav.responsive{
    height: 340px;
    }

    .topnav.responsive a.icon{
    position:absolute;
    top:-50px;
    right:-200px;
    }

    .topnav.responsive a{
    float:none;
    display: block;
    text-align:left;

    }
    }

  2. #2
    Местный Degradator скоро придёт к известности Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    2,062
    Thanks
    141
    Thanked 153 Times in 153 Posts
    document.getElementByID('menu').onclick = function myFunction() {
    var x = document.getElementByID('mytopnav');

    if(x.className === "topnav"){
    x.className += " responsive";
    }
    else{
    x.className = "topnav";
    }
    }

+ Ответить в теме

Похожие темы

  1. Ответов: 17
    Последнее сообщение: 15.12.2011, 17:09
  2. Ответов: 9
    Последнее сообщение: 02.09.2011, 17:52
  3. Ответов: 2
    Последнее сообщение: 13.06.2011, 23:29
  4. Ответов: 2
    Последнее сообщение: 12.04.2011, 16:19
  5. Ответов: 0
    Последнее сообщение: 20.04.2010, 17:41

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения