77792


メニューをクリックすると画像がメニュー文字の背後に出てくるものを作ったのですが、画像が出てくると同時に文字が左に押し出されてしまって不自然になってしまっています。z-indexで上下をいじってみたりしましたがよくわからず…わかる方ご教示していただけると助かります。画像が出てくるのはjQueryでクラスをつけたり消したりする処理をしています。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>タイトル</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
            <nav>
                    <div class="flex_">
                        <a href="#">top</a>
                        <div class="huwahuwa"></div>
                        <a href="#one">関連記事</a>
                        <div class="huwahuwa"></div>
                        <a href="#two">みなさんのメッセージ</a>
                        <div class="huwahuwa"></div>
                    </div>
                </nav>
        <section id="one">
            <p>ここはoneだよ</p>
        </section>
        <section id="two">
            <p>ここはtwoだよ</p>
        </section>
        <script>
    $('.flex_ a').on('click',function(){
      $('.flex_ a').removeClass('active');
      $(this).addClass('active');
    })
        </script>
    </body>
    
    @charset "utf-8";
    
    html{
        scroll-behavior: smooth;
    }
    
    body{
        width:960px;
        margin:0 auto;
        font-size: 16px;
        position: relative ;
    }
    
    a {
        -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          -ms-transition: 0.3s;
          transition: 0.3s;
      }
    
    nav{
        height:90px;
        width:90%;
        margin:0 auto;
        position: fixed;
        top:0;
        left:0;
    }
    
    .flex_{
        max-width: 1200px;
        width:46%;
        margin:0 0 0 54%;
        height:80px;
        line-height:80px;
        display: flex;
        justify-content: space-between;
    }
    
    @media(max-width: 1100px){
        body{
            width:100%;
        }
        nav{
            width:100%;
        }
        .flex_{
            width:90%;
            margin:0  auto;
            justify-content: center;
        }
    }
    
    @media(max-width: 467px){
        .flex_{
            width:90%;
            margin:0  auto;
            justify-content:flex-start;
            flex-flow: column;
            line-height:55px;
        }
    }
    
    .flex_ a{
        display: block;
        font-size:1.25rem;
        padding:0 0 0 30px;
        color:#000;
        text-decoration: none;
    }
    
    .huwahuwa{
        animation:huwahuwa 3s infinite ease-in-out .8s alternate;
        background:url(icon.png) no-repeat center center / 60px auto;
        display:inline-block;
        transition:1.5s ease-in-out;
        width:100px;
        height:100px;
        margin-left:-100px;
        z-index:-99;
    }
    .huwahuwa{
        display: none;
    }
    .active+.huwahuwa{
        display: inline-block;
    }
    
    @keyframes huwahuwa {
        0%{
            transform:translate(0,0) rotate(-7deg);
        }
        50%{
            transform:translate(0,-7px) rotate(0deg);
        }
        100%{
            transform:translate(0,0) rotate(7deg);
        }
    }
    
    .flex_ a:hover{
        opacity:0.6;
        transition: .6s;
    }
    
    #one,#two,#three{
        width:100%;
        height:600px;
    }
    #one{
        margin-top:80px;
        background:pink;
        z-index:-100;
    }
    #two{
        background:skyblue;
        z-index:-100;
    }
    
[/code]

[code]

    $('.flex_ a').on('click',function(){
      $('.flex_ a').removeClass('active');
      $(this).addClass('active');
    })
[/code]

