どのようにして、チェックボックスをクリックして戻るとクラスのクラスを変更できますか？

-1

私は応答性のメニューを作った。ハンバーガーアイコンをメニューリンクでスクロールさせたい場合は、スクロールしてスクロールすると、クリックした位置にハンバーチェリーの位置を固定する必要があります。再度クリックすると絶対位置に戻ります。どのようにして、チェックボックスをクリックして戻るとクラスのクラスを変更できますか？

iそれだけで、純粋なCSSで行うことができるならば、そのprerfect、その後、JavaScriptとSASSを試みたか、他いくつかのjavascriptは大丈夫だろう

をアイコンIDが< #menutoggleある=このポジションを行う必要があります。チェックボックスの上に固定

をクリック

#header { 
 
    transition: all 300 ms ease; 
 
    font-size: 0.9em; 
 
    font-weight: 300; 
 
    background: black; 
 
    margin: 0 auto; 
 
    padding: 2em 0 1em; 
 
    border-bottom: 4px solid red; 
 
} 
 
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
 
    #header { 
 
    padding: 1em 0; 
 
    } 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    #header { 
 
    height: 4em; 
 
    padding: 0; 
 
    } 
 
} 
 
#header a { 
 
    color: white; 
 
} 
 
#header .header-inner { 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    height: 4em; 
 
} 
 
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
 
    #header .header-inner { 
 
    max-width: 768px; 
 
    height: 3em; 
 
    } 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    #header .header-inner { 
 
    height: 4em; 
 
    padding: 0 1em 1em; 
 
    } 
 
} 
 
#header .navbar { 
 
    top: 0; 
 
    height: 100%; 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    #header .navbar { 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    } 
 
} 
 
#header .navbar .leaf { 
 
    transition: all 300ms ease; 
 
    border-radius: 20px; 
 
} 
 
#header .navbar .leaf:hover { 
 
    background: red; 
 
} 
 
#header .navbar .logo { 
 
    margin: 1em 0; 
 
    position: absolute; 
 
    right: 360px; 
 
    text-align: center; 
 
    top: -38px; 
 
    z-index: 5; 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    #header .navbar .logo { 
 
    position: absolute; 
 
    transform: translate(50%, 0px); 
 
    margin: 0 auto; 
 
    width: 60px; 
 
    height: 50px; 
 
    right: 50%; 
 
    top: 5px; 
 
    background: url("../images/crown.jpg.svg"); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    } 
 
} 
 
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
 
    #header .navbar .logo { 
 
    margin: 0.5em 0; 
 
    right: 280px; 
 
    top: -20px; 
 
    } 
 
} 
 
#header .navbar .logo img { 
 
    background-position: contain; 
 
    width: 300px; 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    #header .navbar .logo img { 
 
    width: 135px; 
 
    height: 50px; 
 
    opacity: 0; 
 
    } 
 
} 
 
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
 
    #header .navbar .logo img { 
 
    width: 225px; 
 
    } 
 
} 
 
#header .navbar .menu { 
 
    text-align: center; 
 
    margin-top: 2em; 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    #header .navbar .menu { 
 
    display: none; 
 
    } 
 
} 
 
#header .navbar .menu ul { 
 
    list-style-type: none; 
 
} 
 
#header .navbar .menu ul .video { 
 
    margin-right: 345px; 
 
} 
 
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
 
    #header .navbar .menu ul .video { 
 
    margin-right: 260px; 
 
    } 
 
} 
 
#header .navbar .menu li { 
 
    display: inline; 
 
    padding: 10px 1.2em; 
 
    margin-right: 40px; 
 
} 
 
@media only screen and (min-width: 1024px) { 
 
    #header .navbar .menu li { 
 
    padding: 10px 1.2em; 
 
    margin-right: 40px; 
 
    } 
 
} 
 
#header .navbar .menu li:last-child { 
 
    margin-right: 0px; 
 
} 
 
#header .navbar nav { 
 
    display: none; 
 
    transition: all 300ms ease; 
 
    width: 100%; 
 
    /* And let's fade it in from the left */ 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    #header .navbar nav { 
 
    display: block; 
 
    } 
 
} 
 
#header .navbar nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    transition: color 0.3s ease; 
 
} 
 
#header .navbar nav a:hover { 
 
    color: red; 
 
} 
 
#header .navbar nav #menuToggle { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 1; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    top: 16px; 
 
} 
 
#header .navbar nav #menuToggle input { 
 
    display: block; 
 
    width: 55px; 
 
    height: 32px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: -5px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    /* hide this */ 
 
    z-index: 12; 
 
    /* and place it over the hamburger */ 
 
    -webkit-touch-callout: none; 
 
} 
 
#header .navbar nav #menuToggle ul a { 
 
    width: 100; 
 
    display: block; 
 
    border-bottom: 1px solid rgba(215, 7, 120, 0.2); 
 
} 
 
