GitHub-Style Sliding Links

By  on  

GitHub seems to change a lot but not really change at all, if that makes any sense; the updates come often but are always fairly small. I spotted one of the most recent updates on the pull request page. Links to long branch names now have their text visually truncated, and upon hover, the text animates to its full value. The CSS to accomplish this task is fairly simple, so let me show you how to make this happen!

The HTML

Adding an A element is obvious but less obvious is that the element must be wrapped with another element (you'll see why in the CSS section):

<p class="github-branch-wrap">
	Pull request from: <a href="" class="github-branch">david-walsh-test-branch-name</a>
</p>

Simples.

The CSS

The wrapping element requires a max-width and position of relative:

.github-branch-wrap {
	max-width:690px;
	position:relative;
}

The animation centers around CSS transitions and the max-width property paired with overflow:

.github-branch {
	position: relative;
	height: 24px;
	display: inline-block;
	top: 7px;
	padding: 0 7px;
	background: #444;
	background: -moz-linear-gradient(#444, #222);
	background: -webkit-linear-gradient(#444, #222);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#222222')";
	border: 1px solid black;
	border-radius: 3px;
	color: white;
	font-family: Consolas,"Liberation Mono",Courier,monospace;
	font-size: 13px;
	line-height: 24px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: top;
	z-index: 100;
	
	max-width: 125px;
	transition: .2s max-width linear;
	-o-transition: .2s max-width linear;
	-moz-transition: .2s max-width linear;
	-webkit-transition: .2s max-width linear;
	-ms-transition: .2s max-width linear;
}

/* Transition to complete width! */
.github-branch:hover, .github-branch:active {
	max-width: inherit;
}

Also note the nice touch of text-overflow:ellipsis -- this adds the "..." during the plain state.

I didn't like the effect at first, but it's grown on me, and actually does have some value. There's definitely some clever thought behind the effect, and it's the the type of effect I admire: simple but purposeful. Well done GitHub devs!

Cloudinary

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

  • By
    Record Text Selections Using MooTools or jQuery AJAX

    One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google...

Discussion

  1. why do you wrap the a-tag into the paragraph? If you change the :hover max-width from inherit to 690px it works without the p-tag (in Chrome).

  2. Josephy
    $('#LOOKS').html('COOL') 
  3. Amazing CSS Slide LInks

    Thanks david

  4. Jesse Glacken

    Works great! Only thing I’d add is a :focus selector to the list of selectors at the end. We’re not all fortunate enough to be able to use mice (and some of us prefer keyboards). :)

  5. Great!!! I was looking for this great thing..

  6. I like the effect, but it fails completely in Internet Explorer 7-9 :(

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!