[code]

    @charset "utf-8";
    body{
        width:960px;
        margin:0 auto;
        font-size: 16px;
        position: relative ;
    }
    
    a {
        -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          -ms-transition: 0.3s;
          transition: 0.3s;
      }
    
    nav{
        height:90px;
        width:90%;
        margin:0 auto;
        position: fixed;
        top:0;
        left:0;
    }
    
    .flex_{
        max-width: 1200px;
        width:40%;
        margin:0 0 0 60%;
        height:80px;
        line-height:80px;
        display: flex;
        position: relative;
        justify-content: space-between;
    }
    
    @media(max-width: 959px){
        body{
            width:100%;
        }
        .flex_{
            width:50%;
            margin:0  auto;
        }
    }
    
    .flex_ a{
        display: block;
        font-size:1.5rem;
        padding:0 0 0 15px;
        color:#000;
        text-decoration: none;
    }
    
    .huwahuwa{
        animation:huwahuwa 3s infinite ease-in-out .8s alternate;
        background:url(http://placehold.jp/150x150.png?text=icon.png) no-repeat center center / 60px auto;
        display:inline-block;
        transition:1.5s ease-in-out;
        width:100px;
        height:100px;
        margin-left:-100px;
        z-index:-99;
    }
    .huwahuwa{
        display: none;
    }
    .active+.huwahuwa{
        display: inline-block;
    }
    
    @keyframes huwahuwa {
        0%{
            transform:translate(0,0) rotate(-7deg);
        }
        50%{
            transform:translate(0,-7px) rotate(0deg);
        }
        100%{
            transform:translate(0,0) rotate(7deg);
        }
    }
    
    .flex_ a:hover{
        opacity:0.6;
        transition: .6s;
    }
    
    #one,#two,#three{
        width:100%;
        height:600px;
    }
    #one{
        margin-top:80px;
        background:pink;
        z-index:-100;
    }
    #two{
        background:skyblue;
        z-index:-100;
    }
    #three{
        background:green;
        z-index:-100;
    }
    
    .hidden_box {
        margin: 0;/*前後の余白*/
        padding: 0;
        position: relative;
    }
    
    /*ボタン装飾*/
    .hidden_box label {
        padding: 15px;
        cursor :pointer;
        font-size:1.5rem;
        line-height:1.5rem;
    }
    
    /*ボタンホバー時*/
    .hidden_box label:hover {
        opacity:0.6;
    }
    
    /*チェックは見えなくする*/
    .hidden_box input {
        display: none;
    }
    
    /*中身を非表示にしておく*/
    .hidden_box .hidden_show {
        height: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        transition: 0.8s;
    }
    
    /*クリックで中身表示*/
    .hidden_box input:checked ~ .hidden_show {
        padding:0;
        height: 100px;
        opacity: 1;
        position: absolute;
        top:0;
        left:0;
        z-index: -99;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <nav>
            <div class="flex_">
                <a href="#">top</a>
                <div class="huwahuwa"></div>
                <a href="#one">one</a>
                <div class="huwahuwa"></div>
                <a href="#two">two</a>
                <div class="huwahuwa"></div>
                <a href="#three">three</a>
                <div class="huwahuwa"></div>
            </div>
        </nav>
        <section id="one">
            <p>ここはoneだよ</p>
        </section>
        <section id="two">
            <p>ここはtwoだよ</p>
        </section>
        <section id="three">
            <p>ここはthreeだよ</p>
        </section>
[/code]


CC BY-SA 4.0
2021-06-25T03:06:50.627
77774
2021-06-26T04:44:23.793
2021-06-26T04:44:23.793
46944
46994
question
jquery css html5
メニューをクリックするとメニュー文字が動いてしまう


クリックした要素の右側に不自然な余白ができる原因は、

  * 画像がふわふわする要素 `div.huwahuwa` がフレックスアイテムとして認識されている。  
これは記載場所の関係で、`div.flex_`要素の子要素として、a要素と同等の兄弟要素として扱われるからです。

  * `justfy-content: space-between`が影響している。  
このCSSプロパティはフレックスアイテムの要素間に均等な空白を付与します。`div.huwahuwa`もフレックスアイテムの一要素となっているので、他のa要素と同様の余白が付与されます。  
ネガティブマージンの影響で`div.huwahuwa`は左側へ100pxずれますが、余白はそのまま残ります。

この2点が原因です。検証ツールでフレックスボックスの余白をチェックすると、クリックした要素の隣に余白の領域が2つあることが分かります。画像の斜線部分が`justfy-
content: space-between`による余白です。

[![フレックスアイテムの余白](https://i.stack.imgur.com/qpL2e.png)](https://i.stack.imgur.com/qpL2e.png)

解決方法としては、ふわふわの画像をa要素と兄弟要素になるようなdivで実装するのではなく、a要素のbefore疑似要素かafter疑似要素で作成し、フレックスアイテムの扱いから外すようにすることです。before/after疑似要素は、その要素の子要素として扱われます。  
その際、a要素には`position:relative`でスタッキングコンテキストを生成し、before/after疑似要素側は`position:absolute`と`left`,`top`
を適切な値に指定することで両者の位置関係を容易に調整することが可能です。

スニペットで再現させましたので参考にしてください。

  * `<div class="huwahuwa">`は削除
  * 回答通りのCSSを追加

[code]

    $('.flex_ a').on('click',function(){
      $('.flex_ a').removeClass('active');
      $(this).addClass('active');
    })
[/code]

[code]

    @charset "utf-8";
    body {
      width: 960px;
      margin: 0 auto;
      font-size: 16px;
      position: relative;
    }
    
    a {
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
    }
    
    nav {
      height: 90px;
      width: 90%;
      margin: 0 auto;
      position: fixed;
      top: 0;
      left: 0;
    }
    
    .flex_ {
      max-width: 1200px;
      width: 40%;
      margin: 0 0 0 60%;
      height: 80px;
      line-height: 80px;
      display: flex;
      position: relative;
      justify-content: space-between;
    }
    
    @media (max-width: 959px) {
      body {
        width: 100%;
      }
      .flex_ {
        width: 50%;
        margin: 0 auto;
      }
    }
    
    .flex_ a {
      display: block;
      font-size: 1.5rem;
      padding: 0 0 0 15px;
      color: #000;
      text-decoration: none;
    }
    
    /* 不要になったのでコメントアウト
    .huwahuwa{
        animation:huwahuwa 3s infinite ease-in-out .8s alternate;
        background:url(http://placehold.jp/150x150.png?text=icon.png) no-repeat center center / 60px auto;
        display:inline-block;
        transition:1.5s ease-in-out;
        width:100px;
        height:100px;
        margin-left:-100px;
        z-index:-99;
    }
    .huwahuwa{
        display: none;
    }
    */
    .active + .huwahuwa {
      display: inline-block;
    }
    
    @keyframes huwahuwa {
      0% {
        transform: translate(0, 0) rotate(-7deg);
      }
      50% {
        transform: translate(0, -7px) rotate(0deg);
      }
      100% {
        transform: translate(0, 0) rotate(7deg);
      }
    }
    
    .flex_ a:hover {
      opacity: 0.6;
      transition: 0.6s;
    }
    
    #one,
    #two,
    #three {
      width: 100%;
      height: 600px;
    }
    #one {
      margin-top: 80px;
      background: pink;
      z-index: -100;
    }
    #two {
      background: skyblue;
      z-index: -100;
    }
    #three {
      background: green;
      z-index: -100;
    }
    
    .hidden_box {
      margin: 0; /*前後の余白*/
      padding: 0;
      position: relative;
    }
    
    /*ボタン装飾*/
    .hidden_box label {
      padding: 15px;
      cursor: pointer;
      font-size: 1.5rem;
      line-height: 1.5rem;
    }
    
    /*ボタンホバー時*/
    .hidden_box label:hover {
      opacity: 0.6;
    }
    
    /*チェックは見えなくする*/
    .hidden_box input {
      display: none;
    }
    
    /*中身を非表示にしておく*/
    .hidden_box .hidden_show {
      height: 0;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      transition: 0.8s;
    }
    
    /*クリックで中身表示*/
    .hidden_box input:checked ~ .hidden_show {
      padding: 0;
      height: 100px;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -99;
    }
    
    .flex_ > a {
      /* クリック時のbefore疑似要素をa要素にスタッキングするため、positionをrelativeに */
      position: relative;
    }
    
    .flex_ > a.active::before {
      /* huwahuwaは疑似要素で表現。内容はほぼ従来のhuwahuwaと同じ。 */
      /* posotionをabsoluteに。配置位置を親のa要素基準とする。*/
      position: absolute;
      /* leftとtopを0にすることで親要素の左上と同一の位置に移動。調整したい場合はこの数値をいじってください */
      left: 0;
      top: 0;
      content: "";
      animation: huwahuwa 3s infinite ease-in-out 0.8s alternate;
      background: url(http://placehold.jp/150x150.png?text=icon.png) no-repeat
        center center / 60px auto;
      display: inline-block;
      transition: 1.5s ease-in-out;
      width: 100px;
      height: 100px;
      z-index: -99;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <nav>
            <div class="flex_">
                <a href="#">top</a>
                <a href="#one">one</a>
                <a href="#two">two</a>
                <a href="#three">three</a>
            </div>
        </nav>
        <section id="one">
            <p>ここはoneだよ</p>
        </section>
        <section id="two">
            <p>ここはtwoだよ</p>
        </section>
        <section id="three">
            <p>ここはthreeだよ</p>
        </section>
[/code]


CC BY-SA 4.0
2021-06-25T18:40:01.513
77792
2021-06-25T18:40:01.513
46944
77774
answer