Recreating the New Flat Twitter Navigation

  • follow us in feedly
Published January 19, 2014 by Brad Knutson
Recreating the New Flat Twitter Navigation

This past week, Twitter started rolling out their new user interface design for some users. Of the Twitter accounts I manage, about half of them have the new design, and the other half will most likely get it shortly.

Twitters new design is a great example of the continuing trend in web design towards “Flat UI Design.” Flat means solid colors, and moving away skeuomorphism.

New Twitter UI Design

I have to say, I’m a big fan of the new design. I particularly like the navigation design and functionality. The hover effect that has the bottom border slide up is pretty neat. I inspected the code and was able to recreate the design with HTMl and pure CSS.

The Demo

The HTML

The structure of the HTML for the navigation menu is pretty straight forward.


<div class="topbar">
<div class="global-nav">
<div class="global-nav-inner">
<div class="container">
<div role="navigation">
<ul class="nav" id="global-actions">
<li id="global-nav-home" class="home">
							<a href="#">
								<span class="Icon Icon--home Icon--large"></span>
								<span class="text">Home</span>
							</a>
						</li>
<li class="people active">
							<a href="#">
								<span class="Icon Icon--connect Icon--large"></span> <span class="text">Connect</span>
							</a>
						</li>
<li class="topics">
							<a href="#">
								<span class="Icon Icon--discover Icon--large"></span> <span class="text">Discover</span>
							</a>
						</li>
<li class="profile">
							<a href="#">
								<span class="Icon Icon--me Icon--large"></span> <span class="text">Me</span>
							</a>
						</li>
</ul></div>
</div>
</div>
</div>
</div>

The CSS

The CSS is where the magic happens. Twitter is using an icon-font to display the 4 navigation icons, so you can do something similar, or replace them with your own icons. I only use the icon font in my example for accuracy.

The sliding bottom border hover effect is created by modifying the height of the element, and using a CSS animation to make it smooth and seamless.

@font-face {
	font-family: 'rosettaicons';
	font-style: normal;
	font-weight: normal;
	src: url('rosetta-icons-Regular.eot');
	src: url('rosetta-icons-Regular.eot?#iefix') format('eot'),
	url('rosetta-icons-Regular.woff') format('woff'),
	url('rosetta-icons-Regular.ttf') format('truetype');
}
body {
	font-family: Arial,sans-serif;
}
.topbar {
	border-bottom: 1px solid #e8e8e8;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	-webkit-box-shadow: none;
	box-shadow: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
}
.global-nav {
	border-bottom: 1px solid rgba(0,0,0,0.15);
	height: 46px;
	background: transparent;
	position: relative;
	width: 100%;
}
.global-nav-inner {
	background: #FFF;
	height: 46px;
}
.global-nav .container {
	height: 46px;
	width: auto;
	max-width: 1190px;
	margin: auto;
	text-align: center;
	position: relative;
}
.global-nav [role=navigation] {
	display: inline-block;
}
.global-nav [role=navigation], .nav, .nav > li {
	float: left;
}
.nav {
	text-align: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#global-actions > li {
	height: 46px;
	overflow: hidden;
}
.nav > li {
	color: #66757f;
}
.nav li {
	position: relative;
}
#global-actions > li > a {
	border-bottom: 4px solid #000;
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.nav > li > a {
	color: inherit;
	display: block;
	font-size: 13px;
	font-weight: 500;
	height: 46px;
	padding: 0 14px 0 4px;
	text-shadow: none;
	line-height: 1;
}
.nav > li .Icon {
	float: left;
	margin: 11px 0 0 10px;
	width: 23px;
	height: 23px;
}
.Icon--large {
	font-size: 21px;
	line-height: 1;
}
.Icon {
	background: transparent;
	font-style: normal;
	display: inline-block;
	vertical-align: baseline;
}
.Icon:before {
	font-family: 'rosettaicons';
	display: block;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}
.Icon--home:before { content: "\f053"; }
.Icon--connect:before { content: "\f050"; }
.Icon--discover:before{ content: "\f052"; }
.Icon--me:before { content: "\f056"; }
.nav > li > a .text {
	float: left;
	margin-left: 3px;
	margin-top: 17px;
	padding: 0;
}
.nav > li > a:hover {
	color: inherit;
	text-decoration: none;
}
#global-actions > li:hover > a, #global-actions > li.active > a {
	height: 42px;
}
#global-actions > li:hover {
	color: #000;
}

Not all that complicated, right?

Do you have a better way to recreate the Twitter navigation? Let me know in the comments below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “Recreating the New Flat Twitter Navigation

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">