CodePen Embed - Cross-browser glass menu bar apple style

Live

Live

Live

This Pen is owned by Luis Ball on CodePen.

See more by @luqven on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"YzwwzWV\",\"auto_save\":true},\"hashid\":\"YzwwzWV\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":45246015,\"user_id\":2377129,\"html\":\"<div id=\\\"root\\\">\\n  Js needed to display this page.\\n</div>\",\"css\":\"/* ************************* */\\n/* CSS Reset */\\n/* ************************* */\\nhtml, body, div, span, applet, object, iframe,\\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\\na, abbr, acronym, address, big, cite, code,\\ndel, dfn, em, img, ins, kbd, q, s, samp,\\nsmall, strike, strong, sub, sup, tt, var,\\nb, u, i, center,\\ndl, dt, dd, ol, ul, li,\\nfieldset, form, label, legend,\\ntable, caption, tbody, tfoot, thead, tr, th, td,\\narticle, aside, canvas, details, embed, \\nfigure, figcaption, footer, header, hgroup, \\nmenu, nav, output, ruby, section, summary,\\ntime, mark, audio, video {\\n\\tmargin: 0;\\n\\tpadding: 0;\\n    border: 0;\\n    font-family: inter, Helvetica, \\\"Apple Color Emoji\\\", Arial, sans-serif, \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\";\\n}\\n/* HTML5 display-role reset for older browsers */\\narticle, aside, details, figcaption, figure, \\nfooter, header, hgroup, menu, nav, section {\\n\\tdisplay: block;\\n}\\nbody {\\n\\tline-height: 1;\\n}\\nol, ul {\\n\\tlist-style: none;\\n}\\nblockquote, q {\\n\\tquotes: none;\\n}\\nblockquote:before, blockquote:after,\\nq:before, q:after {\\n\\tcontent: '';\\n\\tcontent: none;\\n}\\ntable {\\n\\tborder-collapse: collapse;\\n\\tborder-spacing: 0;\\n}\\na:hover, a:visited, a:link, a:active\\n{\\n    text-decoration: none;\\n}\\n/* ************************* */\\n/* App styles */\\n/* ************************* */\\na { \\n    color: lightskyblue;\\n}\\n p > code, li > code {\\n    color: orange;\\n    background-color: rgb(42, 39, 52);;\\n    border-radius: 4px;\\n    padding: 5px;\\n    margin-right: 2px;\\n}\\npre {\\n    border-radius: 4px;\\n    margin: 15px;\\n    overflow: scroll;\\n}\\n.token {\\n    font-family: Operator Mono A,Operator Mono B,Source Code Pro,Menlo,Consolas,Monaco,monospace !important;\\n    font-size: smaller;\\n    word-break: break-word;\\n    line-height: 32px;\\n    font-size: 21px;\\n    letter-spacing: -0.003em;\\n    margin-bottom: 1em;\\n    margin-top: .5em;\\n}\\nbody {\\n    background-color: black;\\n    text-rendering: optimizeLegibility;\\n}\\nh1, h2, h3, h4, h5, h6, p {\\n    color: white;\\n}\\nh1 {\\n    line-height: 48px;\\n    font-size: 40px;\\n    font-weight: 400;\\n}\\nh2 {\\n    font-weight: 600;\\n    letter-spacing: -0.022em;\\n    font-size: 26px;\\n    padding-top: 1.72em;\\n    margin-bottom: -0.31em;\\n}\\np {\\n    word-break: break-word;\\n    line-height: 32px;\\n    font-size: 21px;\\n    letter-spacing: -0.003em;\\n    margin-bottom: 1em;\\n    margin-top: .5em;\\n}\\np:last-of-type {\\n    margin-bottom: 200px;\\n}\\nq{\\n    margin: 5px;\\n    font-style: italic;\\n}\\n.content{\\n/*     padding-left: 19vw; */\\n    position: absolute;\\n    top: 70px;\\n    z-index: 1;\\n    max-width: 100vw;\\n}\\n.container {\\n    margin: 15px;\\n}\\n\\n.container-sm{\\n    margin: 5px;\\n}\\n\\n.container-lg {\\n    margin: 25px;\\n}\\n/* ************************* */\\n/* Blog Post Styles */\\n/* ************************* */\\n.blog-post-container {\\n    display: flex;\\n    flex-direction: column;\\n    justify-self: center;\\n    max-width: 60vw;\\n}\\n/* ************************* */\\n/* Navigation styles */\\n/* ************************* */\\n.nav-container {\\n    position: fixed;\\n    top: 0;\\n    width: 100vw;\\n    height: 50px;\\n    box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);\\n    z-index: 2;\\n    overflow: hidden;\\n}\\n.nav {\\n    position: fixed;\\n    overflow: hidden;\\n    top: 0;\\n    width: 100vw;\\n    height: 50px;\\n    margin: 0px;\\n    z-index: 2;\\n    background: #5d5d5dff;\\n}\\n.nav-links-container {\\n    display: flex;\\n    flex-direction: row;\\n    list-style: none;\\n    margin-top: 10px;\\n    margin-left: 25px;\\n    position: fixed;\\n    top: 0px;\\n    z-index: 4;\\n}\\n.nav-link {\\n    margin-right: 25px;\\n}\\n.nav-link > a {\\n    color: white;\\n}\\n.link-container {\\n    margin-top: 0px;\\n    padding: 5px;\\n    border-radius: 4px;\\n    transition: all ease-in-out .2s;\\n    background-color: transparent;\\n}\\n.link-container:hover {\\n    background-color: #969696b2;\\n    cursor: pointer;\\n}\\n.link-container > .link {\\n    color: white;\\n}\\n.article-list {\\n    border-left: 5px solid white;\\n}\\n.article-list > li {\\n    margin: 10px;\\n    font-size: larger;\\n}\\n/* ************************* */\\n/* Blur styles */\\n/* ************************* */\\n@supports (backdrop-filter: blur(12px)) {\\n    .blurred {\\n        backdrop-filter: saturate(180%) blur(13px) ;\\n    }\\n    .nav {\\n        background-color: #5d5d5dc2;\\n    }\\n}\\n@supports not (backdrop-filter: blur(12px)) {\\n    .blurred-content {\\n        padding:0 1rem;\\n        padding-top: 22px;\\n        margin-left: -15px;\\n        position:absolute;\\n        top:0;\\n        left:0;\\n        right:0;\\n        filter:url(#blur-effect);\\n        opacity:0.3;\\n        z-index: 3;\\n        height: 50px;\\n    }\\n}\",\"js\":\"const NavBar = ({transparent}) => {\\n    React.useEffect(() => {\\n        if (!transparent) { return; }\\n        // adapted from this CodePen: https://codepen.io/sqlexception/pen/dnaCx\\n        const blurTarget = document.querySelector('.blur-target');\\n        const duplicate = blurTarget.cloneNode(true);\\n        const targetBlurred = document.createElement('div');\\n        targetBlurred.className = 'blurred-content';\\n        targetBlurred.appendChild(duplicate);\\n\\n        const navContainer = document.querySelector('.nav-container');\\n        navContainer.appendChild(targetBlurred);\\n\\n        const contentWrapper = document.querySelector('#content')\\n        window.addEventListener('scroll', function () {\\n            duplicate.style.marginTop = -this.scrollY + 'px';\\n        });\\n    }, [transparent])\\n    return (\\n        <div className=\\\"navbar\\\">\\n            <ul className=\\\"nav-links-container\\\">\\n                <li className=\\\"nav-link\\\">\\n                    <a href=\\\"/\\\">\\n                        <div className=\\\"link-container\\\">\\n                            <a className=\\\"link\\\" style={{ fontSize: 'larger' }}>Home</a>\\n                        </div>\\n                    </a>\\n                </li>\\n                <li className=\\\"nav-link\\\">\\n                    <a href=\\\"/blog\\\">\\n                        <div className=\\\"link-container\\\">\\n                            <a className=\\\"link\\\" style={{ fontSize: 'larger' }}>Blog</a>\\n                        </div>\\n                    </a>\\n                </li>\\n            </ul>\\n            <div className=\\\"nav blurred\\\">\\n            </div>\\n        </div>\\n    )\\n};\\n\\nclass HelloWorld extends React.Component {\\n  render() {\\n    // Tells React what HTML code to render\\n    return (\\n      <>\\n        <div class=\\\"nav-container\\\">\\n          <NavBar transparent/>\\n        </div>\\n        <div class= \\\"container content blur-target\\\" id=\\\"content\\\" >\\n          <div class=\\\"blog-post-container\\\" style={{height: 1000}}>\\n           <img width=\\\"400px\\\" height=\\\"800px\\\" src=\\\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.imgur.com%2FQGd4ejk.jpg&f=1&nofb=1\\\" />\\n            </div>\\n        </div>\\n        <svg id=\\\"svg-image-blur\\\">\\n            <filter id=\\\"blur-effect\\\">\\n                <feGaussianBlur stdDeviation=\\\"10\\\" />\\n            </filter>\\n        </svg>\\n      </>\\n    )\\n  }\\n};\\n\\n// Tells React to attach the HelloWorld component to the 'root' HTML div\\nReactDOM.render(<HelloWorld />, document.getElementById(\\\"root\\\"))\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-06-09T16:48:28.000Z\",\"updated_at\":\"2020-06-09T18:00:10.000Z\",\"title\":\"Cross-browser glass menu bar apple style\",\"description\":\"\",\"slug_hash\":\"YzwwzWV\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY3NTgxNzQ0MX0.BP326U5yIR6mqqzIubOM8y4mmtNAtk3MUFoYRRAJKvg","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}