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 |
Tooltip | 2,678 Kb |
Simple Chat Conversation | 4,210 Kb |
Html5-canvas-snow-effect | 2,609 Kb |
CSS3 Animation | 4,351 Kb |
Receipt with result | 2,774 Kb |
Qoute | 2,776 Kb |
Notepad pen | 2,300 Kb |
Animated Progress Bar | 2,271 Kb |
Coming Soon | 1,680 Kb |
Menu with a featured tooltip that has an animation from Jumping Animation pen | 2,560 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 |
Nice textured background | Hans | 2,659 Kb |
Basic template | Tomcat | 1,675 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Table Exercise | Fresco | 9,585 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
HEXAGON | Aurumlux | 1,684 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!