Aaaa

Category: Navbars Author: sireqpetr Language: CSS Stars: 11 Forks: 1

Live Preview

Overview

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en" class=" "> <head> <meta name="robots" content="index, follow" /> <meta name="Mediapartners-Google" content="index, follow" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="description" content="Doodle radically simplifies the process of scheduling events, meetings, appointments, etc. Herding cats gets 2x faster with Doodle. For free!" /> <meta name="copyright" content="Doodle AG, Switzerland" /> <meta name="application-name" content="Doodle" /> <meta property="fb:admins" content="146060788741700" /> <title>Doodle: Not found </title> <meta property="og:image" content="http://doodle.com/graphics/static/facebookSharingThumbnail.png" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://doodle.com/" /> <meta property="og:title" content="Doodle: easy scheduling" /> <meta property="og:description" content="Doodle radically simplifies the process of scheduling events, meetings, appointments, etc. Herding cats gets 2x faster with Doodle. For free!" /> <link rel="stylesheet" type="text/css" href="/dist/normal/vendor-styles.47dc4b6d8088a5473d3d.css" /> <link rel="stylesheet" type="text/css" href="/dist/normal/error-errorTemplate.109031a5a727b3259a5c.css" /><style type="text/css" title="premium">body #page { margin-top: 15px}</style> <script src="/dist/normal/jquery.5b4d89fb41622e043ef4.js"></script> <link rel="shortcut icon" type="image/x-icon" href="/dist/normal/i/b44327677e7590e22fb6e598d6d53e2b.ico" /> <link rel="apple-touch-icon" href="/dist/normal/i/650dd6854eeca2499449e1a762978fc2.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/dist/normal/i/15fa798c6b9309ec274f6cae3108f7e2.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/dist/normal/i/82e622019f16c173d9eb6b9ab484fedd.png" /> <meta name="msapplication-TileImage" content="/dist/normal/i/d61d748643bc62b974e798209fc74147.png" /> <meta name="msapplication-TileColor" content="#ffffff" /> <link rel="canonical" href="https://doodle.com/error/notFound.html" /> </head> <body> <noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-CFKQ" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <script type="text/javascript">//<![CDATA[ dataLayer = [{ 'country': 'BR', 'language': 'en', 'adsFree': 'true', 'certificationResource': 'else', 'isMainPage': '', 'creationDevice': '', 'isKISSEnabled': 'yes', 'KISSKey': 'ff0508294d77927c9b0d452b1ecfe4e761b16a91' }]; /*]]> */</script><script type="application/json" id="doodleDataLayerCustomDefinitions">{"environment":{"systemType":"production","systemVersion":"classic"},"page":{"pageType":"other","userLoginState":false,"userType":"free user"},"poll":{},"user":{"userCountry":"BR","userPlanType":"free"}}</script><script type="application/json" id="doodleDataLayerEvents">[]</script><script type="application/json" id="doodleDataLayerCookieDeletions">[]</script><script type="text/javascript">!function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};t.m=e,t.c=n,t.p="/dist/normal/",t(0)}({0:function(e,t,n){n(1255),e.exports=n(1257)},1255:function(e,t,n){"use strict";n(1256)()},1256:function(e,t){"use strict";e.exports=function(){window.dataLayer=window.dataLayer||[];var e=window.dataLayer;try{var t={customDefinitions:null!==document.getElementById("doodleDataLayerCustomDefinitions")?JSON.parse(document.getElementById("doodleDataLayerCustomDefinitions").innerHTML):{},events:null!==document.getElementById("doodleDataLayerEvents")?JSON.parse(document.getElementById("doodleDataLayerEvents").innerHTML):[],cookieDeletions:null!==document.getElementById("doodleDataLayerCookieDeletions")?JSON.parse(document.getElementById("doodleDataLayerCookieDeletions").innerHTML):[]};Object.keys(t.customDefinitions).length>0&&e.push(t.customDefinitions),e.push({page:{viewportWidth:Math.max(document.documentElement.clientWidth,window.innerWidth||0),viewportHeight:Math.max(document.documentElement.clientHeight,window.innerHeight||0)}}),t.events.forEach(function(t){e.push(t)}),t.cookieDeletions.forEach(function(e){document.cookie=e})}catch(e){(window._errs||[]).push(e)}}},1257:function(e,t){"use strict";!function(e,t,n,o){var i,a;e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"}),i=t.createElement("script"),i.async=!0,i.type="text/javascript",i.src="//www.googletagmanager.com/gtm.js?id="+o+("dataLayer"!==n?"&l="+n:""),a=t.getElementsByTagName("script")[0],a.parentNode.insertBefore(i,a)}(window,document,"dataLayer","GTM-CFKQ")}}); //# sourceMappingURL=tagmanager-bundle.6aa69cf9e6d011acc789.js.map</script> <script type="text/javascript"> //<![CDATA[ doodleJS = { guest: { viewLocale: "en_US", country: "BR", // can be UNKNOWN_COUNTRY_CODE ("ZZ") region: "BR:null", user: {"features":{"useCustomURL":false,"useCustomLogo":false,"quickReply":false,"extraInformation":false,"customTheme":false,"hideAds":false,"useSSL":false},"facebookAuthUrl":"https://graph.facebook.com/v2.8/oauth/authorize?scope=email&client_id=151397988232158&state=%7B%22is_mobile%22%3A%22false%22%2C%22redirect_uri%22%3A%22%22%2C%22locale%22%3A%22en%22%2C%22oauth_anti_csrf_token_cookie%22%3A%22oauth_anti_csrf_token_placeholder%22%7D&redirect_uri=https%3A%2F%2Fdoodle.com%2Fnp%2Fmydoodle%2Fthirdparty%2FfacebookConnect&display=touch","isBusiness":false,"loggedIn":false,"googleAuthUrl":"https://accounts.google.com/o/oauth2/auth?client_id=282023944456.apps.googleusercontent.com&redirect_uri=https://doodle.com/np/mydoodle/thirdparty/googleConnect&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&state=%7B%22is_mobile%22:%22false%22,%22callbackUrl%22:%22https://doodle.com/np/mydoodle/thirdparty/googleConnect%22,%22redirect_uri%22:%22%22,%22locale%22:%22en%22,%22oauth_anti_csrf_token_cookie%22:%22oauth_anti_csrf_token_placeholder%22%7D","googleAuthUrlLoginAndContacts":"https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force&client_id=282023944456.apps.googleusercontent.com&redirect_uri=https://doodle.com/np/mydoodle/thirdparty/googleConnect&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20https://www.google.com/m8/feeds/&state=%7B%22doodleScope%22:%22CONTACTS%22,%22is_mobile%22:%22false%22,%22callbackUrl%22:%22https://doodle.com/np/mydoodle/thirdparty/googleConnect%22,%22redirect_uri%22:%22%22,%22locale%22:%22en%22,%22oauth_anti_csrf_token_cookie%22:%22oauth_anti_csrf_token_placeholder%22%7D","isPremium":false,"isTrial":false,"outlookComAuthUrlContacts":"https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=de3c96ed-0fa3-4310-8472-290bb8767230&response_type=id_token+code&response_mode=form_post&scope=openid+offline_access+User.Read+Calendars.ReadWrite+Contacts.Read&nonce=j9iuggv35wtibzz3pfjdhf6psu634z03&redirect_uri=https%3A%2F%2Fdoodle.com%2Fmydoodle%2FupgradeOutlookComCodeAndConnect.html&state=%7B%22type%22%3A%22CONTACTS%22%2C%22oauth_anti_csrf_token_cookie%22%3A%22oauth_anti_csrf_token_placeholder%22%7D"}, mandator: {"features":{"useCustomURL":false,"useCustomLogo":false,"quickReply":false,"extraInformation":false,"customTheme":false,"hideAds":false,"useSSL":false},"isMandator":false} }, ads: {}, callbacks: {}, // only used for iframe hacks (and file upload?) adCountingDeferred: $.Deferred(), l10n: null, // Object, set later by <script> tag, so it is cached by the browser templates: null, // Object, set later by <script> tag, so it is cached by the browser staticPageLinks: { currentPage: {"de":"","no":"","fi":"","sv":"","ru":"","pt":"","bg":"","lt":"","en":"","it":"","pt_BR":"","fr":"","hu":"","es":"","eu":"","cs":"","en_GB":"","cy":"","uk":"","pl":"","da":"","ca":"","nl":"","tr":""}, helpLink: "/help", privacyLink: "/privacy-policy", termsLink: "/terms-of-service" }, languages: [{"text":"čeština","value":"cs"},{"text":"Dansk","value":"da"},{"text":"Deutsch","value":"de"},{"text":"English","value":"en"},{"text":"español","value":"es"},{"text":"français","value":"fr"},{"text":"italiano","value":"it"},{"text":"magyar","value":"hu"},{"text":"Nederlands","value":"nl"},{"text":"norsk","value":"no"},{"text":"Português (BR)","value":"pt_BR"},{"text":"suomi","value":"fi"},{"text":"svenska","value":"sv"},{"text":"Türkçe","value":"tr"},{"text":"русский","value":"ru"}] }; // loads doodleJS.data and config $.extend(true, doodleJS, {"data":{"hostName":"worker4","timeZone":"America/Sao_Paulo"},"config":{"cookieDomain":"doodle.com","facebookAppId":"151397988232158","ifhcbPrefix":"hg6sdyqyos89jgd8","textOnly":false,"noLogin":false,"hosts":["http://worker1-test.doodle.com:80","http://worker2-test.doodle.com:80","http://worker4-test.doodle.com:80","http://worker5-test.doodle.com:80","http://worker10-test.doodle.com:80","http://worker11-test.doodle.com:80"],"baseSSLUrl":"https://doodle.com","googleOAuthUrl":"https://accounts.google.com/o/oauth2/auth?client_id=282023944456.apps.googleusercontent.com&redirect_uri=https://doodle.com/api/v2.0/users/google-code-for-login&response_type=code&scope=profile%20email&state=%7B%22is_mobile%22:%22true%22,%22callbackUrl%22:%22https://doodle.com/api/v2.0/users/google-code-for-login%22,%22redirect_uri%22:%22PLACEHOLDERTOREPLACE%22,%22locale%22:%22en%22,%22oauth_anti_csrf_token_cookie%22:%22oauth_anti_csrf_token_placeholder%22%7D","facebookOAuthUrl":"https://graph.facebook.com/v2.8/oauth/authorize?scope=email&client_id=151397988232158&state=%7B%22is_mobile%22%3A%22true%22%2C%22redirect_uri%22%3A%22PLACEHOLDERTOREPLACE%22%2C%22locale%22%3A%22en%22%2C%22oauth_anti_csrf_token_cookie%22%3A%22oauth_anti_csrf_token_placeholder%22%7D&redirect_uri=https%3A%2F%2Fdoodle.com%2Fapi%2Fv2.0%2Fusers%2Ffacebook-code-for-login&display=touch"}}); d = {}; //]]> </script> <script type="text/javascript" src="/np/config?locale=en_US"></script> <script type="text/javascript" src="/np/nls/en_US/l10nScript"></script> <div id="container"> <div id="banner" class="doodleadNonAbs"> </div> <div id="page"> <div id="skyrightcontainer" class="transborder"> <div id="skyright" class="doodlead"> </div> </div> <div id="skyleft" class="doodlead transborder"> </div> <div id="background" class="doodlead"> <div id="dyn"> </div> </div> <div id="doodlecontainer"> <div id="doodle"> <div id="header"> <form id="fakeLoginForm" target="fakeLoginIframe" action="https://doodle.com/np/mydoodle/fakelogister" method="POST" style="display:none "> <input type="text" id="fakeeMailAddress" name="eMailAddress" /> <input type="password" id="fakepassword" name="password" /> <input type="submit" /> </form> <iframe id="fakeLoginIframe" name="fakeLoginIframe" style="display:none "></iframe> <script type="text/javascript"> //<![CDATA[ doodleJS.config.noLogin = true; //]]> </script> <div id="dynamicHeader" class="dynamic-header"><div class="responsive-header hidden-xs"> <div class="fixed-header"> <nav class="navbar navbar-default" role="navigation"> <div> <div class="navbar-header"> <a class="navbar-brand" href="/"> <div class="doodle-logo logo"></div> </a> </div> </div> </nav> </div></div><header class="d-headerView visible-xs"> <div> <a class="d-backOrToHome d-noNavigationText" href="false"> </a> <div class="d-grow"></div> </div></header> </div> <script src="/dist/normal/error-errorTemplate.109031a5a727b3259a5c.js"></script> </div> <noscript> <h3 class="red responsiveContent">We are sorry, but Doodle only works with JavaScript-enabled browsers.</h3> </noscript> <div id="content"> <div class="pageBanner fixedContent" id="dragonDictateWarning" style="display: none;"> <p class="pageBannerText">It seems that you are using the Dragon Dictate. Unfortunately, Doodle is currently not compatible with this browser plugin. You should either deactivate it, or use another browser for Doodle.</p> </div> <div class="contentPart fixedContent"> <div id="errorContent"> <div id="staticContentNon" class=""> <div class="spaceCBefore"> <a href="/"><img class="errorlogo" src="/dist/normal/i/9d6b54a76d5a7e5736b8a305706d33f5.png" /> </a> <h1 class="red error-title">Not found </h1> <div class="red error-code">404!</div> </div> <hr />It appears the page you were looking for doesn't exist. Sorry about that. <br /> <br /> <div class="pageHead spaceABefore spaceAAfter" style="text-align: center;">Maybe you were trying to go to one of these topics? <br /> <div class="maybefind"> <a href="/" class="btn">Home</a> <a href="/create" class="btn">Create poll </a> <a href="/features/calendar-connect" class="btn">Calendars </a> <a href="/account" class="btn">Manage Doodle account </a> <a href="/help" class="btn">Help </a> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="footer-menu"> <div class="footer-category columns4Layout"> <h4>Doodle</h4> <ul class="unstyled"> <li> <a href="/">Home</a> </li> <li> <a href="/about-doodle">About</a> </li> <li> <a href="http://en.blog.doodle.com/">Blog</a> </li> <li class="hidden-xs"> <a href="/about-doodle/team">Team</a> </li> <li> <a href="/about-doodle/jobs">Jobs</a> </li> <li> <a href="/press">Media Corner</a> </li> <li> <a href="/advertising">Advertise on Doodle</a> </li> </ul> </div> <div class="footer-category columns4Layout"> <h4>Features</h4> <ul class="unstyled"> <li> <a href="/features">Overview</a> </li> <li> <a href="/features/mobile">Doodle Mobile</a> </li> <li class="hidden-xs"> <a href="/premium">Premium Doodle</a> </li> <li> <a href="/features/calendar-connect">Calendar Connect</a> </li> <li class="hidden-xs"> <a href="/meetme">MeetMe</a> </li> <li> <a href="http://support.doodle.com/customer/en/portal/articles/664212">API</a> </li> </ul> </div> <div class="footer-category columns4Layout"> <h4>Support</h4> <ul class="unstyled"> <li> <a href="http://support.doodle.com/customer/portal/articles/761313-what-is-doodle-and-how-does-it-work-an-introduction">First Steps</a> </li> <li> <a href="/help">Help</a> </li> <li> <a href="/help/lost-and-found">Lost admin links</a> </li> <li> <a href="/specials">Use-cases</a> </li> <li><a href="/free-online-survey">Online Survey</a> </li> <li><a href="/meeting-scheduler">Meeting Scheduler</a> </li> <li><a href="/online-calendar">Online Calendar</a> </li> <li><a href="/online-scheduling">Online Scheduling</a> </li> <li><a href="/poll-maker">Poll Maker</a> </li> </ul> </div> <div class="footer-category columns4Layout"> <h4>Legal</h4> <ul class="unstyled"> <li> <a href="/terms-of-service">Terms</a> </li> <li> <a href="/privacy-policy">Privacy</a> </li> <li> <a href="/imprint">Imprint</a> </li> </ul> </div> </div> <div class="footer-copy contentPart"> <div class="row"> <div class="col-sm-4 col-xs-6 copyright"> © 2017 Doodle </div> <div class="col-sm-4 hidden-xs mandator-name"> </div> <div class="col-sm-4 col-xs-6 languageSwitch"> <div id="languageToggler" class="hidden-xs"> <div id="languages"> <div class="tickWhite"></div> <div class="tickBorder"></div> <h3>Choose your language</h3> <div class="languageSwitches"> <a data-language="en">English </a> <a data-language="cy">Cymraeg </a> <a data-language="hu">magyar </a> <a data-language="fi">suomi </a> <a data-language="de">Deutsch </a> <a data-language="da">Dansk </a> <a data-language="nl">Nederlands </a> <a data-language="sv">svenska </a> <a data-language="fr">français </a> <a data-language="en_GB">English (GB) </a> <a data-language="no">norsk </a> <a data-language="tr">Türkçe </a> <a data-language="eu">Basque </a> <a data-language="es">español </a> <a data-language="pl">polski </a> <a data-language="bg">български </a> <a data-language="ca">català </a> <a data-language="it">italiano </a> <a data-language="pt">português </a> <a data-language="ru">русский </a> <a data-language="cs">čeština </a> <a data-language="lt">Lietuvių </a> <a data-language="pt_BR">Português (BR) </a> <a data-language="uk">українська </a> </div> <hr /> <div class="smallText spaceDBefore"> <a href="http://support.doodle.com/customer/portal/articles/891017" target="_blank"> Cannot find your language? Incomplete or wrong translation? <strong> Help us translate Doodle </strong> </a> </div> </div> <div id="languageSwitch"> Choose language: <div class="language-anchor">English ▾</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ window.setTimeout(function () { // Dragon Dictate defines a global object named nuanria if (typeof(nuanria) !== "undefined" && document.getElementById("dragonDictateWarning")) { document.getElementById("dragonDictateWarning").style.display = "block"; } }, 1000); // seems that plugins are loaded after page //]]> </script> <script src="/dist/normal/ghostbuster.8c9c3bee4a0f89ccd70e.js"></script> <script type="text/javascript"> var ray = new Ghostbuster(); ray.run(function(isDetected) { if (window.dataLayer) { window.dataLayer.push({ page: { ghostbuster: isDetected.toString() } }); } }); </script> </body> </html>

