Simple Admin Menu
How do I make an simple admin menu?
What is a simple admin menu? How do you make a simple admin menu? This script and codes were developed by Gavra on 20 November 2022, Sunday.
Simple Admin Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Admin Menu</title> <link rel='stylesheet prefetch' href='http://improve.net84.net/yzvGB/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--
<link rel="stylesheet" href="http://www.3heaven.com/dev/responsive-admin-menu/css/font-awesome.min.css">-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<!--
<div style="
position: relative;
overflow: hidden;
padding: 0 74px 0 22px;
margin: 0;
height: 25px;
background: #252525;
box-shadow: 0 1px 0 0 #353535 inset;
border-bottom: 1px solid #000;
border-top: 1px solid #000;">d</div>
-->
<div class="eee"></div>
<div id="responsive-admin-menu"> <div id="responsive-menu">Dwsee Responsive Admin Menu <div class="menuicon">≡</div> </div> <!--Menu--> <div id="menu"> <a href="" title="Dashboard"><i class="icon-dashboard"></i><span> Dashboard</span></a> <a href="" title="News"><i class="icon-bullhorn"></i><span> News</span></a> <a href="" title="Pages"><i class="icon-file-alt"></i><span> Pages</span></a> <a href="" title="Media" class="submenu" name="media-sub"><i class="icon-eye-open"></i><span> Media</span></a> <!-- Media Sub Menu --> <div id="media-sub" style="display: none;"> <a href="" title="Video Gallery"><i class="icon-film"></i><span> Video Gallery</span></a> <a href="" title="Photo Gallery"><i class="icon-picture"></i><span> Photo Gallery</span></a> </div> <!-- Media Sub Menu --> <a href="" title="Graph & Charts"><i class="icon-bar-chart"></i><span> Graph & Charts</span></a> <a href="" title="Events"><i class="icon-calendar"></i><span> Events</span></a> <a href="" class="submenu" name="other-sub" title="Other Contents"><i class="icon-book"></i><span> Other Contents</span></a> <!-- Other Contents Sub Menu --> <div id="other-sub"> <a href="" title="Forms"><i class="icon-list"></i><span> Forms</span></a> <a href="" title="Mail Lists"><i class="icon-list-ul"></i><span> Mail Lists</span></a> <a href="" title="Maps"><i class="icon-map-marker"></i><span> Maps</span></a> </div> <!-- Other Contents Sub Menu --> <a href="" title="Admin Tools"><i class="icon-cogs"></i><span> Admin Tools</span></a> </div> <!--Menu-->
</div>
<div id="content-wrapper"> <div style="border: 1px rgba(232, 232, 232, 0.5) solid;margin:0px 0px 10px 0px"> <div style="border-bottom: 1px rgba(232, 232, 232, 0.2) solid;
background-color: rgba(243, 243, 243, 0.2);
padding: 8px;
font-size: 13px;
font-weight: 700;
color: #1D1D1D;"> Admin Menu Content</div> <div style="padding:8px;font-size:13px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div style="border: 1px rgba(232, 232, 232, 0.5) solid;width:49%;float:left;margin:10px 0px 10px 0px"> <div style="border-bottom: 1px rgba(232, 232, 232, 0.2) solid;
background-color: rgba(243, 243, 243, 0.2);
padding: 8px;
font-size: 13px;
font-weight: 700;
color: #1D1D1D;"> Admin Menu Content</div> <div style="padding:8px;font-size:13px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div style="border: 1px rgba(232, 232, 232, 0.5) solid;width:49%;float:right;margin:10px 0px 10px 0px"> <div style="border-bottom: 1px rgba(232, 232, 232, 0.2) solid;
background-color: rgba(243, 243, 243, 0.2);
padding: 8px;
font-size: 13px;
font-weight: 700;
color: #1D1D1D;;"> Admin Menu Content</div> <div style="padding:8px;font-size:13px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Admin Menu - Script Codes CSS Codes
body { color:#fff;
}
.eee { /*
position: relative;
overflow: hidden;
padding: 0 74px 0 22px;
margin: 0;
height: 25px;
background: #252525;
box-shadow: 0 1px 0 0 #353535 inset;
border-bottom: 1px solid #000;
border-top: 1px solid #000; */
position: relative;
overflow: hidden;
padding: 0 74px 0 22px;
margin: 0;
height: 25px;
background: #252525;
box-shadow: 0 1px 0 0 #353535 inset;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
#menu { background: #303130;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
width: 198px;
}
a { padding: 11px 15px;
position: relative;
font-weight: bold;
font-size: 14px;
border-top: 1px solid rgba(0, 0, 0, 0);
border-color: rgba(255, 255, 255, 0.05);
transition: color .3s ease-in-out 0s;
color: #F1F1F1;
}
#responsive-admin-menu { float: left; width: 200px; background-color: #404040; height: 100%; position: relative; overflow: hidden; left: 0px; min-height: 500px;
}
#content-wrapper { width: auto; margin-left: 200px; background-color: #ffffff; height: 1200px; padding: 15px; background: #303130;
border-right: 1px solid #000;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
#responsive-admin-menu #responsive-menu { height: 50px; display: none; line-height: 50px; cursor: pointer; color: #ffffff; text-indent: 10px;
}
#responsive-admin-menu #responsive-menu .menuicon { color: #ffffff; font-size: 24px; position: absolute; right: 10px; top: 0px;
}
#responsive-admin-menu #logo { background: url('../images/logo.png'); background-position: -0px -36px; width: 174px; height: 40px; margin: 10px;
}
/* Menu Styles */
#responsive-admin-menu #menu { /*--width: 100%;--*/
}
#responsive-admin-menu #menu a { border-bottom: 1px #52535a; font-size: 14px; text-decoration: none; display: block; padding: 12px; color: #FFFFFF; position: relative; font-weight: 400; overflow: hidden;
}
#responsive-admin-menu #menu a:hover { color: #111; /*-- background-color:#fcfcfc; --*/ background-color: #494949;
}
#responsive-admin-menu #menu i { width: 16px; padding-right: 4px;
}
#responsive-admin-menu #menu div { display: none; width: 100%; background-color: #5c5d64; overflow: hidden;
}
#responsive-admin-menu #menu div a { color: #c0c0c0;
}
#responsive-admin-menu #menu div a:hover { color: #888888;
}
#responsive-admin-menu #menu a.submenu:before { font-family: FontAwesome; content: "\f054";
}
#responsive-admin-menu #menu a.downarrow:before { font-family: FontAwesome; content: "\f078";
}
#responsive-admin-menu #menu a.submenu:before { font-size: 14px; position: absolute; right: 15px; top: 17px;
}
/* Menu Styles */
@media screen and (max-width: 960px) { #responsive-admin-menu #responsive-menu { display: none; } #responsive-admin-menu #menu a span { display: inline-block; }
}
@media screen and (max-width: 800px) { #responsive-admin-menu #menu a span { display: none; } #responsive-admin-menu { float: left; width: 40px; position: relative; } #responsive-admin-menu { height: 100%; } #content-wrapper { margin-left: 40px; } #responsive-admin-menu #menu a.submenu:before { font-size: 6px; right: 5px; } #responsive-admin-menu #logo { background: url('../images/logo.png'); background-position: -0px -0px; width: 29px; height: 26px; margin: 10px 10px 10px 5px; }
}
@media screen and (max-width: 480px) { #responsive-admin-menu { min-height: 50px; float: left; width: 100%; background-color: #404040; height: auto; position: static; top: 0; } #responsive-admin-menu #logo { display: none; } #responsive-admin-menu #menu a span { display: inline-block; } #content-wrapper { margin-left: 0; padding-top: 60px; } #responsive-admin-menu #responsive-menu { display: block; } #responsive-admin-menu #menu { display: none; } #responsive-admin-menu #menu a { color: #FFFFFF; } #responsive-admin-menu #menu a.submenu:before { font-size: 14px; right: 15px; }
}
/*-- +++ --*/
html, body { margin: 0; padding: 0; height: 100%; font-family: "Open Sans", Helvetica, sans-serif; background-color: #404040;
/*-- +++ --*/
Simple Admin Menu - Script Codes JS Codes
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(o).i(4(){$("p").q(\'<r t="u" m="9/3-6-0.9"/>\');s a="";$("#3-0").c(4(){$("#3-6-0 #0").g()});$(h).f(4(){$("#3-6-0 #0").j("k")});$("#0 a.l").c(4(){d(a!=""){$("#"+a).n("a").e("7");$("#"+a).b("8")};d(a==$(1).5("2")){$("#"+$(1).5("2")).b("8");$(1).e("7");a=""}v{$("#"+$(1).5("2")).w("8");a=$(1).5("2");$(1).x("7")};y z})});',36,36,'menu|this|name|responsive|function|attr|admin|downarrow|fast|css||slideUp|click|if|removeClass|resize|slideToggle|window|ready|removeAttr|style|submenu|href|prev|document|head|append|link|var|rel|stylesheet|else|slideDown|addClass|return|false'.split('|'),0,{}))
Developer | Gavra |
Username | gavra |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 4,290 Kb |
Views | 16,192 |
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 |
Cool menu.. | 2,542 Kb |
Timer | 1,881 Kb |
This webpage is not available | 1,704 Kb |
Fork - Dashboard start page | 84,827 Kb |
Slide-out | 1,641 Kb |
Terminal - git | 2,461 Kb |
Nice scroll | 1,696 Kb |
Moving colors | 3,037 Kb |
A Pen by gavra | 2,990 Kb |
Improve | 1,652 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 |
Sticky menu on scroll | Senff | 2,869 Kb |
3D-box | Parthviroja | 2,346 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 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!