A Pen by Mariam Massadeh

Size
3,981 Kb
Views
30,360

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 Previews

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); } });
A Pen by Mariam Massadeh - Script Codes
A Pen by Mariam Massadeh - Script Codes
Home Page Home
Developer Mariam Massadeh
Username MariamMassadeh
Uploaded September 22, 2022
Rating 3
Size 3,981 Kb
Views 30,360
Do you need developer help for A Pen by Mariam Massadeh?

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!

Mariam Massadeh (MariamMassadeh) Script Codes
Create amazing marketing copy with AI!

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!