aaaa was published by sireqpetr and stands out as one of the more thoughtfully crafted navbars implementations in the open source ecosystem.

It follows progressive enhancement principles: the markup remains semantic without JavaScript, while the interactive layer adds momentum, focus management, and keyboard accessibility for users who expect more than the default browser behavior.

The styling leans on modern CSS — custom properties, fluid spacing, and logical properties — so the snippet adapts cleanly to dark mode, right-to-left layouts, and constrained viewports without requiring a full design-system rewrite.

On the JavaScript side the code prefers small, dependency-free helpers over framework lock-in. That means you can paste it into a Vite, Astro, Laravel, Rails, or plain HTML project and ship it the same afternoon.

Because the snippet was extracted from a real production-grade repository it already accounts for the awkward edge cases — long labels that wrap to two lines, touch devices that fire spurious focus events, and assistive technology that needs a meaningful aria role.

Use it as-is for a prototype, or treat it as the starting point for a more opinionated component library. Either way, the heavy lifting around timing, easing, and state has been done for you.

Why this snippet works

The Aaaa component succeeds because it respects the boring constraints first. The markup is semantic, the styles fall back gracefully when JavaScript is unavailable, and the visible state never lies about what the underlying control is doing. Frontend code that follows that order tends to age well across browser releases, framework migrations, and design refreshes.

