Desktop System with Animated Sidebar

Developer
Venerons
Size
5,934 Kb
Views
16,192
  1. Desktop System with Animated Sidebar Previews
  2. Desktop System with Animated Sidebar HTML Codes
  3. Desktop System with Animated Sidebar CSS Codes
  4. Desktop System with Animated Sidebar JS Codes

How do I make an desktop system with animated sidebar?

A simple desktops system with an animated sidebar. What is a desktop system with animated sidebar? How do you make a desktop system with animated sidebar? This script and codes were developed by Venerons on 15 October 2022, Saturday.

Desktop System with Animated Sidebar Previews
IQ Test

Desktop System with Animated Sidebar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Desktop System with Animated Sidebar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav> <ul> <li id="link-one"> <div>1</div> <div>One</div> </li> <li id="link-two"> <div>2</div> <div>Two</div> </li> <li id="link-three"> <div>3</div> <div>Three</div> </li> <li id="link-four"> <div>4</div> <div>Four</div> </li> <li id="link-five"> <div>5</div> <div>Five</div> </li> </ul>
</nav>
<div class="desktop" id="one"> <h1>Desktop System with Sidebar</h1> <p>This is the desktop 1</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum sem elit, vitae rutrum leo euismod vitae. Aliquam accumsan quam sit amet ultrices rhoncus. Proin diam diam, pellentesque et felis in, aliquam lacinia mauris. Sed euismod ipsum in feugiat sollicitudin. Praesent vel odio placerat, vehicula sapien eu, pellentesque dui. Praesent convallis augue non tristique lacinia. Quisque eu vulputate sem, vel commodo nisi. Nunc ullamcorper velit quis diam vulputate adipiscing. Mauris congue rhoncus fringilla. Phasellus porttitor purus neque, porttitor posuere nisl dictum eget. Duis pharetra augue leo, at sodales ipsum congue eu. Vestibulum eu justo erat. Nullam tempor varius mi, id placerat nisl pellentesque at. Quisque lacinia, nibh at viverra molestie, augue nunc commodo enim, euismod adipiscing eros mi nec nisl.</p>
</div>
<div class="desktop" id="two"> <h1>Desktop Two</h1> <p>This is the desktop 2</p> <p>Sed egestas augue vitae enim elementum scelerisque. Morbi fermentum, ipsum sed vestibulum iaculis, diam tellus convallis nisi, in aliquam magna nisi quis felis. Quisque ac orci diam. Donec scelerisque lobortis scelerisque. Duis in tortor eget erat interdum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse suscipit, libero placerat adipiscing molestie, neque velit fringilla mauris, vitae ultrices lectus est non magna. Integer ultrices erat id massa porta, quis sagittis elit ornare. Praesent mollis sit amet dolor ac dignissim. Sed sed adipiscing dolor. Curabitur lacus ipsum, lacinia eu orci vitae, lobortis eleifend lorem. Duis molestie neque in lacinia consequat. Suspendisse pretium malesuada odio, in euismod tortor convallis bibendum.</p>
</div>
<div class="desktop" id="three"> <h1>Desktop Three</h1> <p>This is the desktop 3</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum sem elit, vitae rutrum leo euismod vitae. Aliquam accumsan quam sit amet ultrices rhoncus. Proin diam diam, pellentesque et felis in, aliquam lacinia mauris. Sed euismod ipsum in feugiat sollicitudin. Praesent vel odio placerat, vehicula sapien eu, pellentesque dui. Praesent convallis augue non tristique lacinia. Quisque eu vulputate sem, vel commodo nisi. Nunc ullamcorper velit quis diam vulputate adipiscing. Mauris congue rhoncus fringilla. Phasellus porttitor purus neque, porttitor posuere nisl dictum eget. Duis pharetra augue leo, at sodales ipsum congue eu. Vestibulum eu justo erat. Nullam tempor varius mi, id placerat nisl pellentesque at. Quisque lacinia, nibh at viverra molestie, augue nunc commodo enim, euismod adipiscing eros mi nec nisl.</p>
</div>
<div class="desktop" id="four"> <h1>Desktop Four</h1> <p>This is the desktop 4</p> <p>Sed egestas augue vitae enim elementum scelerisque. Morbi fermentum, ipsum sed vestibulum iaculis, diam tellus convallis nisi, in aliquam magna nisi quis felis. Quisque ac orci diam. Donec scelerisque lobortis scelerisque. Duis in tortor eget erat interdum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse suscipit, libero placerat adipiscing molestie, neque velit fringilla mauris, vitae ultrices lectus est non magna. Integer ultrices erat id massa porta, quis sagittis elit ornare. Praesent mollis sit amet dolor ac dignissim. Sed sed adipiscing dolor. Curabitur lacus ipsum, lacinia eu orci vitae, lobortis eleifend lorem. Duis molestie neque in lacinia consequat. Suspendisse pretium malesuada odio, in euismod tortor convallis bibendum.</p>
</div>
<div class="desktop" id="five"> <h1>Desktop Five</h1> <p>This is the desktop 5</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum sem elit, vitae rutrum leo euismod vitae. Aliquam accumsan quam sit amet ultrices rhoncus. Proin diam diam, pellentesque et felis in, aliquam lacinia mauris. Sed euismod ipsum in feugiat sollicitudin. Praesent vel odio placerat, vehicula sapien eu, pellentesque dui. Praesent convallis augue non tristique lacinia. Quisque eu vulputate sem, vel commodo nisi. Nunc ullamcorper velit quis diam vulputate adipiscing. Mauris congue rhoncus fringilla. Phasellus porttitor purus neque, porttitor posuere nisl dictum eget. Duis pharetra augue leo, at sodales ipsum congue eu. Vestibulum eu justo erat. Nullam tempor varius mi, id placerat nisl pellentesque at. Quisque lacinia, nibh at viverra molestie, augue nunc commodo enim, euismod adipiscing eros mi nec nisl.</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Desktop System with Animated Sidebar - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;
}
html, body { height: 100%; width: 100%; color: white; font-size: 18px; font-weight: 400; font-family: 'Quicksand', 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif; background: -webkit-radial-gradient(bottom left ellipse, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -webkit-linear-gradient(315deg, #670d10, #092756); background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}
nav { position: absolute; top: 0; left: 0; width: 3.5rem; height: 100%; background: #2680F3; -webkit-transition: all 300ms ease; transition: all 300ms ease; overflow: hidden; z-index: 1; box-shadow: 0px 0px 10px #333;
}
nav:hover { width: 14rem;
}
nav * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
nav > ul { display: table; width: 14rem;
}
nav > ul > li { display: table-row; background: #0c66da; cursor: pointer;
}
nav > ul > li:hover { background: #569cf6;
}
nav > ul > li:active { background: #87b9f8;
}
nav > ul > li > div { height: 3.5rem; line-height: 3.5rem; display: table-cell;
}
nav > ul > li > div:nth-child(1) { width: 3.5rem; text-align: center;
}
nav > ul > li > div:nth-child(2) { width: 10.5rem; text-align: left; padding-left: 0.7rem;
}
.desktop { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; padding: 1rem 1rem 1rem 4.5rem; -webkit-transition: all 500ms ease; transition: all 500ms ease; overflow: auto;
}
.desktop h1 { margin: 1rem 0; font-weight: 300;
}
.desktop h1:nth-child(1) { margin-top: 0;
}
.desktop p { font-weight: 300; text-align: justify; margin: 0 0 1rem 0;
}
#one { background: -webkit-radial-gradient(bottom left ellipse, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -webkit-linear-gradient(315deg, #670d10, #092756); background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}
#two { background: -webkit-linear-gradient(315deg, #723362, #9d223c); background: linear-gradient(135deg, #723362, #9d223c);
}
#three { background: -webkit-linear-gradient(315deg, #2c539e, #63967d); background: linear-gradient(135deg, #2c539e, #63967d);
}
#four { background: -webkit-linear-gradient(315deg, rgba(244, 226, 156, 0) 0%, #3b293a 100%), -webkit-linear-gradient(left, #f4e29c 0%, #826057 100%); background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, #3b293a 100%), linear-gradient(to right, #f4e29c 0%, #826057 100%);
}
#five { background: -webkit-linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), -webkit-linear-gradient(135deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%); background: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
}

