Stumbli - Discover New and the Best Fun

Breadcrumbs & Multi-Step Indicator A handy snippet to create responsive CSS breadcrumbs or multi-step indicators with ease. Breadcrumbs and multi-step indicators share a similar structure (a simple list of items), we created a handy snippet to create and customize them with a preset of time-saving classes Creating the structure The  HTML structure  is very basic: an ordered list of items, wrapped into a  <nav> element. <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> Adding style & Guidelines We created 2 main classes for the element: .cd-breadcrumb and .cd-multi-steps. Although they share a similar style, we wanted to differentiate the two web components sin...

Mega Dropdown A responsive and easy to customise mega-dropdown component.A responsive mega dropdown component with sub-categories. Here is a quick animation we put together to show you our mobile vs desktop approach: Quick animation Creating the structure The  HTML  is structured in 2 main elements: the  <header> , containing the dropdown ( .cd-dropdown-wrapper ), and the  <main>  for all the main content. The  .cd-dropdown-wrapper  contains a  .cd-dropdown-trigger , to trigger the dropdown, and a  .cd-dropdown , which is composed of nested unordered lists. <header> <div class="cd-dropdown-wrapper"> <a class="cd-dropdown-trigger" href="#0">Dropdown</a> <nav class="cd-dropdown"> <h2>Title</h2> <a href="#0" class="cd-close">Close</a> <ul class="cd-dropdown-content"> <li> <form class="cd-search"> ...