How can I construct a hover dropdown navigation for my navbar?

How can I construct a hover dropdown navigation for my navbar? - javascript

Basically, I am trying to create a navigation bar that has a dropdown hover effect. Right now, I have already created the navigation bar, but I am struggling to make the dropdown effect. I would like the dropdown effect to be shown when the user hovers over the tab in the navigation bar called "Works." When hovered, I would like there to be 2 separate tabs that the user can click to navigate to. Is there any way to do this? Here is my code. Thanks.
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
}
h3 {
color: #3F69CA
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: "Roboto";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Roboto";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Roboto";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto";
}
header ul li {
position: relative;
list-style: none;
font-family: "Roboto";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Roboto";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Roboto";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
Works
</li>
<li>
Contact
</li>
</ul>
</header>
<script src="script.js"></script>
</body>
</html>

Related

How to get card to resize when screen size is changed

I have a webpage with a navigation bar and a card with information on it. The navigation bar resizes with the screen but I'm struggling to get the card to do the same
. I've tried changing the px to rem in the CSS but that doesn't seem to work. I've also tried making a wrapper that goes around the elements within the body of the HTML but that hasn't solved the problem either.
If anyone can help me with this I'd be really appreciative.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="content-wrapper">
<div class="loader"></div>
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<main>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
box-sizing: border-box;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
margin-bottom: 1.25rem;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: auto;
}
#include media {
height: 500px;
}
.inner {
height: 100%;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
#include media {
width: 50%;
height: 100%;
}
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
#include media {
font-size: 30px;
}
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.content-wrapper {
margin-left: auto;
margin-right: auto;
width: 60rem;
}

