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 that you have read and understand our privacy policy and code of conduct.

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