It is also small enough to read in a single sitting. There is no hidden orchestration layer, no compiled output you have to trust on faith, and no opinionated build pipeline you have to adopt. Drop the snippet into a fresh HTML file, open it in a browser, and you can see exactly what every line of code does.

How to integrate

Copy the block below into the relevant template in your project. If you already use a CSS reset or a design-system token file, you can swap the literal colour values for your own custom properties — the structural rules will continue to work.

For projects on a JavaScript framework, drop the markup into a presentational component (a .jsx, .vue, or .svelte file) and move the styles into your preferred styling layer. Keep the aria-* attributes intact when you do so; they are doing real accessibility work, not decorative prop-passing.

The code

CSS

<nav class="sf-nav">
  <a class="sf-brand" href="#">aaaa</a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
.sf-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #fff; box-shadow: 0 1px 0 #e2e8f0; }
.sf-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.sf-nav a { color: #1e293b; text-decoration: none; font-weight: 500; }
.sf-brand { font-weight: 700; color: #6366f1; }
</style>

Customising it for your brand

Most teams will want to retune two things before shipping: the colour palette and the timing curve. The colour values in the snippet were chosen to read well against a neutral background — replace them with tokens from your own design system to keep the component on-brand. The timing curves use values that feel responsive on both desktop and mobile; if your product has a more deliberate motion language, slow them down rather than speeding them up. Faster is rarely better.

It is also worth checking the snippet against the prefers-reduced-motion media query. If the component animates, wrap the animation rules in @media (prefers-reduced-motion: no-preference) so users who have asked for less motion are not subjected to extra movement they did not opt into.

Credits

This snippet was indexed from https://github.com/sireqpetr/aaaa, originally published by sireqpetr. SnippetForge does not host the original source code; we link to the canonical repository so you can star, fork, and follow the author for future updates.

navbars ★ 8 CSS · navbars-css-144046