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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

  • By
    Making the Firefox Logo from HTML

    When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt. That had to change. The basic...

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!