Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

html - How I can hide my menu when hamburger button isn't checked?

0 votes
179 views
in Technique[技术] by (71.8m points)

html - How I can hide my menu when hamburger button isn't checked?

I have some problems with my code, which I can't get fixed.

  1. I want to make my navbar hidden (by opacity: 0 or width: 0) when hamburger button isn't checked, #menuToggle input:checked ~ nav { opacity: 1; } But it doesn't work.
  2. Why hover effect on prof.box doesn't work? .prof-box:hover ~ .btn-1, .prof-box:hover ~ h1 { color: rgb(250, 3, 3); }

html {
    background: url(images/pier-5832800.jpg) no-repeat center fixed;
    background-size: 2000px 1000px;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menuToggle {
    top: 10px;
    right: 10px;
    overflow: hidden;
    position: absolute;
    width: 35px;
    height: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 5px rgba(14, 13, 13, 0.7);
    background: rgba(14, 13, 13, 0.7);
}
#menuToggle input {
    display: flex;
    width: 35px;
    height: 35px;
    position: absolute;
    cursor: pointer;
    opacity: 0; /* hide input */
    z-index: 1; /* top of the menu */
}
#menuToggle span{
    width: 19px;
    height: 1px;
    margin: 2px;
    background-color: rgb(250, 249, 249);
    transition: all .5s cubic-bezier(.08,.81,.87,.71);
}
#span1 {
    transform-origin: 4px 0px;
}
#span3 {
    transform-origin: bottom right;
}
#menuToggle input:checked ~ #span1 {
    background-color:  rgb(250, 3, 3);
    transform: rotate(45deg) translate(3px);
}
#menuToggle input:checked ~ #span2 {
    background-color:  rgb(250, 3, 3);
    transform: rotate(495deg) translate(1px);   
}
#menuToggle input:checked ~ #span3 {
    background-color:  rgb(250, 3, 3);
    transform: rotate(45deg);
    opacity: 0;
}
#menuToggle input:checked ~ nav {
  opacity: 1;
}
.prof-box:hover ~ .btn-1,
.prof-box:hover ~ h1 {
    color: rgb(250, 3, 3);
}
nav {
    opacity: 0;
    width: 230px;
    height: 35px;
    position: absolute;
    right: 49px;
    top: 10px;
    background: rgba(14, 13, 13, 0.7);
    overflow: hidden;
    transition: 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(14, 13, 13, 0.7);
}
.nav-menu {
    width: 700;
    float: right;
}
.nav-menu ul li {
    list-style: none;
    display: inline-block;
}
.nav-menu ul li a {
    text-decoration: none;
    color: white;
    font-family: 'Poiret One', cursive;
    line-height: 35px;
    margin: 3px;
}
.prof-box {
    width: 500px;
    height: 550px;
    background: rgba(14, 13, 13, 0.7);
    padding: 40px;
    color: rgb(255, 255, 255);
    margin: 0 auto;
    margin-top: 200px;
    text-align: center;
}
.prof-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-width: 4px;
}
h1 {
    font-weight: 100;
    letter-spacing: 6;
    font-size: 60px;
    font-family: 'Arista Signature';
    color: rgb(255, 255, 255);
}
.dev {
    margin-top: -8px;
    font-weight: 1;
    font-size: 25px;
    letter-spacing: 1;
    font-family: 'Poiret One', cursive;
    color: rgb(255, 255, 255);
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap');
p {
    font-weight: 100;
    font-size: 15px;
    letter-spacing: 4;
    font-family: 'Poiret One', cursive;
    color:rgb(255, 255, 255);
}
.social-icons {
    margin-top: 15px;
    font-size: 25px;
}
.social-icons a {
    color: white;
}
.social-icons a:hover {
    color: black;
}
.btn-1 {
    margin-top: -40px;
    color:rgb(255, 255, 255);
    font-weight: 100;
    font-family: 'Arista Signature';
    letter-spacing: 4;
    font-size: 50px;
    line-height: 80px;
    cursor: pointer;
    border-radius: 30px;
    border: 1px solid rgb(14, 13, 13);
    box-shadow: 0 0 5px  rgb(14, 13, 13, 0.7);
    transition: all 0.3s ease;
}
.btn-1:hover, h1:hover {
    color: rgb(250, 3, 3);
}
#menuToggle input:hover ~ #span1,
#menuToggle input:hover ~ #span2,
#menuToggle input:hover ~ #span3 {
     background-color:  rgb(250, 3, 3);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
</head>
<body>
    <div id="menuToggle">
        <input type="checkbox">
        <span id="span1"></span>
        <span id="span2"></span>
        <span id="span3"></span>
    </div>
    <nav class="nav-menu">
        <div>
            <ul>
                <li><a href="#">ABOUT</li>
                <li><a href="#">PROJECTS</li>
                <li><a href="#">CONTACT</li>
            </ul>
        </div>
    </nav>
    <div class="prof-box">
        <img src="images/photo_2021-01-18_08-08-47.jpg" class="prof-pic">
        <h1>Tatyana Rusetskaya</h1>
        <p class="dev"> Front-end Developer </p>
        <p>I'm 22 years old front-end developer based in Ukraine, Kiev. Unfortunately, I hadn't have any professional experience in this field yet. But I have some projects, which were written in HTML, CSS and JavaScript. You can see them on this page.</p>
        <a href="#" class="btn-1">More About Me</a>
        <div class="social-icons">
            <a href="https://www.facebook.com/profile.php?id=100014756447608" target="_blank"><i class="fab fa-facebook"></i></a>
            <a href="https://www.instagram.com/ta_kotoraya_ta/?hl=en" target="_blank"><i class="fab fa-instagram-square"></i></a>
            <a href="https://www.linkedin.com/in/tata-rusetskaya-5bb2b41b6/" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="https://www.t.me/ta_kotoraya_ta" target="_blank"><i class="fab fa-telegram-plane"></i></a>
        </div>
    </div>
</body>

</html>
question from:https://stackoverflow.com/questions/65862065/how-i-can-hide-my-menu-when-hamburger-button-isnt-checked

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The selector #menuToggle input:checked ~ nav { opacity: 1; } will not work because nav element is not sibling of input, so the solution u need to move element nav inside menuToggle and change the selector #menuToggle input:checked ~ nav to input:checked ~ nav.

input:checked ~ nav {
  opacity: 1;
}


html {
    background: url(images/pier-5832800.jpg) no-repeat center fixed;
    background-size: 2000px 1000px;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menuToggle {
    top: 10px;
    right: 10px;
    position: absolute;
    width: 35px;
    height: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 5px rgba(14, 13, 13, 0.7);
    background: rgba(14, 13, 13, 0.7);
}
#menuToggle input {
    display: flex;
    width: 35px;
    height: 35px;
    position: absolute;
    cursor: pointer;
    opacity: 0; /* hide input */
    z-index: 1; /* top of the menu */
}
#menuToggle span{
    width: 19px;
    height: 1px;
    margin: 2px;
    background-color: rgb(250, 249, 249);
    transition: all .5s cubic-bezier(.08,.81,.87,.71);
}
#span1 {
    transform-origin: 4px 0px;
}
#span3 {
    transform-origin: bottom right;
}
#menuToggle input:checked ~ #span1 {
    background-color:  rgb(250, 3, 3);
    transform: rotate(45deg) translate(3px);
}
#menuToggle input:checked ~ #span2 {
    background-color:  rgb(250, 3, 3);
    transform: rotate(495deg) translate(1px);   
}
#menuToggle input:checked ~ #span3 {
    background-color:  rgb(250, 3, 3);
    transform: rotate(45deg);
    opacity: 0;
}
input:checked ~ nav {
  opacity: 1;
}
.prof-box:hover ~ .btn-1,
.prof-box:hover ~ h1 {
    color: rgb(250, 3, 3);
}
nav {
    opacity: 0;
    width: 230px;
    height: 35px;
    position: absolute;
    right: 49px;
    top: 10px;
    background: rgba(14, 13, 13, 0.7);
    overflow: hidden;
    transition: 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(14, 13, 13, 0.7);
}
.nav-menu {
    width: 700;
    float: right;
}
.nav-menu ul li {
    list-style: none;
    display: inline-block;
}
.nav-menu ul li a {
    text-decoration: none;
    color: white;
    font-family: 'Poiret One', cursive;
    line-height: 35px;
    margin: 3px;
}
.prof-box {
    width: 500px;
    height: 550px;
    background: rgba(14, 13, 13, 0.7);
    padding: 40px;
    color: rgb(255, 255, 255);
    margin: 0 auto;
    margin-top: 200px;
    text-align: center;
}
.prof-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-width: 4px;
}
h1 {
    font-weight: 100;
    letter-spacing: 6;
    font-size: 60px;
    font-family: 'Arista Signature';
    color: rgb(255, 255, 255);
}
.dev {
    margin-top: -8px;
    font-weight: 1;
    font-size: 25px;
    letter-spacing: 1;
    font-family: 'Poiret One', cursive;
    color: rgb(255, 255, 255);
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap');
p {
    font-weight: 100;
    font-size: 15px;
    letter-spacing: 4;
    font-family: 'Poiret One', cursive;
    color:rgb(255, 255, 255);
}
.social-icons {
    margin-top: 15px;
    font-size: 25px;
}
.social-icons a {
    color: white;
}
.social-icons a:hover {
    color: black;
}
.btn-1 {
    margin-top: -40px;
    color:rgb(255, 255, 255);
    font-weight: 100;
    font-family: 'Arista Signature';
    letter-spacing: 4;
    font-size: 50px;
    line-height: 80px;
    cursor: pointer;
    border-radius: 30px;
    border: 1px solid rgb(14, 13, 13);
    box-shadow: 0 0 5px  rgb(14, 13, 13, 0.7);
    transition: all 0.3s ease;
}
.btn-1:hover, h1:hover {
    color: rgb(250, 3, 3);
}
#menuToggle input:hover ~ #span1,
#menuToggle input:hover ~ #span2,
#menuToggle input:hover ~ #span3 {
     background-color:  rgb(250, 3, 3);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
</head>
<body>
    <div id="menuToggle">
        <input type="checkbox">
        <span id="span1"></span>
        <span id="span2"></span>
        <span id="span3"></span>
        <nav class="nav-menu">
          <div>
              <ul>
                  <li><a href="#">ABOUT</li>
                  <li><a href="#">PROJECTS</li>
                  <li><a href="#">CONTACT</li>
              </ul>
          </div>
        </nav>
    </div>
    
    <div class="prof-box">
        <img src="images/photo_2021-01-18_08-08-47.jpg" class="prof-pic">
        <h1>Tatyana Rusetskaya</h1>
        <p class="dev"> Front-end Developer </p>
        <p>I'm 22 years old front-end developer based in Ukraine, Kiev. Unfortunately, I hadn't have any professional experience in this field yet. But I have some projects, which were written in HTML, CSS and JavaScript. You can see them on this page.</p>
        <a href="#" class="btn-1">More About Me</a>
        <div class="social-icons">
            <a href="https://www.facebook.com/profile.php?id=100014756447608" target="_blank"><i class="fab fa-facebook"></i></a>
            <a href="https://www.instagram.com/ta_kotoraya_ta/?hl=en" target="_blank"><i class="fab fa-instagram-square"></i></a>
            <a href="https://www.linkedin.com/in/tata-rusetskaya-5bb2b41b6/" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="https://www.t.me/ta_kotoraya_ta" target="_blank"><i class="fab fa-telegram-plane"></i></a>
        </div>
    </div>
</body>

</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

57.0k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...