Fullscreen Menu Background Color Change

Developer
Anton Petrov
Size
2,873 Kb
Views
60,720
  1. Fullscreen Menu Background Color Change Previews
  2. Fullscreen Menu Background Color Change HTML Codes
  3. Fullscreen Menu Background Color Change CSS Codes
  4. Fullscreen Menu Background Color Change JS Codes

How do I make an fullscreen menu background color change?

Colorful fullscreen CSS3 and jQuery menu.. What is a fullscreen menu background color change? How do you make a fullscreen menu background color change? This script and codes were developed by Anton Petrov on 27 August 2022, Saturday.

Fullscreen Menu Background Color Change Previews
IQ Test

Fullscreen Menu Background Color Change - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fullscreen Menu Background Color Change</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<ul class="menu">	<li><span>Welcome</span></li>	<li><span>About Us</span></li>	<li><span>What we do</span></li>	<li><span>Our portfolio</span></li>	<li><span>Contact us</span></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fullscreen Menu Background Color Change - Script Codes CSS Codes

* { transition: all 300ms ease-out;
}
body.light { background-color: #EEE;
}
body.red { background-color: #FF7B4F;
}
body.blue { background-color: #51A8FF;
}
body.orange { background-color: #FF9B6A;
}
body.green { background-color: #8DC783;
}
body.pink { background-color: #FF91C8;
}
.red ul.menu li,
.blue ul.menu li,
.orange ul.menu li,
.green ul.menu li,
.pink ul.menu li { opacity: .2; color: white !important;
}
.red ul.menu li:hover,
.blue ul.menu li:hover,
.orange ul.menu li:hover,
.green ul.menu li:hover,
.pink ul.menu li:hover { color: white !important; opacity: 1;
}
body ul.menu { position: absolute; height: 250px; top: 50%; margin-top: -125px; width: auto; margin-left: 50px;
}
body ul.menu li { list-style-type: none; line-height: 50px; font-family: 'Raleway', sans-serif; font-size: 50px;
}
body ul.menu li:nth-child(1) { color: #FF7B4F;
}
body ul.menu li:nth-child(2) { color: #51A8FF;
}
body ul.menu li:nth-child(3) { color: #FF9B6A;
}
body ul.menu li:nth-child(4) { color: #8DC783;
}
body ul.menu li:nth-child(5) { color: #FF91C8;
}
body ul.menu li:hover { cursor: pointer;
}

Fullscreen Menu Background Color Change - Script Codes JS Codes

$(document).ready(function(){	$('body').addClass('light'); $('ul.menu li:nth-child(1)').mouseover(function(){	$('body').addClass('red').removeClass('light');	}); $('ul.menu li:nth-child(1)').mouseout(function(){	$('body').addClass('light').removeClass('red');	}); $('ul.menu li:nth-child(2)').mouseover(function(){	$('body').addClass('blue').removeClass('light');	}); $('ul.menu li:nth-child(2)').mouseout(function(){	$('body').addClass('light').removeClass('blue');	}); $('ul.menu li:nth-child(3)').mouseover(function(){	$('body').addClass('orange').removeClass('light');	}); $('ul.menu li:nth-child(3)').mouseout(function(){	$('body').addClass('light').removeClass('orange');	}); $('ul.menu li:nth-child(4)').mouseover(function(){	$('body').addClass('green').removeClass('light');	}); $('ul.menu li:nth-child(4)').mouseout(function(){	$('body').addClass('light').removeClass('green');	}); $('ul.menu li:nth-child(5)').mouseover(function(){	$('body').addClass('pink').removeClass('light');	}); $('ul.menu li:nth-child(5)').mouseout(function(){	$('body').addClass('light').removeClass('pink');	});
})
Fullscreen Menu Background Color Change - Script Codes
Fullscreen Menu Background Color Change - Script Codes
Home Page Home
Developer Anton Petrov
Username apetrov
Uploaded August 27, 2022
Rating 4
Size 2,873 Kb
Views 60,720
Do you need developer help for Fullscreen Menu Background Color Change?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Petrov (apetrov) Script Codes
Name
Material login screen with background image
Gradient Text with CSS
CSS Fullscreen Minimal Menu
A Pen by Anton Petrov
Basic 3D Fullscreen Transition
Social media minimal icons
Heartbeat
SVG menu
Interactive map with SVG
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!