A Pen by Mariam Massadeh
How do I make an a pen by mariam massadeh?
What is a a pen by mariam massadeh? How do you make a a pen by mariam massadeh? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.
A Pen by Mariam Massadeh - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Mariam Massadeh</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! */ body
{ font-family: Tahoma; font-size: 14px; padding: 0; margin: 0; overflow:hidden; background-color: #f8f8f8; background-image: url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat: repeat;
}
a
{ text-decoration: none; color: #fff;
}
ul
{ list-style: none; margin: 0; padding: 0;
}
/* Menu */
.main_menu_container
{ padding: 10px 5px; position: absolute; left: 0px; top: 25px; background-color: #333; line-height: 2.4em; margin-top: 20px;
}
.main_menu_button
{ font-size: 1.5em; margin: 10px 0px; color: #fff; cursor: pointer;
}
.main_menu
{ position: relative; width: 0; opacity: 0; left: -300px;
} .main_menu > li > label, .main_menu > li > a { font-size: 1em; color: #fff; display: block; line-height: 3em; } .main_menu label:before, .main_menu a:before { font-size: 1.5em; padding-right: 10px; } .main_menu > li { position: relative; padding-left: 5px; } .main_menu > li:not(.opened) > label { cursor: pointer; } .main_menu > li:hover > a, .main_menu > li:hover:not(.opened) > label, .main_menu > li > ul a:hover { text-shadow: 0 0 5px #f0f0f0; } .main_menu > li.opened { background-color: rgba(255, 255, 255, 0.43); cursor: default; } .main_menu > li > ul { display: none; position: absolute; left: 400%; margin-left: 30px; background: #333; padding: 10px; top: 0; border-radius: 5px; opacity: 0; width: 100%; line-height: 2.2em; font-size: 0.9em; } .main_menu > li > ul:before { content: ''; position: absolute; border: 6px solid transparent; border-right-color: #333; left: -12px; top: 1.5em; } .main_menu:not(.opened) a:before { right: 0; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main_menu_container"> <label class="main_menu_button fa fa-list-ul"></label> <ul class="main_menu"> <li> <a CssClass="fa fa-home" href="#">Home</a> </li> <li> <label class="fa fa-th-list">Menus</label> <ul> <li> <a href="#">Main Menu</a></li> <li> <a href="#">Footer Menu</a></li> <li> <a href="#">Shortcut Menu</a></li> <li> <a href="#">Vertical Menu</a></li> <li> <a href="#">Top Menu</a></li> </ul> </li> <li> <label class="fa fa-folder">Sliders</label> <ul> <li> <a href="#">Home Slider</a></li> <li> <a href="#">Partners Slider</a></li> <li> <a href="#">Quotes Slider</a></li> </ul> </li> <li> <label class="fa fa-database">Contents</label> <ul> <li> <a href="#">Sections</a></li> <li> <a href="#">Posts</a></li> <li> <a href="#">Image Gallery</a></li> <li> <a href="#">Video Gallery</a></li> <li> <a href="#">Pages</a></li> <li> <a href="#">Comments</a></li> </ul> </li> <li> <label class="fa fa-sliders">Configurations</label> <ul> <li> <a href="#">Resources</a></li> <li> <a href="#">Configurations</a></li> <li> <a href="#">Logins and Permissions</a></li> </ul> </li> <li> <label class="fa fa-tag">Miscellaneous</label> <ul> <li> <a href="#">Events</a></li> <li> <a href="#">Google Maps</a></li> <li> <a href="#">Polls and Surveys</a></li> <li> <a href="#">Advertisements</a></li> <li> <a href="#">Social Media</a></li> <li> <a href="#">Guest Book</a></li> <li> <a href="#">Contacts List</a></li> <li> <a href="#">Home Text</a></li> </ul> </li> </ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Mariam Massadeh - Script Codes CSS Codes
body
{ font-family: Tahoma; font-size: 14px; padding: 0; margin: 0; overflow:hidden; background-color: #f8f8f8; background-image: url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat: repeat;
}
a
{ text-decoration: none; color: #fff;
}
ul
{ list-style: none; margin: 0; padding: 0;
}
/* Menu */
.main_menu_container
{ padding: 10px 5px; position: absolute; left: 0px; top: 25px; background-color: #333; line-height: 2.4em; margin-top: 20px;
}
.main_menu_button
{ font-size: 1.5em; margin: 10px 0px; color: #fff; cursor: pointer;
}
.main_menu
{ position: relative; width: 0; opacity: 0; left: -300px;
} .main_menu > li > label, .main_menu > li > a { font-size: 1em; color: #fff; display: block; line-height: 3em; } .main_menu label:before, .main_menu a:before { font-size: 1.5em; padding-right: 10px; } .main_menu > li { position: relative; padding-left: 5px; } .main_menu > li:not(.opened) > label { cursor: pointer; } .main_menu > li:hover > a, .main_menu > li:hover:not(.opened) > label, .main_menu > li > ul a:hover { text-shadow: 0 0 5px #f0f0f0; } .main_menu > li.opened { background-color: rgba(255, 255, 255, 0.43); cursor: default; } .main_menu > li > ul { display: none; position: absolute; left: 400%; margin-left: 30px; background: #333; padding: 10px; top: 0; border-radius: 5px; opacity: 0; width: 100%; line-height: 2.2em; font-size: 0.9em; } .main_menu > li > ul:before { content: ''; position: absolute; border: 6px solid transparent; border-right-color: #333; left: -12px; top: 1.5em; } .main_menu:not(.opened) a:before { right: 0; }
A Pen by Mariam Massadeh - Script Codes JS Codes
//--open sub menu
function open_sub_menu(field) { reset_sub_menu(); $(field).addClass("opened"); $(field).find("ul").show().animate({ opacity: 1, left: '100%', }, 500, function () { });
}
//--close sub menu
function close_sub_menu(field) { $(field).removeClass("opened"); $(field).find("ul").animate({ opacity: 0, left: '400%', }, 500, function () { $(field).find("ul").hide(); });
}
//--reset main menu: opened sub menu
function reset_sub_menu() { $(".main_menu > li").removeClass("opened"); $(".main_menu > li").find("ul").animate({ opacity: 0, left: '400%', }, 500, function () { });
} //--handle menu width var main_menu_base_width = $(".main_menu_container").outerWidth(); //--handle main menu $(".main_menu_button").click(function () { if (!$(".main_menu").hasClass("opened")) { $(".main_menu_container").animate({ width: '200px' }, 500, function () { }); $(".main_menu").addClass("opened").animate({ opacity: 1, left: '0px', width: "100%" }, 500, function () { //$(".inner_wrapper").animate({ left: $(".main_menu_container").outerWidth(), width: $("body").outerWidth() - $(".main_menu_container").outerWidth() }, 800, function () { }); }); } else { $(".main_menu").removeClass("opened").animate({ opacity: 1, left: "-300px", width: "0px" }, 100, function () { $(".main_menu_container").animate({ width: main_menu_base_width }, 500, function () { }); reset_sub_menu(); //$(".inner_wrapper").animate({ left: main_menu_base_width, width: $("body").outerWidth() - main_menu_base_width }, 800, function () { }); }); } }); //--handle sub menu $(".main_menu > li").click(function () { if (!$(this).hasClass("opened")) { open_sub_menu(this); } else { close_sub_menu(this); } });
Developer | Mariam Massadeh |
Username | MariamMassadeh |
Uploaded | September 22, 2022 |
Rating | 3 |
Size | 3,981 Kb |
Views | 30,360 |
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 |
A Pen by Mariam Massadeh | 3,981 Kb |
Tooltip | 2,678 Kb |
Time Line | 5,697 Kb |
Receipt with result | 2,774 Kb |
Notepad pen | 2,300 Kb |
Animated Progress Bar | 2,271 Kb |
Animated evaluation pen with a tooltip | 2,771 Kb |
Responsive Menu with sub menu- CSS3 animation, simple jquery | 3,663 Kb |
Coming Soon | 1,680 Kb |
Emploee Tree | 3,670 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 |
A Pen by lizz | Lizz | 10,068 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Loading animation with css | Icebob | 2,947 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Project_one | MOHIM | 9,592 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 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!