Pens from Rob Golbeck https://codepen.io/robgolbeck/ en nospam@codepen.io Copyright 2024 2018-03-02T21:53:40-07:00 Pure Css vertical menu https://codepen.io/robgolbeck/pen/EQJPow https://codepen.io/robgolbeck/pen/EQJPow Rob Golbeck

See the Code - See it Full Page - See Details

Pure Css vertical menu no js needed

]]>
Pure Css vertical menu 2018-03-02T21:53:40-07:00
jQuery Accordion Toggle https://codepen.io/robgolbeck/pen/jwBZPL https://codepen.io/robgolbeck/pen/jwBZPL Rob Golbeck

See the Code - See it Full Page - See Details

A smooth accordion effect with jQuery and CSS3 that I used on a project recently. It's a variation on this tutorial: http://www.jqueryscript.net/menu/Super-Smooth-Accordion-Dropdown-Menu-with-jQuery-CSS3.html

]]>
jQuery Accordion Toggle 2017-06-19T18:05:04-07:00
Flyout navigation for mobile https://codepen.io/robgolbeck/pen/QGBRaY https://codepen.io/robgolbeck/pen/QGBRaY Rob Golbeck

See the Code - See it Full Page - See Details

Flyout navigation for mobile devices. See http://codepen.io/bradfrost/full/IEBrz from Brad Frost for another approach.

]]>
Flyout navigation for mobile 2016-12-11T09:00:17-07:00
The Left Nav Flyout https://codepen.io/robgolbeck/pen/GNBavy https://codepen.io/robgolbeck/pen/GNBavy Rob Golbeck

See the Code - See it Full Page - See Details

Facebook popularized a left navigation for mobile that’s quite unique. The nav is accessed by a menu icon, which reveals a tray that slides in from the left and moves the main content over to the right.

]]>
The Left Nav Flyout 2016-12-11T08:46:36-07:00
Smooth Responsive Text Transitions https://codepen.io/robgolbeck/pen/GNMmoj https://codepen.io/robgolbeck/pen/GNMmoj Rob Golbeck

See the Code - See it Full Page - See Details

Playing around with using CSS transitions and responsive text, based on this article: http://www.elliotjaystocks.com/blog/css-transitions-media-queries/

]]>
Smooth Responsive Text Transitions 2016-11-28T21:43:27-07:00
Fork: Responsive Google Map https://codepen.io/robgolbeck/pen/gLWyNX https://codepen.io/robgolbeck/pen/gLWyNX Rob Golbeck

See the Code - See it Full Page - See Details

Responsive google map that re-centers the pin on resize and load... Every other version I have seen does not recenter!

]]>
Fork: Responsive Google Map 2016-11-23T18:53:41-07:00
Make parts of an image clickable https://codepen.io/robgolbeck/pen/rWMeQQ https://codepen.io/robgolbeck/pen/rWMeQQ Rob Golbeck

See the Code - See it Full Page - See Details

This is one approach to add links to different parts of an image.

]]>
Make parts of an image clickable 2017-11-16T17:27:49-07:00
Fade in text sequentially and in sync with animated background https://codepen.io/robgolbeck/pen/yJmXEp https://codepen.io/robgolbeck/pen/yJmXEp Rob Golbeck

See the Code - See it Full Page - See Details

Load a sequence of paragraphs in sync with animated background images, using the jQuery fadeIn() method and backstretch.js.

]]>
Fade in text sequentially and in sync with animated background 2017-04-14T21:19:04-07:00
Background image opacity without affecting text https://codepen.io/robgolbeck/pen/pboBXN https://codepen.io/robgolbeck/pen/pboBXN Rob Golbeck

See the Code - See it Full Page - See Details

A responsive list of with background images. The background images have opacity, but the child elements remain solid.

]]>
Background image opacity without affecting text 2016-05-30T23:15:08-07:00
Full screen background image slideshow https://codepen.io/robgolbeck/pen/EyxgJE https://codepen.io/robgolbeck/pen/EyxgJE Rob Golbeck

See the Code - See it Full Page - See Details

Responsive, lightweight background image slideshow created with backstretch.js.

]]>
Full screen background image slideshow 2016-06-11T04:50:28-07:00