Jump to content
Saying Goodbye to Community

  • Other

    15 codes in this category

    • 4,660 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,201 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,627 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:

    • 6,399 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,216 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,609 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

        Pretty lore code! ❤️ Please review!

      • User Rating:

    • 2,530 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,614 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

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

      • User Rating:

    • 2,214 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

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

      • User Rating:

    • 4,040 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

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

      • User Rating:

    • 1,882 views Last updated

      • Not Responsive
      • Type: HTML
      • Description:

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

      • User Rating:

    • 2,503 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,631 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:

    • 3,268 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,929 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.