Emploee Tree
How do I make an emploee tree?
What is a emploee tree? How do you make a emploee tree? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.
Emploee Tree - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Emploee Tree</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url("https://fonts.googleapis.com/css?family=Quicksand:300,regular,700");
body
{ background-image: url("http://dc643.4shared.com/img/lGOXtMUM/s7/142c48b5558/noise.png"); background-repeat: repeat; font-family: Quicksand;
}
*,
*:before,
*:after
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} *:before, *:after { content: ''; position: absolute; z-index: 1; }
ul, ul:hover, li, li:hover, a, a:hover, .tooltip, .tooltip:hover
{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;
}
ul, li
{ padding: 0; margin: 0; list-style: none;
}
a
{
}
.parent
{ text-align: center; display: inline-block; min-width:860px; width: 100%; padding: 10px 0px;
} .parent a { text-decoration: none; color: #fff; padding: 10px 15px; border-radius: 5px; position: relative; background-color: #333; z-index: 2; position: relative; border-radius: 20px 5px; } .parent > li { position: relative; } .parent > li > a { display: inline-block; margin: 0 auto; margin-bottom: 50px; border-radius: 30px 5px; } .parent > li > a:after { width: 2px; left: 50%; margin-left: -1px; background-color: #ccc; height: 25px; top: 100%; } .parent > li:hover > a { background-color: #E5283C; } .parent > li > a:hover { background-color: #a50505; } .parent > li > ul { display: table; position: relative; margin: 0 auto; font-size: 14px; } .parent > li > ul:before { width: 92%; position: absolute; top: -25px; left: 4%; height: 100%; border-top: 1px solid #ccc; border-left: 2px solid #ccc; border-right: 2px solid #ccc; border-radius: 5px; } .parent > li > ul > li { display: inline-block; vertical-align: top; position: relative; } .parent > li > ul > li:not(:first-child) { margin-left: 20px; } .parent > li > ul > li:not(:last-child) { margin-right: 20px; } .parent > li > ul > li:not(:first-child):not(:last-child):before { height: 25px; top: -25px; left: 50%; margin-left: -1px; width: 2px; background-color: #ccc; } .parent > li > a:hover + ul > li > a, .parent > li:hover > ul > li > a:hover { background-color: #E5283C; } .parent > li:hover > ul > li > a:hover { transform: rotateY(360deg); }
.parent > li > a > .tooltip
{ opacity: 0; top: -300%; display: inline-block; width: 100%; height: 100%; position: absolute; font-size: 11px; line-height: 40px; font-family: tahoma;
}
.parent > li > a:hover > .tooltip
{ top: 0px; opacity: 1; z-index: 2; left: 0; background-color: #333; border-radius: 20px 5px;
}
.parent > li > ul > li > a > .tooltip
{ opacity: 0; bottom: -300%; display: inline-block; width: 100%; height: 100%; position: absolute; font-size: 11px; line-height: 40px; font-family: tahoma;
}
.parent > li > ul > li > a:hover > .tooltip
{ bottom: 0px; opacity: 1; z-index: 2; left: 0; background-color: #333; border-radius: 20px 5px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <ul class="parent"> <li> <a href="#">Mohammad Awad<span class="tooltip">Team Leader</span></a> <ul> <li><a href="#">Mariam Massadeh<span class="tooltip">Front-End Developer</span></a></li> <li><a href="#">Bara'a Kassab<span class="tooltip">Back-End Developer</span></a></li> <li><a href="#">Ghada Subih<span class="tooltip">Back-End Developer</span></a></li> <li><a href="#">Islam Dabbos<span class="tooltip">Support-Engineer</span></a></li> </ul> </li> </ul>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Emploee Tree - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Quicksand:300,regular,700");
body
{ background-image: url("http://dc643.4shared.com/img/lGOXtMUM/s7/142c48b5558/noise.png"); background-repeat: repeat; font-family: Quicksand;
}
*,
*:before,
*:after
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} *:before, *:after { content: ''; position: absolute; z-index: 1; }
ul, ul:hover, li, li:hover, a, a:hover, .tooltip, .tooltip:hover
{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;
}
ul, li
{ padding: 0; margin: 0; list-style: none;
}
a
{
}
.parent
{ text-align: center; display: inline-block; min-width:860px; width: 100%; padding: 10px 0px;
} .parent a { text-decoration: none; color: #fff; padding: 10px 15px; border-radius: 5px; position: relative; background-color: #333; z-index: 2; position: relative; border-radius: 20px 5px; } .parent > li { position: relative; } .parent > li > a { display: inline-block; margin: 0 auto; margin-bottom: 50px; border-radius: 30px 5px; } .parent > li > a:after { width: 2px; left: 50%; margin-left: -1px; background-color: #ccc; height: 25px; top: 100%; } .parent > li:hover > a { background-color: #E5283C; } .parent > li > a:hover { background-color: #a50505; } .parent > li > ul { display: table; position: relative; margin: 0 auto; font-size: 14px; } .parent > li > ul:before { width: 92%; position: absolute; top: -25px; left: 4%; height: 100%; border-top: 1px solid #ccc; border-left: 2px solid #ccc; border-right: 2px solid #ccc; border-radius: 5px; } .parent > li > ul > li { display: inline-block; vertical-align: top; position: relative; } .parent > li > ul > li:not(:first-child) { margin-left: 20px; } .parent > li > ul > li:not(:last-child) { margin-right: 20px; } .parent > li > ul > li:not(:first-child):not(:last-child):before { height: 25px; top: -25px; left: 50%; margin-left: -1px; width: 2px; background-color: #ccc; } .parent > li > a:hover + ul > li > a, .parent > li:hover > ul > li > a:hover { background-color: #E5283C; } .parent > li:hover > ul > li > a:hover { transform: rotateY(360deg); }
.parent > li > a > .tooltip
{ opacity: 0; top: -300%; display: inline-block; width: 100%; height: 100%; position: absolute; font-size: 11px; line-height: 40px; font-family: tahoma;
}
.parent > li > a:hover > .tooltip
{ top: 0px; opacity: 1; z-index: 2; left: 0; background-color: #333; border-radius: 20px 5px;
}
.parent > li > ul > li > a > .tooltip
{ opacity: 0; bottom: -300%; display: inline-block; width: 100%; height: 100%; position: absolute; font-size: 11px; line-height: 40px; font-family: tahoma;
}
.parent > li > ul > li > a:hover > .tooltip
{ bottom: 0px; opacity: 1; z-index: 2; left: 0; background-color: #333; border-radius: 20px 5px;
}
Developer | Mariam Massadeh |
Username | MariamMassadeh |
Uploaded | September 22, 2022 |
Rating | 3 |
Size | 3,670 Kb |
Views | 26,312 |
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 |
Receipt with result | 2,774 Kb |
Html5-canvas-snow-effect | 2,609 Kb |
Animated evaluation pen with a tooltip | 2,771 Kb |
Menu with a featured tooltip that has an animation from Jumping Animation pen | 2,560 Kb |
Responsive Menu with sub menu- CSS3 animation, simple jquery | 3,663 Kb |
Simple blog container, tool tip, simple animation on hover | 2,834 Kb |
CSS3 Animation | 4,351 Kb |
Css3-image-slider-with-stylized-thumbnails | 2,576 Kb |
Time Line | 5,697 Kb |
Tooltip | 2,678 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 |
JQuery exercise | Brian-baum | 3,780 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Segments mouse following | Nosir | 2,909 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Welcome | Nakome | 6,076 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Stylize Stories | Jvhti | 2,465 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!