The solution to your problem is to remove the body {...} option and then responsiveness will work for <a class="card">. Plus I added some #media(max-width: ... px) settings.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
width: 70%;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: 0 !important;
}
/*
#include media {
height: 500px;
}*/
.inner {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
/* #include media {
width: 50%;
height: 100%;
}*/
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
/*#include media {
font-size: 30px;
}*/
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.Key{
margin-top: 50px;
}
.content-wrapper {
height: 100vh;
}
#media(max-width: 1000px) {
.Key, .subtitle {
font-size: 1rem;
}
}
#media(max-width: 750px) {
.Key, .subtitle {
font-size: 0.8rem;
}
.inner {
height: 70%;
}
}
#media(max-width: 720px) {
.Key, .subtitle {
font-size: 0.6rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content-wrapper">
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>

You have the width of .inner set to 500px.
That means it will always stay 500px, independent of screen size.
Try using a percentage instead - your header has width: 100%, that's why it changes width on resize.
If you need more flexibility than that, calc() allows you to calculate a value with different units, such as width: calc(20% - 10px + 2rem)

Toggle button is not working in Javascript

I have created a Navigation bar and that contain Toggle Button .The problem I am facing is in the responsive view, after clicking on the toggle button ,the toggle button hides and shows the navigation bar.
But after hiding the toggle button I want to show another button upon which clicking the navigation bar hides.
I don't understand what I'm doing wrong and what should I do?
Here is The code is:
let menuBar=document.querySelector('#menu-bar');
navBar=document.querySelector('.navbar');
menuBar.onclick=()=>{
menuBar.classList.add('hide');
// menuBar.classList.add('fa-times');
navBar.classList.add('show');
times();
}
let icon="fas fa-times";
function times(){
if(navBar.classList.contains('show')){
menuBar.innerHTML=`<i class="${icon}"></i>`;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
header{
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow:5px 5px 7px rgba(0,0,0,0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1{
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul{
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li{
margin-right: 3rem;
}
header .navbar ul li a{
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar{
font-size: 20px;
cursor: pointer;
display:none;
}
/*media query*/
#media (max-width:768px){
html{
font-size: 55%;
}
header #menu-bar{
display: block;
}
header #menu-bar.hide{
opacity: 0;
pointer-events: none;
}
header .navbar{
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show{
opacity: 1;
}
header .navbar ul{
flex-flow: column;
padding: 2rem;
}
header .navbar ul li{
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a{
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times{
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>

Some notes:
It was not working previously because you did not remove the hide class after adding it to menuBar
You are nesting an icon in an icon - not recommended
You are performing unnecessary checks - you should just use classList.toggle() instead
Here's the working code:
let menuBar = document.querySelector('#menu-bar');
navBar = document.querySelector('.navbar');
menuBar.onclick = () => {
navBar.classList.toggle('hide');
navBar.classList.toggle('show');
times();
}
let icon = "fas fa-times";
function times() {
menuBar.classList.toggle('fa-times');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
header {
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li {
margin-right: 3rem;
}
header .navbar ul li a {
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar {
font-size: 20px;
cursor: pointer;
display: none;
}
/*media query*/
#media (max-width:768px) {
html {
font-size: 55%;
}
header #menu-bar {
display: block;
}
header #menu-bar.hide {
opacity: 0;
pointer-events: none;
}
header .navbar {
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show {
opacity: 1;
}
header .navbar ul {
flex-flow: column;
padding: 2rem;
}
header .navbar ul li {
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a {
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times {
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar hide">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>

I am trying to make the navbar sticky but my JQuery is not adding the css class that i want to add on scroll function

Below are the HTML, CSS, and JS code in which I am facing the problem, and not able to attain the functionality that I am supposed to.
//This is where I think the prblem is but I am not able to figure out how to correct it
window(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
}
})
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
position: fixed;
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
*background: #ffffff;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="src=" https://code.jquery.com/jquery-3.5.1.min.js ""></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
While scrolling down the background of the nav-bar should turn white but it's not behaving in that way it should be behaving. What would be the easier way to attain this functionality if I am not supposed to do it this way.

Is there any problem if the navbar is always fixed?
Add background-color: white; to the .navbar class and check if that is satisfactory. This allows you to make the navbar background white and the page text goes behind the navbar on scrolling. If that satisfies you, then you can even remove the jquery code.

Try like this:
//This is where I think the prblem is but I am not able to figure out how to correct it
(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
})
})();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
background: #ffffff;
position: fixed;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Fixed HTML syntax (<script> src), JavaScript syntax (})()) and CSS syntax (background without *)
In the JavaScript, remove the class again when the condition is not met
In the CSS, set position: fixed; when the .sticky class is present, not the other way around
Look at position: sticky for a pure CSS way to do this, e.g.:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
background: #ffffff;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar sticky">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>

How can I create a smooth dropdown effect for my navigation bar?

Basically, I am trying to create a navigation bar that has a smooth dropdown effect. I have already created the navigation bar, but am struggling to make the dropdown effect. I would like the dropdown effect to be shown when the user hovers over the tab in the navigation bar called "Works." When hovered, I would like there to be 2 separate tabs that the user can click to navigate. I would like the navigation bar's theme to remain consistent, such as the font, color, and scroll effect. How can I do this? Any help would be appreciated. Thanks. Here is my code.
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Hind', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #000;
}
h3 {
color: #3F69CA
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: 'Poppins', sans-serif;
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: 'Poppins', sans-serif;
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: 'Poppins', sans-serif;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
header ul li {
position: relative;
list-style: none;
font-family: 'Poppins', sans-serif;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: 'Poppins', sans-serif;
}
header ul li a:hover {
text-decoration: underline;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
font-family: 'Poppins', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Works
</li>
<li>
Contact
</li>
<li>
Test
</li>
</ul>
</header>
<script src="script.js"></script>
</body>
</html>

Try css animation. See if this helps:
https://codepen.io/vajirkar/pen/jOrZaOg
Key part of the css is:
.container {
position: relative;
overflow: hidden;
height: 200px;
border: 1px solid grey;
}
.menuPanel {
position: absolute;
width: 200px;
height: 150px;
background-color: coral;
animation: slideOut 600ms;
z-index: -10;
}
#keyframes slideOut {
0% {
top: -150px;
}
100% {
top: 0px;
}
}

How can I decrease the size of my picture and turn it into a parallax effect?

Basically, I am trying to create a webpage for Nikola Telsa. I have already made the navigation bar, but the image is very big. I would like the image to be much smaller, showing his face. I have tried adjusting the size of the width and height, but the picture does not take up the entire screen if I change the values. In addition, I would also like to turn the image into a parallax scrolling effect. Is there anyway I can change the width and height so it is smaller and make the image have a parallax effect? Any help is appreciated. Thanks. Here is my code.
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: black;
min-height: 200vh;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header.sticky{
padding: 5px 100px;
background: #fff;
}
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header ul{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li{
position: relative;
list-style: none;
}
header ul li a{
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner{
position: relative;
background: url(tesla.jpg);
background-size: cover;
width: 100%;
height: 100vh;
}
header.sticky .logo, header.sticky ul li a{
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
Logo
<ul>
<li>Home</li>
<li>Bio</li>
<li>Inventions</li>
<li>Museum</li>
<li>Quotes</li>
</ul>
</header>
<section class="banner"></section>
<script src="nav.js"></script>
</body>
</html>

window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: black;
min-height: 200vh;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header.sticky{
padding: 5px 100px;
background: #fff;
}
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header ul{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li{
position: relative;
list-style: none;
}
header ul li a{
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner{
position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/7/79/Tesla_circa_1890.jpeg) no-repeat;
//background-size: cover;
background-attachment: fixed;
width: 100%;
height: 1200px;
}
header.sticky .logo, header.sticky ul li a{
color: #000;
}
<header>
Logo
<ul>
<li>Home</li>
<li>Bio</li>
<li>Inventions</li>
<li>Museum</li>
<li>Quotes</li>
</ul>
</header>
<section class="banner"></section>
<script src="nav.js"></script>
I have added background attachment css in banner class and comment out background size cover.

Develop Reference

JavaScript is the programming language of the Web.

How can I construct a hover dropdown navigation for my navbar? - javascript

Related

How to get card to resize when screen size is changed

Toggle button is not working in Javascript

I am trying to make the navbar sticky but my JQuery is not adding the css class that i want to add on scroll function

How can I create a smooth dropdown effect for my navigation bar?

How can I decrease the size of my picture and turn it into a parallax effect?

Categories

Resources