Desktop System with Animated Sidebar - Script Codes JS Codes

var desktops = document.querySelectorAll('.desktop');
function hide(element) { element.style.setProperty('left', '-100%', element.style.getPropertyPriority('left'));
}
function hideAll() { for (var i = 0; i < desktops.length; i++) { hide(desktops[i]); }
}
function show(element) { element.style.setProperty('left', '0', element.style.getPropertyPriority('left'));
}
document.getElementById('link-one').addEventListener('click', function () { hideAll(); show(document.getElementById('one'));
}, false);
document.getElementById('link-two').addEventListener('click', function () { hideAll(); show(document.getElementById('two'));
}, false);
document.getElementById('link-three').addEventListener('click', function () { hideAll(); show(document.getElementById('three'));
}, false);
document.getElementById('link-four').addEventListener('click', function () { hideAll(); show(document.getElementById('four'));
}, false);
document.getElementById('link-five').addEventListener('click', function () { hideAll(); show(document.getElementById('five'));
}, false);
show(document.getElementById('one'));
Desktop System with Animated Sidebar - Script Codes
Desktop System with Animated Sidebar - Script Codes
Home Page Home
Developer Venerons
Username Venerons
Uploaded October 15, 2022
Rating 4.5
Size 5,934 Kb
Views 16,192
Do you need developer help for Desktop System with Animated Sidebar?

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!

Venerons (Venerons) Script Codes
Name
Palette.js Showcase
IOS7-like Confirm Dialog
CSS3 Backgrounds
Login Window
CSS Animation
Media Queries for Everybody
HTML5 Keyboard Synthesizer
WebSlate
Pangolin
Comet
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!