Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <canvas id="tab"></canvas>
- <h1 id="homeBtn" onclick="home()">Home</h1>
- <h1 id="marketBtn" onclick="market()">Market</h1>
- <h1 id="aboutBtn" onclick="about()">About</h1>
- <h1 id="contactsBtn" onclick="contacts()">Contacts</h1>
- <h1 id="jobsBtn" onclick="jobs()">Jobs</h1>
- <img src="https://i.ya-webdesign.com/images/3-bar-menu-png-12.png" id="menuIcon" width="60" height="50" onclick="menu()">
- <canvas id="taskbar"></canvas>
- <style>
- @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
- body {
- overflow: hidden;
- background: #282c34;
- user-select: none;
- }
- #taskbar {
- background: #0c0d0f;
- position: absolute;
- left: -250;
- bottom: 307;
- width: 250;
- transition: 1s;
- height: 481;
- }
- #tab {
- background: rgba(0, 0, 0, 0.7);
- left: 0;
- bottom: 738;
- width: 945;
- height: 50;
- position: absolute;
- }
- #homeBtn {
- font-Family: 'Roboto';
- color: #7f7f7f;
- position: absolute;
- bottom: 723;
- left: 100;
- cursor: pointer;
- transition: 0.3s;
- border-Radius: 5%;
- }
- #marketBtn {
- font-Family: 'Roboto';
- color: #7f7f7f;
- position: absolute;
- bottom: 723;
- left: 240;
- cursor: pointer;
- transition: 0.3s;
- border-Radius: 5%;
- }
- #aboutBtn {
- font-Family: 'Roboto';
- color: #7f7f7f;
- position: absolute;
- bottom: 723;
- left: 420;
- cursor: pointer;
- transition: 0.3s;
- border-Radius: 5%;
- }
- #contactsBtn {
- font-Family: 'Roboto';
- color: #7f7f7f;
- position: absolute;
- bottom: 723;
- left: 580;
- cursor: pointer;
- transition: 0.3s;
- border-Radius: 5%;
- }
- #jobsBtn {
- font-Family: 'Roboto';
- color: #7f7f7f;
- position: absolute;
- bottom: 723;
- left: 780;
- cursor: pointer;
- transition: 0.3s;
- border-Radius: 5%;
- }
- #menuIcon {
- position: absolute;
- bottom: 736;
- left: 20;
- filter: brightness(50%);
- cursor: pointer;
- transition: 1s;
- }
- #homeBtn:hover {
- color: #fff;
- }
- #marketBtn:hover {
- color: #fff;
- }
- #aboutBtn:hover {
- color: #fff;
- }
- #contactsBtn:hover {
- color: #fff;
- }
- #jobsBtn:hover {
- color: #fff;
- }
- #menuIcon:hover {
- filter: brightness(200%);
- }
- </style>
- <script>
- function home() {
- homeBtn.style.background = "rgba(255, 255, 255, 0.5)"
- homeBtn.style.color = "#fff"
- marketBtn.style.background = null
- marketBtn.style.color = null
- aboutBtn.style.background = null
- aboutBtn.style.color = null
- contactsBtn.style.background = null
- contactsBtn.style.color = null
- jobsBtn.style.background = null
- jobsBtn.style.color = null
- }
- function market() {
- homeBtn.style.background = null
- homeBtn.style.color = null
- marketBtn.style.background = "rgba(255, 255, 255, 0.5)"
- marketBtn.style.color = "#fff"
- aboutBtn.style.background = null
- aboutBtn.style.color = null
- contactsBtn.style.background = null
- contactsBtn.style.color = null
- jobsBtn.style.background = null
- jobsBtn.style.color = null
- }
- function about() {
- aboutBtn.style.background = "rgba(255, 255, 255, 0.5)"
- aboutBtn.style.color = "#fff"
- contactsBtn.style.background = null
- contactsBtn.style.color = null
- homeBtn.style.background = null
- homeBtn.style.color = null
- marketBtn.style.background = null
- marketBtn.style.color = null
- jobsBtn.style.background = null
- jobsBtn.style.color = null
- }
- function contacts() {
- contactsBtn.style.background = "rgba(255, 255, 255, 0.5)"
- contactsBtn.style.color = "#fff"
- homeBtn.style.background = null
- homeBtn.style.color = null
- marketBtn.style.background = null
- marketBtn.style.color = null
- aboutBtn.style.background = null
- aboutBtn.style.color = null
- jobsBtn.style.background = null
- jobsBtn.style.color = null
- }
- function jobs() {
- jobsBtn.style.background = "rgba(255, 255, 255, 0.5)"
- jobsBtn.style.color = "#fff"
- homeBtn.style.background = null
- homeBtn.style.color = null
- marketBtn.style.background = null
- marketBtn.style.color = null
- aboutBtn.style.background = null
- aboutBtn.style.color = null
- contactsBtn.style.background = null
- contactsBtn.style.color = null
- }
- function menu() {
- menuIcon.style.transform = "rotate(360deg)"
- setTimeout(function() { taskbar.style.left = 0 },800)
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement