CSS Tabs, ala mog

================================================================================

So i was playing with some css ideas the other day, during a random spur of
boredom
(ok, well it wasn’t that random, infact i could have probably avoided it on account of i knew i would be bored.. but regardless..)

i came up with some nice css tabs, using dave shea’s
(http://www.alistapart.com/articles/sprites) css sprite slicing technique, and
douglas bowman’s (http://www.alistapart.com/articles/slidingdoors/) sliding
doors technique.

the end result of this little tutorial should look something like the following
image, if i’m any good, and if you follow the tutorial correctly..

Unable to recover the image :(

first of all, let’s whip up some markup..

<div id="menubar">
	<ul>
		<li><a href="#"><span>main</span></a></li>
		<li><a href="#"><span>write</span></a></li>
		<li class="selected"><a href="#"><span>manage</span></a></li>
		<li><a href="#"><span>settings</span></a></li>
	</ul>
</div>

the context i’ve created this in, it was to be used as a main menu, at the top
of a page.

now, how about those image sprites..

Unable to recover the image :(

now all we need is a bit of css magic to pull it together..

#menubar {
	float: left;
	width: 700px;
	margin-top: 75px;
	font-size: 1.4em;
	line-height: normal;
	}
#menubar ul {
	list-style: none;
	}
#menubar ul li {
	float: left;
	margin-left: 5px;
	}
#menubar a {
	display: block;
	background: url("images/tab-right.png") right top no-repeat;
	text-decoration: none;
	color: #FFCDAA;
	}
#menubar a span {
	background: url("images/tab-left.png") left top no-repeat;
   padding:5px 15px 3px 15px;
	display: block;
	}
#menubar a:hover {
	background-position: right -25px;
	color: #FF9C12;
	}
#menubar a:hover span {
	background-position: left -25px;
	color: #FF9C12;
	}
#menubar li {
	}
#menubar li.selected {
	border-bottom: 1px solid #fff;
	}
#menubar .selected a {
	background-position: right -50px;
	color: #a9a9a9;
	}
#menubar .selected a span {
	background-position: left -50px;
	color: #a9a9a9;
	}

you can see the tabs in action here -
css tabs demo

================================================================================
Published April 29, 2006

Generated from the original post:
https://blog.omgmog.net/post/css-tabs-ala-mog/


Max Glenister is an interface designer and senior full-stack developer from
Oxfordshire. He writes mostly about front-end development and technology.

- Mastodon: https://indieweb.social/@omgmog
- Github: https://github.com/omgmog
- Reddit: https://reddit.com/u/omgmog
- Discord: https://discordapp.com/users/omgmog#6206