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
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    Spatial Navigation

    Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply...

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

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!