HTML Code
<body>
<header>
<img src="./images/logo1.png" alt="">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Feedback</a></li>
<li><a href="">Contact</a></li>
</ul>
</header>
<pre>
<!-- 100 Time Press Enter. -->
</pre>
<script>
window.addEventListener('scroll', function () {
let header = document.querySelector('header');
header.classList.toggle('small-menu', window.scrollY > 100);
});
</script>
</body>
<header>
<img src="./images/logo1.png" alt="">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Feedback</a></li>
<li><a href="">Contact</a></li>
</ul>
</header>
<pre>
<!-- 100 Time Press Enter. -->
</pre>
<script>
window.addEventListener('scroll', function () {
let header = document.querySelector('header');
header.classList.toggle('small-menu', window.scrollY > 100);
});
</script>
</body>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: sans-serif;
}
header {
width: 100%;
height: 70px;
padding: 0 100px;
background-color: #868e96;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
transition: all ease-in-out 0.5s;
}
header img {
width: 120px;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
}
header ul li a {
text-decoration: none;
color: #FFF;
padding: 10px;
}
header ul li a:hover {
color: #FFDDCC;
}
header.small-menu {
background-color: rgba(206, 212, 218, 0.5);
padding: 0 90px;
height: 50px;
}
header.small-menu img {
width: 100px;
}
header.small-menu ul > li > a {
color: #000;
}
0 comments:
Post a Comment