Hugo Future Imperfect Slim

Tracey Jaquith · PoohBot Pictures

Technophile · Optimist · Cyclist · Archivist · Design · Video · TV · Nomad · Docker

tracey pooh

2-Minute Read

I made new “slide-responsively” for image menus, which is minimal standalone HTM/CSS/JS inspired by “sliding-door” from Wayne Connor

I’ve just kept the sliding door idea, and made it independent of a WordPress theme so it can be added to a site using another theme. Hover over some of the images just above ☝🏽 to see it in action.

Try shrinking the width of the browser or rotating your mobile device.

My github repo of this plugin.

Just replace the 7 images and links and go!

Here’s how simple it all is (for example standalone usage, wordpress not required..):

<!-- slide-responsibly @tracey_pooh 2015: Insipred by wordpress "sliding-door" theme - rewritten to be responsive -->
<div class="slide-responsively">
    <li><a href="//"
                              style="background-image:url(     ">about</a></li>
    <li><a href="/biking/"    style="background-image:url(    ">biking</a></li>
    <li><a href="/favorites/" style="background-image:url(">favorites</a></li>
    <li><a href="/quotes/"    style="background-image:url(    ">quotes</a></li>
    <li><a href="/lapses/"    style="background-image:url(">lapses</a></li>
    <li><a href="/video/"     style="background-image:url(     ">video</a></li>
    <li><a href="/photos/"    style="background-image:url(    ">photos</a></li>

.slide-responsively {
  overflow: hidden;
  border-style: none;
  padding: 8px 0 20px 0px;
  margin: 0;

.slide-responsively ul {
  list-style: none;
  display: block;
  height: 200px;
  padding: 0;
  margin: 0;

.slide-responsively ul li {
  float: left;
  -webkit-transition: width 0.5s ease;
     -moz-transition: width 0.5s ease;
       -o-transition: width 0.5s ease;
          transition: width 0.5s ease;

.slide-responsively ul li a {
  text-indent: -1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right: 2px solid #fff;
  height: 200px;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  /* better nonrepeated noninline CSS */
  background-position: 0% 50%;
  background-repeat: repeat;
  background-attachment: scroll;

.slide-responsively ul li:last-child a {
  border-right-style: none;


.slide-responsively ul li       { width:14%;   } /* 100% / 7  (using 7 images) */
.slide-responsively ul    { width:31%;   } /* about 1/3 total width */
.slide-responsively ul li.out   { width:11.5%; } /* (100% - 31%) / 6 */

@media (max-width:700px) { /* for quite narrow viewports, eg: phones */
  .slide-responsively ul  { width:50%;   } /* about 1/2 total width */
  .slide-responsively ul li.out { width:8.3%;  } /* (100% - 51%) / 6 */

<script src=""></script>
( function ($) {
  $(document).ready(function() {
    // DOM ready, page still (likely) loading images, etc...
    $('.slide-responsively li').mouseenter(function(e) {
      $('.slide-responsively li').addClass('out')
    $('.slide-responsively li').mouseleave(function(e) {
      $('.slide-responsively li').removeClass('out')
}) ( jQuery )

Say Something


tracey pooh's Gravatar
yay!! thanks so much, Wayne! glad we’ve connected and I’ve loved your signature “sliding-door” theme for years! 😎

Recent Posts



#spottheshuttle 1940s 1st-person 3d accident aids-lifecycle airplane animals appeltart apple-pie apple-watch architecture arkit art ascii-art asia augmented-reality baking bali bay-area biking birthday cafe-racer camaro camera-video camping candy cars cat-pee cat-psychology cats cloud coding college colorspaces computer-vision cornell crictl css dark-mode decaf deinterlace desert design diy docker documentary driving ducting ebgb ebgc emacs endeavour family ffmpeg food games geek gitlab golden-gate-bridge google-cardboard gravel-bike green-magic-man h.264 hack highway-1 home https hugo hyperlapse internet-archive ios iphone javascript k3s kubernetes landscapes linux lisp luke-battling-darth mac macosx markdown mashup metal montclair motion-jpeg motorcycle mountain-biking mplayer mt-tamalpais nasa new-bay-bridge news ninja oakland partioning php php-htm-mode politics protest rancher recording remaster remix remodel shuttle small-town star-wars swift tahoe technical thirsty-thursday time-lapse time-machine timing-belt-adjustment top-end-rebuild tracey traefik training-ride travel vacation valve-job video virtual-reality vlog vscode weekend-mechanic work x264 xcode yuvj420p zx6


tracey is a nonstop dance party. so you dont have to. dont ask me about containers. thanks for dropping by today. you look nice.