Simple menu
How do I make an simple menu?
This is a simple menu marked up in a modular fashion.. What is a simple menu? How do you make a simple menu? This script and codes were developed by John W. Long on 24 September 2022, Saturday.
Simple menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="menubar"> <li class="menubar-item"> <a class="menubar-item-target" href="javascript:void(0)">File</a> <ul class="menu"> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Open</a></li> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Save</a></li> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Save as…</a></li> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Close</a></li> <li class="menu-separator"></li> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Exit</a></li> </ul> </li> <li class="menubar-item"> <a class="menubar-item-target" href="javascript:void(0)">Edit</a> <ul class="menu"> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Cut</a></li> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Copy</a></li> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">Paste</a></li> </ul> </li> <li class="menubar-item"> <a class="menubar-item-target" href="javascript:void(0)">Help</a> <ul class="menu"> <li class="menu-item"><a class="menu-item-target" href="javascript:void(0)">About</a></li> </ul> </li>
</ul>
<div class="bubble"> <div class="bubble-tail"></div> <div class="bubble-content"> Click on the menubar to get started. </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 menu - Script Codes CSS Codes
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
body { font-family: sans-serif; font-weight: 100; background: #eee;
}
.menubar { list-style: none; font-size: 14px; background: white; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px; padding: 0 10px;
}
.menubar-item { display: inline-block; position: relative;
}
.menubar-item-target { color: black; display: block; padding: 10px 14px; text-decoration: none;
}
.menubar-item-target:hover, .is-selected .menubar-item-target { background: #29a7f5; color: white;
}
.menu { -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 5px 15px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 5px 15px; box-shadow: rgba(0, 0, 0, 0.5) 0 5px 15px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; display: none; position: absolute; top: 100%; background: white; list-style: none; width: 15em; padding: 10px 0;
}
.is-selected .menu { display: block;
}
.menu-item-target { color: black; display: block; padding: 8px 20px; text-decoration: none;
}
.menu-item-target:hover { background: #29a7f5; color: white;
}
.menu-separator { border-top: 1px solid #ddd; margin: 8px;
}
.bubble { margin: 10px; position: absolute;
}
.bubble-content { background: black; background: rgba(0, 0, 0, 0.8); color: white; color: rgba(255, 255, 255, 0.9); padding: 15px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px;
}
.bubble-tail { border: 10px solid transparent; border-top: none; border-bottom-color: black; border-bottom-color: rgba(0, 0, 0, 0.8); width: 0; position: relative; left: 50%; margin-left: -10px;
}
Simple menu - Script Codes JS Codes
var Menubar = {};
Menubar.active = false;
Menubar.open = function(el) { var menubar = $(el).closest('.menubar') , item = $(el).closest('.menubar-item') , menu = item.find('.menu').first() ; Menubar.active = true; item.addClass('is-selected') item.siblings().removeClass('is-selected'); $('.bubble').hide();
};
Menubar.close = function() { $('.menubar-item.is-selected').removeClass('is-selected'); Menubar.active = false;
};
$('.menubar-item').on('click', function(e) { if (!Menubar.active) { Menubar.open(this); e.stopPropagation(); // Keep document.click from firing }
});
$('.menubar-item').on('mouseenter', function() { if (Menubar.active) { Menubar.open(this); }
});
$(document).on('click', function() { Menubar.close();
});
Developer | John W. Long |
Username | jlong |
Uploaded | September 24, 2022 |
Rating | 4 |
Size | 3,691 Kb |
Views | 22,264 |
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 |
Pure CSS Spinners | 2,043 Kb |
Animated CSS Flower Spinner | 2,747 Kb |
Animated CSS Google Plus-Like Loader | 3,913 Kb |
Horizontal Bar Graph with D3 | 2,944 Kb |
Animated CSS Throbber | 2,665 Kb |
Simple menu 1 | 3,420 Kb |
March of the Smilies | 2,139 Kb |
Animated CSS Timer Spinner | 2,769 Kb |
JSON Code Editor | 4,755 Kb |
Modular Typography | 6,827 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 |
Rotating Preloader with Anime.js | Tamashi | 2,450 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 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!