#header .navbar nav #menuToggle span { 
 
    display: block; 
 
    width: 33px; 
 
    height: 4px; 
 
    margin-left: 10px; 
 
    margin-bottom: 5px; 
 
    position: relative; 
 
    background: #cdcdcd; 
 
    border-radius: 3px; 
 
    z-index: 3; 
 
    transform-origin: 4px 0px; 
 
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; 
 
} 
 
#header .navbar nav #menuToggle span:first-child { 
 
    transform-origin: 0% 0%; 
 
    margin-left: 10px; 
 
} 
 
#header .navbar nav #menuToggle span:nth-last-child(2) { 
 
    transform-origin: 0% 100%; 
 
    margin-left: 10px; 
 
} 
 
#header .navbar nav #menuToggle input:checked ~ span { 
 
    opacity: 1; 
 
    margin-left: 10px; 
 
    transform: rotate(45deg) translate(-2px, -1px); 
 
    background: red; 
 
} 
 
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(3) { 
 
    margin-left: 10px; 
 
    opacity: 0; 
 
    transform: rotate(0deg) scale(0.2, 0.2); 
 
} 
 
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(2) { 
 
    margin-left: 10px; 
 
    opacity: 1; 
 
    transform: rotate(-45deg) translate(0, -1px); 
 
} 
 
#header .navbar nav #menu { 
 
    position: absolute; 
 
    width: 100%; 
 
    padding: 50px; 
 
    height: 100vh; 
 
    top: 0; 
 
    position: fixed; 
 
    background: black; 
 
    list-style-type: none; 
 
    -webkit-font-smoothing: antialiased; 
 
    /* to stop flickering of text in safari */ 
 
    transform-origin: 0% 0%; 
 
    transform: translate(-100%, 0); 
 
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); 
 
} 
 
#header .navbar nav #menu li { 
 
    padding: 10px 0; 
 
    font-size: 22px; 
 
} 
 
#header .navbar nav #menuToggle input:checked ~ ul { 
 
    transform: scale(1, 1); 
 
    opacity: 1; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 

 
.blok { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background: blue; 
 
}

<body> 
 
    <section id="home"> 
 
    <div id="header"> 
 
     <div class="header-inner"> 
 
     <div class="navbar"> 
 
      <div class="logo"> 
 
      <img src="" /> 
 
      </div> 
 
      <div class="menu"> 
 
      <ul class="menu"> 
 
       <li class="leaf"><a title="" href="/photo">Home</a></li> 
 
       <li class="leaf video"><a title="" href="/video">About</a></li> 
 
       <li class="leaf"><a title="" href="/music">Menu</a></li> 
 
       <li class="leaf"><a title="" href="/forum">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
      <nav role="navigation"> 
 
      <div id="menuToggle"> 
 
       <input type="checkbox" /> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
       <ul id="menu"> 
 
       <a href="#"> 
 
        <li>Home</li> 
 
       </a> 
 
       <hr class="line-menu"> 
 
       <a href="#"> 
 
        <li>About</li> 
 
       </a> 
 
       <hr class="line-menu"> 
 
       <a href="#"> 
 
        <li>Info</li> 
 
       </a> 
 
       <hr class="line-menu"> 
 
       <a href="#"> 
 
        <li>Contact</li> 
 
       </a> 
 
       </ul> 
 
      </div> 
 
      </nav> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--end header--> 
 
    <!--begin header--> 
 
    <div class="blok"></div>

出典

2017-03-03 amir hanif

なぜここにコードを追加できませんか？ –

私は分かりませんか？どのようにリンク自体を追加する –

あなたのコードを質問に追加してください。ルールは理由によるものです。リンクの腐敗は、この質問が将来の訪問者にとって役に立たないことを意味する可能性があります。ルールを破棄するだけで、人々があなたを助けるのが難しくなります。つまり、助けや下降音が増えないということです。 –

このコードを追加します

@media only screen and(max-width: 767px) { 
    #header { 
     position: fixed; 
     top: 0; 
     width: 100% ; 
    } 
}

出典

2017-03-03 11:28:36 Aslam

http://codepen.io/hunzaboy/pen/VpaGbQ – Aslam

シンプルに見えるが動作していない –

@amirhanif、？コードペンを確認し、画面を小さくする。 – Aslam

JQ：

$(document).on('change', '.checkbox', function() { 
    $('#menutoggle').toggleClass('position-style'); 
});

CSS：

.position-style { 
    position: fixed; 
}

・ホープ、このヘルプあなた;]

//編集https://jsfiddle.net/zfo5nzf3/ トン彼のコードが働いて、あなたの "アイコンIDは＃menutoggleです。< =この位置を作る必要があります：チェックボックスをクリックすると固定されました"への '.position'クラスの追加（ルールは位置は固定です;

出典

2017-03-03 11:29:07 Paul

私はそれが動作していないことを試みた –

jqueryのlibraresをインストールしましたか？ – Paul

どのようにして、チェックボックスをクリックして戻るとクラスのクラスを変更できますか？

答えて

関連する問題