Hugo Future Imperfect Slim

Tracey Jaquith · PoohBot Pictures

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

tracey pooh

2 minutes 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">
  <ul>
    <li><a href="//poohBot.com/2015/05/06/slide-responsively-minimal-standalone-htmcssjs-inspired-by-sliding-door-from-wayne-connor"
                              style="background-image:url(https://poohBot.com/img/nav/about.jpg)     ">about</a></li>
    <li><a href="/biking/"    style="background-image:url(https://poohBot.com/img/nav/biking.jpg)    ">biking</a></li>
    <li><a href="/favorites/" style="background-image:url(https://poohBot.com/img/nav/favorites.jpg)">favorites</a></li>
    <li><a href="/quotes/"    style="background-image:url(https://poohBot.com/img/nav/quotes.jpg)    ">quotes</a></li>
    <li><a href="/lapses/"    style="background-image:url(https://poohBot.com/img/nav/timelapses.jpg)">lapses</a></li>
    <li><a href="/video/"     style="background-image:url(https://poohBot.com/img/nav/video.jpg)     ">video</a></li>
    <li><a href="/photos/"    style="background-image:url(https://poohBot.com/img/nav/photos.jpg)    ">photos</a></li>
  </ul>
</div>


<style>
.slide-responsively {
  overflow: hidden;
  border-style: none;
  padding: 8px 0 20px 0px;
  margin: 0;
  max-width:1000px;
 }

.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;
  display:block;
  overflow:hidden;
  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;
}

/* THE RESPONSIVE WIDTHS */

.slide-responsively ul li       { width:14%;   } /* 100% / 7  (using 7 images) */
.slide-responsively ul li.in    { 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 li.in  { width:50%;   } /* about 1/2 total width */
  .slide-responsively ul li.out { width:8.3%;  } /* (100% - 51%) / 6 */
}
</style>



<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
( function ($) {
  $(document).ready(function() {
    // DOM ready, page still (likely) loading images, etc...
    $('.slide-responsively li').mouseenter(function(e) {
      $('.slide-responsively li').addClass('out')
      $(this).removeClass('out').addClass('in')
    })
    $('.slide-responsively li').mouseleave(function(e) {
      $('.slide-responsively li').removeClass('out')
      $(this).removeClass('in')
    })
  })
}) ( jQuery )
</script>

Say something

Comments

tracey pooh's Gravatar

tracey pooh

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

Recent posts

See more

Categories

Tags

#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 cars cat-pee cat-psychology cats coding college colorspaces computer-vision cornell crictl css dark-mode decaf deinterlace desert design diy docker documentary ducting emacs endeavour family ffmpeg food games geek gitlab golden-gate-bridge google-cardboard 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 mashup metal montclair motion-jpeg motorcycle mplayer 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 technical time-lapse time-machine timing-belt-adjustment top-end-rebuild tracey traefik training-ride vacation valve-job video virtual-reality vlog vscode weekend-mechanic work x264 xcode yuvj420p zx6

About

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