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!

Recent Features

  • 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...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.

  • By
    HTML5&#8217;s placeholder Attribute

    HTML5 has introduced many features to the browser;  some HTML-based, some in the form of JavaScript APIs, but all of them useful.  One of my favorites if the introduction of the placeholder attribute to INPUT elements.  The placeholder attribute shows text in a field until the...

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!