Jump to content
Saying Goodbye to Community

  • Other

    15 codes in this category

    • 4,564 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        CSS dropdown menu that is accessible to screen readers and keyboard users. Tab through the dropdown link and the links will show up as if hovered over. Shift-tabbing will always tab to the previous top-level link if already focusing a top-level link.

         

        I've only coded in support for the first level of a dropdown, though duplicating the structure of the nested list and adding appropriate CSS should be fairly straightforward as the CSS is labeled. Too lazy to code in a specific mobile style for this, may update later.

         

        The dropdown will work in all major browsers. IE lacks :focus-within support, but the hover will still work. Edge will need the dropdown links hovered over in order to tab through them, otherwise it will skip to the next top-level link. Nothing to be done about either case except to use a modern browser that supports the newest CSS standards.

         

        Working example and code can also be found on my codepen, here.

      • User Rating:

    • 3,132 views Last updated

      • Responsive
      • Type: HTML
      • Description:

        Makes use of tabindex, z-index/opacity and :focus-within for a hover that is responsive on mobile and accessible to screen readers and keyboard users. Add your own styling to the .container and .hover classes.

         

        Aside from typical hover usage, the hover can be tabbed onto (for keyboard/screen reader users) and the content will remain showing until tabbed out of. Clicking inside the hover area will produce the same effect, and allow you to move the cursor on or off the hover area without losing sight of what's contained within.

         

        Working, more styled version on my codepen, here.

      • User Rating:

    • 3,518 views Last updated

      • Responsive
      • Type: HTML
      • Description:

        These CSS radio-button tabs will turn into an accordion at lower screen widths. They are accessible to screen readers and keyboard users as well via the tab key (tab onto and off of the active tab), and arrow keys to switch between tabs.

         

        DoHTML friendly, multiple instances can be used on the same page. No javascript used. Follow the comments in the CSS to change styles. Codepen is here.

      • User Rating:

    • 5,854 views Last updated

      • Responsive
      • Type: HTML
      • Description:

        Have multiple site banners and don't want to create a code block for each one? This JavaScript adds a click event to each banner image that updates the bcg-code block with a new image url and alt text. The included CSS is very minimal and the HTML can be altered, though you should keep the bcg-banner and bcg-code wrappers as is. Images from Unsplash. Note:  As the preview and code tabs here parse differently, the preview might not look correct, but the code to copy will be right.

      • User Rating:

    • 2,167 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Character wanted ad! One big gif; hover, list... lots of options here! ❤️ Please review!

      • User Rating:

    • 3,541 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Pretty lore code! ❤️ Please review!

      • User Rating:

    • 2,479 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        A simple-colored tabbed moodboard/lyrics/request/whatever-you-want-to-show-off code! It currently has 5 tabs, but more can be added easily!

      • User Rating:

    • 1,557 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Another moodboard (6 pictures) based on Danganronpa! Hover + lyrics! Please review ❤️

      • User Rating:

    • 2,194 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Simple, fun little quiz template based on MTT's quiz in Undertale! Please review ❤️

      • User Rating:

    • 3,815 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Simple moodboard! 9 images + room for lyrics; Please review! ❤️

      • User Rating:

    • 1,831 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Definitely my most popular code - a palette template! 2 images! Please review ❤️

      • User Rating:

    • 2,403 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        This is probably my most intensive code - it seeks to emulate the app V-Live! Please review ❤️

      • User Rating:

    • 2,557 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Character request, could also be used to display your own characters! Hover + 4 images; Please review! ❤️

      • User Rating:

    • 2,991 views Last updated

      • Responsive
      • Type: HTML
      • Description:

        Simple tab functionality written in JavaScript. Included in the code is two sets of tabs to show you how these can work independently. Otherwise, have fun and use as you wish!

      • User Rating:

    • 1,910 views Last updated

      • Responsive
      • Type: HTML
      • Description:

        Need a tabbed plotter, shipper or profile application, or anything else? This code can be adapted for any use. It will not be responsive if you start putting fixed widths on the divs.

         

        It will work on any forum software, in posts or in HTML templates. Just shove in the information you want and you're good to go.

      • User Rating:
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.