I want to create a menu where the moving background is displayed when I click on something else and the moving background is moved to that side.

I want to create a fluffy background image only in the background of the link that I clicked to activate.
I tried the label to see if I could do it only with css, and I tried to change classes with jquery, but it didn't work.

The code is as follows

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> 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>
        <ul class="flex_"id="nav_">
            <li><a href="#">top</a></li>
            <li><a href="#one">Related Articles</a></li>
            <li><a href="#two">Your Messages</a><li>
        </ul>
    </nav>
    <section id="one">
        <p> This is one</p>
    </section>
    <section id="two">
        <p> This is two</p>
    </section>
    <script>
        varlinkList=$('#navli');
// What to do when you click a list
linkList.on('click', function(){
    // Reset the class setting on the link
    linkList.removeClass('huwahuwa');
    // Add current class to the list you clicked
    $(this).addClass('huwahuwa');
});
    </script>
</body>
</html>

@ charset "utf-8";

US>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: 95%;
    margin:0 auto;
    position:fixed;
    top:0;
    left:0;
}

.flex_{
    max-width —1200px;
    width: 40%;
    margin —00 0 60%;
    height —80px;
    line-height —80px;
    display:flex;
    justify-content:space-between;
    text-decoration: none;
    list-style: none;
}

@media(max-width:959px){
    body{
        width: 100%;
    }
    .flex_{
        width: 95%;
        margin:0 auto;
    }
}

.flex_a{
    display:block;
    font-size: 1.2 rem;
    padding:0;
    margin-left —15px;
    color:#000;
    text-decoration: none;
}

.huwahuwa{
    animation —huwahuwa3s infinitease-in-out.8s alternate;
    background —url(icon.png) no-repeat center center /60px auto;
    display:inline-block;
    transition —1.5ase-in-out;
    width: 100px;
    height —100px;
    margin-left: -100px;
    z-index:-99;
}

@keyframeshuwahuwa{
    0%{
        transform —translate(0,0)rotate(-7deg);
    }
    50%{
        transform —translate(0,-7px)rotate(0deg);
    }
    100%{
        transform —translate(0,0)rotate(7deg);
    }
}

.huwahuwa2{
    animation —huwahuwa 2.7s infinite ease-in-out.65s alternate;
    background —url(icon.png) no-repeat center center /60px auto;
    display:inline-block;
    transition —1.5ase-in-out;
    width: 100px;
    height —100px;
    margin-left: -100px;
    z-index:-99;
}

@keyframeshuwahuwa2{
    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;
}

html jquery css

2022-09-29 22:35

1 Answers

"What does ""fluffy background image"" look like?"
I didn't really understand because the finished image was ambiguous.

"However, I think the reason why jQuery doesn't work is because it says ""nav_""."
Nav should work properly.

var linkList=$('#navli');
// What to do when you click a list
linkList.on('click', function(){
    // Reset the class setting on the link
    $("section").removeClass('huwahuwa');
    $(this).addClass('huwahuwa');
});

@charset "utf-8";

US>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: 95%;
    margin:0 auto;
    position:fixed;
    top:0;
    left:0;
}

.flex_{
    max-width —1200px;
    width: 40%;
    margin —00 0 60%;
    height —80px;
    line-height —80px;
    display:flex;
    justify-content:space-between;
    text-decoration: none;
    list-style: none;
}

@media(max-width:959px){
    body{
        width: 100%;
    }
    .flex_{
        width: 95%;
        margin:0 auto;
    }
}

.flex_a{
    display:block;
    font-size: 1.2 rem;
    padding:0;
    margin-left —15px;
    color:#000;
    text-decoration: none;
}

.huwahuwa{
    animation —huwahuwa3s infinitease-in-out.8s alternate;
    background —url(icon.png) no-repeat center center /60px auto;
    display:inline-block;
    transition —1.5ase-in-out;
    width: 100px;
    height —100px;
    margin-left: -100px;
    z-index:-99;
}

@keyframeshuwahuwa{
    0%{
        transform —translate(0,0)rotate(-7deg);
    }
    50%{
        transform —translate(0,-7px)rotate(0deg);
    }
    100%{
        transform —translate(0,0)rotate(7deg);
    }
}

.huwahuwa2{
    animation —huwahuwa 2.7s infinite ease-in-out.65s alternate;
    background —url(icon.png) no-repeat center center /60px auto;
    display:inline-block;
    transition —1.5ase-in-out;
    width: 100px;
    height —100px;
    margin-left: -100px;
    z-index:-99;
}

@keyframeshuwahuwa2{
    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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
        <ul class="flex_"id="nav">
            <li><a href="#">top</a></li>
            <li><a href="#one">Related Articles</a></li>
            <li><a href="#two">Your Messages</a><li>
        </ul>
    </nav>
    <section id="one">
        <p> This is one</p>
    </section>
    <section id="two">
        <p> This is two</p>
    </section>

2022-09-29 22:35

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656