0

учусь css/html, скопировал код адаптивного меню с одного сайта.

.topnav {
    background-color: #333;
    overflow: hidden;
}


.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
}


.topnav a:hover {
    background-color: #ddd;
    color: black;
}


.active {
    background-color: #4CAF50;
    color: white;
}


.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/styles/menu.css">
    <link rel="stylesheet" href="src/styles/fonts.css">
    <script src="src/script.js"></script>
    <meta charset="UTF-8">
    <title>Главная страница</title>
</head>

<body>
    <header>
        <div class="topnav" id="myTopnav">
            <a href="#home" class="active">Главная</a>
            <a href="#prod">Товар</a>
            <a href="#pref">Преимущества</a>
            <a href="#contacts">Где купить?</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </header>
</body>
   <div>
 
</html>

Я хочу чтобы при нажатии на любой из раделов отображалось нахождение в этом разделе, как можно это реализовать?

JavaScript code:

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
5
  • Учитывать переход по страницам?
    – De.Minov
    8 авг 2021 в 16:41
  • @De.Minov да. Я хочу лендинг сделать и при нажатии на меню будет перекидывать на якори внутри страницы, но чтобы выбор сохранялся и отображался, а меню скрывалось
    – David
    8 авг 2021 в 16:43
  • 1
    Можно вместе с нажатием на ссылку присвоить ей css-класс (.active). Этот класс будет отвечать за видимость данного пункта, когда остальные скрыты. 8 авг 2021 в 16:49
  • @AlexeyVladimirov это же в js, верно?
    – David
    8 авг 2021 в 16:57
  • 1
    @David, js нужен для добавления/удаления css-классов по тому или иному событию. А css-классы уже отвечают за стиль отображения и видимость элементов. 8 авг 2021 в 17:05

1 ответ 1

0

.topnav {
    background-color: #333;
    overflow: hidden;
}
#home{height:200px;background:blue;color:white;}
#prod{height:200px;background:white;color:black;}
#pref{height:200px;background:black;color:white;}
#contacts{height:200px;background:green;color:white;}


.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
}


.topnav a:hover {
    background-color: #ddd;
    color: black;
}


.active {
    background-color: #4CAF50;
    color: white;
}


.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/styles/menu.css">
    <link rel="stylesheet" href="src/styles/fonts.css">
    <script src="src/script.js"></script>
    <meta charset="UTF-8">
    <title>Главная страница</title>
</head>

<body>
    <header>
        <div class="topnav" id="myTopnav">
            <a href="#home" class="active">Главная</a>
            <a href="#prod">Товар</a>
            <a href="#pref">Преимущества</a>
            <a href="#contacts">Где купить?</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </header>
    <div class="container">
    <div id="home">home</div>
    <div id="prod">prod</div>
     <div id="pref">pref</div>
      <div id="contacts">contacts</div>
    </div>
</body>
   <div>
 
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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