Social Media Sidebar
How do I make an social media sidebar?
What is a social media sidebar? How do you make a social media sidebar? This script and codes were developed by Tim Normington on 05 December 2022, Monday.
Social Media Sidebar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Media Sidebar</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu-container"> <ul class="menu-list"> <li class="js-menu-item menu-item-1"><i class="fa fa-twitter fa-fw"></i>30</li> <li class="js-menu-item menu-item-2"><i class="fa fa-facebook fa-fw"></i>22</li> <li class="js-menu-item menu-item-3"><i class="fa fa-instagram fa-fw"></i>43</li> <li class="js-menu-item menu-item-4"><i class="fa fa-behance fa-fw"></i>12</li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Social Media Sidebar - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { background-color: #ecf0f1;
}
.menu-container { position: absolute; right: 0; width: 100px; top: 100px;
}
.menu-list { position: relative; list-style-type: none; padding: 0; margin: 0; max-width: 100%;
}
.menu-list li { color: rgba(0, 0, 0, 0.5); font-family: "Slabo 27px", serif; font-weight: 700; width: 80px; float: right; position: relative; padding-left: 15px; padding-right: 10px; padding-top: 20px; height: 40px; text-align: right;
}
.menu-list li i { float: left;
}
.menu-item-1,
.menu-item-2,
.menu-item-3,
.menu-item-4 { box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.5); border-radius: 10px 0 0 10px;
}
.menu-item-1 { background-color: #2980b9;
}
.menu-item-2 { background-color: #e74c3c;
}
.menu-item-3 { background-color: #9b59b6;
}
.menu-item-4 { background-color: #2bc069;
}
Social Media Sidebar - Script Codes JS Codes
$(document).ready(function() { var menuItem = $('.js-menu-item'), menu1color = $('.menu-item-1').css("color"), menu2color = $('.menu-item-2').css("color"), menu3color = $('.menu-item-3').css("color"), menu4color = $('.menu-item-4').css("color"); menuItem.on("mouseenter", function() { TweenMax.to(this, .7, {width:"100%", color:"white", ease:Elastic.easeOut}) }); menuItem.on("mouseleave", function() { TweenMax.to(this, .3, {width:"70px", marginRight:"0", color:"rgba(0, 0, 0, .5)", ease:Power4.easeOut}) });
});
![Social Media Sidebar - Script Codes](http://shots.codepen.io/tnormington/pen/NGrYpm-512.jpg)
Developer | Tim Normington |
Username | tnormington |
Uploaded | December 05, 2022 |
Rating | 3 |
Size | 2,884 Kb |
Views | 28,336 |
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!
Name | Size |
Twitch Notification Concept | 2,589 Kb |
Animate Dom Manipulation | 3,205 Kb |
Footer Link Navigation | 2,196 Kb |
SVG Coffee Animation | 4,174 Kb |
Mobile Dropdown Top Nav | 3,183 Kb |
Image gallery | 2,434 Kb |
Color Picker | 2,956 Kb |
Loading Animation | 1,737 Kb |
Online Banking Interface | 2,919 Kb |
Tri-column slanted hero with hover effect | 2,912 Kb |
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!
Name | Username | Size |
Heartbeat | Apetrov | 2,079 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
Parallax.js | Zmeeey5 | 2,330 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Base-Style | Daniel_gooss | 2,614 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!