Popover Navigation
How do I make an popover navigation?
What is a popover navigation? How do you make a popover navigation? This script and codes were developed by Michael Chernin on 19 January 2023, Thursday.
Popover Navigation Previews
Popover Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Popover Navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <h1>Popover Navigation</h1> <nav> <ul> <li class="popover_parent"><a href="javascript:void(0);">Navigation<span class="caret"></span></a> <ul class="popover"> <li>Child</li> </ul> </li> <li class="popover_parent"><a href="javascript:void(0);">Navigation<span class="caret"></span></a> <ul class="popover"> <li><a href="#">Child</a></li> <li><a href="#">Child</a></li> <li><a href="#">Child</a></li> </ul> </li> <li class="popover_parent"><a href="javascript:void(0);">Navigation<span class="caret"></span></a> <ul class="popover"> <li>Child with some more content to wrap</li> </ul> </li> </ul> </nav>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Popover Navigation - Script Codes CSS Codes
/* external */
/************************
* Resets *
************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{height:auto;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{*overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}
/*------typography, etc.------*/
body {color:#FFF;background:#282B2D;font-family:helvetica;padding:2em;line-height:1.666em;}
p {margin:0 0 .5em;}
a {color: #0066CC;text-decoration: underline;outline:none; -webkit-transition: color .1s ease-in; transition: color .1s ease-in;
} a:hover{text-decoration: none;} a:active{text-decoration: underline;}
a:hover{color:#005580;text-decoration:underline;}
a img {border:none;}
img {max-width:100%;}
h1, h1 a {font-size:1.9em;margin-bottom:.75em;line-height:1.1em;}
h2, h2 a {font-size:1.5em;margin-bottom:.5em;font-weight:normal;color:#0088cc;}
h3, h3 a {font-size:1.3em;margin-bottom:.5em;}
h4, h4 a {font-size:1.1em;margin-bottom:.5em;}
h1 a, h2 a, h3 a, h4 a {text-decoration:none;font-size:1em;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {text-decoration:underline;}
p+div, p+fieldset {margin-top:1.5em;}
p+ul, p+ol {margin-top:-.125em;margin-bottom:1.5em;}
p+h2, ul+h2, ol+h2, p+h3, ul+h3, ol+h3, p+h4, ul+h4, ol+h4 {margin-top:1.25em;}
.lead {font-size:1.4em;font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;margin-bottom:.75em;}
hr {color: #CCCCCC;background-color: #CCCCCC;height:1px;border: 0;width: 100%;margin-bottom:2em;margin-top:1.5em; clear:both;}
blockquote{font-size:16px;margin:0 0 1.5em 0;border-left:#0088cc 10px solid;padding-left:.75em;} blockquote p{margin-bottom:.75em}
cite{margin:0 0 1.5em;display:block;-webkit-text-emphasis:none;text-emphasis:none; font-style:normal;}
cite p{margin-bottom:1em;}
sup, sub{line-height:1em;}
strike {color:#999;}
iframe{margin:0 auto 1.5em auto;display:block;width:100%;}
code {font-size:1em;background:rgba(0,0,0,.07);border-radius:4px;padding:0 3px;}
pre {white-space: pre; overflow:auto;width:100%;padding:0;font-size:12px;line-height:1.4em;font-family: Monaco, monospace;border:1px solid #DDD;background:whitesmoke;border-radius:4px;margin-bottom:2.5em;}
aside, figure {float:right;margin:0 0 1em 2.5%;width:33%;background:whitesmoke;padding:.75em;font-size:.75em;line-height:1.333em;border-radius:4px;}
aside img, figure img{margin:0 0 1em;}
dl {margin-bottom:1em;}
dt {font-weight:bold;}
/* Some Codepen Style */
section {border-radius:4px;width:90%;margin:0 auto;margin-bottom:3em;}
nav {display:block;margin:0 auto;}
nav ul{background:#81ABC8;padding:0;margin:0;list-style:none;}
nav > ul > li{display:inline-block;}
nav > ul > li > a{display:block;padding:1em;color:#fff;text-decoration:none;}
nav > ul > li > a:hover{background:#9DE0F4;}
.caret {margin-top: .5em;margin-left: .5em;display: inline-block;width: 0;height: 0;vertical-align: top;border-top: 5px solid #FFF;border-right: 5px solid transparent;border-left: 5px solid transparent;content: "";opacity: .5;filter: alpha(opacity=30);}
.btn {display:inline-block;padding:1em;background:#F26767;border-radius:4px;color:#fff;text-decoration:none;}
.btn:hover {color:inherit;}
/* external - end */
.popover_parent {position:relative;}
.popover {display:none;background:#F4F4F4;padding:1em;border-radius:4px;position:absolute;top:4em;z-index:1;width:200px;color:#333;} .popover:before {content:"";position: absolute;left:30px;top: -20px;width: 0;height: 0; border: 10px solid transparent;border-bottom: 10px solid #F4F4F4;}
.active .popover{display:block;} .active > a{background:#47E0A4!important;}
Popover Navigation - Script Codes JS Codes
$('.popover_parent > a').on('click', function() { $('.popover_parent > a').not(this).parent().removeClass('active'); $(this).parent().toggleClass('active');
});
//Hide the menu when click off
$('html').on('click focus', function() { $('.popover_parent.active').removeClass('active');
});
//Don't include button or menu in 'html' click function
$('.popover, .popover_parent > a').click(function(event){ event.stopPropagation();
});
| Developer | Michael Chernin |
| Username | mchernin34 |
| Uploaded | January 19, 2023 |
| Rating | 3 |
| Size | 3,811 Kb |
| Views | 6,072 |
Do you need developer help for Popover Navigation?
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!
Michael Chernin (mchernin34) Script Codes
| Name | Size |
| Teachers Apps | 1,895 Kb |
| Column Drop | 1,602 Kb |
| Icon List | 1,701 Kb |
| Mostly Fluid | 1,679 Kb |
| A Pen by Michael Chernin | 10,496 Kb |
| Pure CSS Speech Bubbles | 7,341 Kb |
| Icon Grid | 3,040 Kb |
| Slide Out Menu | 2,584 Kb |
| Change background color based on mouse location | 2,046 Kb |
| Image grid with captions | 2,222 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
| Classy Blockquote Styling | Andrewwright | 3,212 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| Blackberry Mock | Zacharyolson | 1,865 Kb |
| Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
| IE11 Test | Boostnewmedia | 4,998 Kb |
| CSS3 Form | Tusharbandal | 1,836 Kb |
| The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
| Zeichensatz | Moklick | 2,058 Kb |
| Scroll Arrow | Robooneus | 4,437 Kb |
Do you want hide your ip address?
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!