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

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

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

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!