Discover the best sticky-items websites created by professional designers. Get inspired and start planning your perfect sticky-items web design today!

Smooth and perfect accordion using Javascript (jQuery) plus a thorough video tutorial (new one coming soon!) on how to customize it and copy it into your own existing project!

---------------------

*UPDATED: 03-15-2022
The entire code was redone and now made much simpler for you.  New settings object that allows you to change all the classes, set functional options like anchoring & scroll-to-top for active items, animation speed and more within one place. You don't have to touch any of the "codey" stuff.

You can also use your own icon for the accordion now as well instead of controlling that with CSS like before. Hope you enjoy it!

---------------------

Happy designing! 😉
-Noah

Perfect Accordion (UI Kit)

Perfect Accordion

Prototype from late 2017 that uses fullpage.js for section 'snap'.

*There are a few bugs / clean up items I never had a chance to address - The list below is what I remember (not exhaustive):

1) Optimizations For Mobile (making the title a link, cross-browser testing, etc.)   
 
2) Improved Performance (Firefox)

Diagonal Snap Scroll

A collection of Responsive Grid Tables of various sizes ranging from 2 to 10 columns. Style is simple, so you can color and border as you wish. There are basically two row classes, Header and Data, you can modify the column spacing by changing the row width or grid gaps, but they both need to have the same width or gap to align.  Drop a collection list below the header row, and than drop a data row below the list item to connect to a collection list. The top row and left column are seton sticky to have a freese pane effect.

Table Templates Collection

table-templates-collection

Inspired by the new Youtube app UI for the Apple TV.

Tutorial: https://www.youtube.com/watch?v=E0jbNJ6M494

Sticky Menu Hover

Sticky Draggable Menu Items

Welcome to daily interaction #83.

This demo showcases a fullscreen menu animation on click.

This one was a bit of work :P, but I like the way this menu feels. Could be great for a softer or more elegant website. The reason it took some work is because an animation had to be applied to the menu item name, the underline, and the menu item number. Because the menu items stagger I was not able to apply the animations to class names so I had to individually apply the same animations to each menu item, and then stagger them using the delay option in IX2. It was a bit tedious, but I think the result is worth it :).

On the second click though I was able to apply the same animations to child classes of the menu items because I just need to reset the animations, so that part was quick. I just hid and faded out the menu wrapper and then reset all the menu items to their initial states and position.

Enjoy 👍.

This menu was inspired by: https://moves.basicagency.com/

WebDev for You - Daily Interaction #83

WebDev For You - Daily Interaction #83

A simple accordion featuring very smooth animations when opening and closing each item.

----
👋 I'm available for work: forsjonathan.com

Fartlek

Accordion with smooth opening animations

This pricing table has the feature of being completely customizable by CMS.
You can switch between monthly and yearly plans, automatically updating prices and for each item in the list, you can insert a pop-up for further information.

Features:
- CMS contents
- Change subscription switch
- Automatic price update
- Features list with pop-up
- Awesome animations
- Beautiful and responsive design

Don't waste your time editing texts, prices and images within the Designer.
With the power of CMS, it's really another story 😎

Product page: https://www.slashmint.com/product/cms-pricing-table-pro

Enjoy 💪

CMS Pricing Table ⚡  PRO

CMS Pricing Table ⚡ PRO

With this solution you can use the filters in the cms collection items. 
The project has a collection list page and a collection item page. On both you can set a filter (in this example the facebook link is set or not set). When using this filter, the navigation will show only the items that match the filter settings

Thanks to the first contributors @hammerhouse and @lux in the posts below

https://forum.webflow.com/t/native-linking-to-previous-and-next-post-or-page-using-cms/19525/2

and 

https://forum.webflow.com/t/native-linking-to-previous-and-next-post-with-titles-using-cms/55240 

on the webflow forum. I added some changes in the script part. So please read the posts, specially how to set the ID's and then use the script in the custom code part of the collection item page. It will only work after publishing.

Make sure to set the style display from inline to none to hide the collection list in the collection item page

CMS Navigation

CMS post navigation with filter

!0 column grid table, with Freeze Pane (like in excel) features using sticky to keep top row and lleft column fixed. Simple styling so you can do what ever you want via borders and colurs. Should be flexible to change re - size. Drop down a CMS below the header row and throw a data row in the collection item and you are good to link to a collection list. Any suggested improvements welcome.

Discover sticky items websites built by the Webflow community

Discover sticky items websites built by the Webflow community