Dark Social Navigation
How do I make an dark social navigation?
What is a dark social navigation? How do you make a dark social navigation? This script and codes were developed by Eric Rogg on 24 August 2022, Wednesday.
Dark Social Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dark Social Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul> <li><a href="#"><span class="fontawesome-user"></span></a> <ul class="clearfix"> <li><a href="#" class="tooltip" data-tooltip="Facebook"><span class="fontawesome-facebook"></span></a></li> <li><a href="#" class="tooltip" data-tooltip="Twitter"><span class="fontawesome-twitter"></span></a></li> <li><a href="#" class="tooltip" data-tooltip="Google+"><span class="fontawesome-google-plus"></span></a></li> <li><a href="#" class="tooltip" data-tooltip="Github"><span class="fontawesome-github"></span></a></li> </ul> </li> </ul> </nav>
</body>
</html>
Dark Social Navigation - Script Codes CSS Codes
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body { background-color: #434240; font-family: Arial, Helvetica, sans-serif; font-size: 24px; line-height: 1.5em;
}
a { text-decoration: none; }
/* ---------- NAVIGATION ---------- */
nav > ul { margin: 50px auto; width: 250px;
}
nav ul li { position: relative;
}
nav ul li:hover > ul { opacity: 1;
}
nav ul li a { background-color: #ff6462; color: #535152; display: block; height: 50px; line-height: 50px; text-align: center; width: 50px;
}
nav ul li a:after { background-color: #ff6462; content: ""; display: block; height: 8px; left: 46px; position: absolute; top: 21px; transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 8px; z-index: 1;
}
nav ul li a:hover { color: #373634;
}
nav ul li ul { display: block; left: 50px; position: absolute; top: 0; opacity: 0; transition: opacity .5s; -o-transition: opacity .5s; -moz-transition: opacity .5s; -webkit-transition: opacity .5s;
}
nav ul li ul li { float: left; margin-top: 0;
}
nav ul li ul li a { background-color: #535152; color: #424242; position: relative;
}
nav ul li ul li a:after { display: none;
}
.tooltip:hover:before { background-color: #ff6462; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; content: attr(data-tooltip); color: #373634; display: block; font-size: 12px; height: 21px; line-height: 21px; padding: 0 10px; position: absolute; top: -18px; white-space: nowrap; z-index: 1;
}
.tooltip:hover:after { background-color: #ff6462; content: ""; display: block; height: 8px; left: 50%; position: absolute; top: -1px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 8px; z-index: 1;
}
Developer | Eric Rogg |
Username | er40 |
Uploaded | August 24, 2022 |
Rating | 3 |
Size | 2,243 Kb |
Views | 34,408 |
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 |
Profile CSS Hover Effect | 4,632 Kb |
Widget | 5,735 Kb |
Casestudy | 3,080 Kb |
Simple Animated Buttons Inspired by Material Design | 5,803 Kb |
Pagination | 1,822 Kb |
Collapsing Widget | 4,279 Kb |
Header | 1,542 Kb |
JQuery Progress Bar22 | 6,701 Kb |
Checkbox | 5,169 Kb |
A Pen by Eric Rogg | 2,795 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 |
Sass random color animation | Jotavejv | 4,827 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
SVG Animation | Pollardld | 3,133 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Sticky menu on scroll | Senff | 2,869 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!