Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 92f6988812
Fetching contributors…

Cannot retrieve contributors at this time

406 lines (318 sloc) 22.956 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="language" content="en" />
<meta name="keywords" content="IOS, tab bar, nav bar, navigation bar, menu, CSS, retina, Jquery Mobile, bartender, plugin, HTML, JQM, cross-browser" />
<meta name="description" content="the bartender-plugin is a CSS-only iOS-style tab bar for mobile and desktop browsers (based on the Jquery Mobile element structure)." />
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="14 days">
<title>Bartender : cross-browser iOS-style tab bar | JQM-based | CSS-only | retina &amp; regular sprite</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<link rel="stylesheet" type="text/css" href="bartender.css" />
</head>
<body>
<div data-role="page" id="landing">
<div data-role="header" data-position="fixed" data-theme="a">
<h1 class="">Bartender : cross-browser iOS-style tab bar</h1>
</div>
<div data-role="content" class="content">
<h3>Cross-browser iOS-style tab bar</h3>
<p>Since starting to work with Jquery Mobile I have been looking for a more "app-like" navigation bar. There are examples abound, but most can
be used on webkit-browsers only. Since I did not find a real cross-browser solution, I made one myself. I call it the <strong>bartender</strong> plugin.<p>
<h3>Features</h3>
<ul>
<li>based on JQM elements</li>
<li>CSS-only, no Jquery needed</li>
<li>tested on IE7+, latest FF, Opera, Chrome, Safari, Android, iOS</li>
<li>retina icons on all browsers except IE7-8</li>
<li>single retina-regular or separate sprites</li>
<li>All CSS-gradients</li>
</ul>
<p>Below you can find a walkthrough on how to setup the plugin. If you have the icon cut-outs it's pretty much copy &amp; paste.</p>
<p>All files can be found on <a href="https://github.com/frequent/bartender/" title="bartender cross browser iOS tab bar on Github">Github</a>, including icon-background templates and minified CSS.</p>
<div data-role="collapsible-set" class="coll">
<div data-role="collapsible" data-icon="one" data-collapsed="true">
<h3>Quick Guide</h3>
<p>If you are using Jquery Mobile, just copy &amp; paste the CSS and add a class of <span class="typewriter">apple-navbar-ui</span> plus a class of <span class="typewriter">comboSprite</span> (retina-regular combined sprite) or <span class="typewriter">
soloSprite</span> (separate sprites &amp; media query) to the navbar &lt;ul&gt; element. In the CSS change the <span class="typewriter">data-icon="names"</span>
and replace the sprite URL(s) with your own. That's it. If you want to use bartender on a stand-alone basis, make sure your &lt;ul&gt; has the following (JQM-rendered) element structure (you will still need some of
JQM-CSS from both the containing divs):</p>
<pre>
<code>
&lt;div class="ui-footer"&gt;
&lt;div&gt;
&lt;ul class="apple-navbar-ui comboSprite"&gt;
&lt;li&gt;
&lt;a class="ui-btn"&gt;
&lt;span class="ui-btn-inner"&gt;
&lt;span class="ui-btn-text"&gt;&lt;span class="ui-li-count"&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="ui-icon"&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
<p>As all gradients are CSS-made, you can change the gradient colors to fit your specific page theme. Matching to JQM data-themes is on my Todo list.</p>
</div>
<div data-role="collapsible" data-icon="two" data-collapsed="true">
<h3>Button Backgrounds</h3>
<p>Since I don't think there is a way to stop IE-filters linear-gradients running across an element's full height, <span class="typewriter">ui-icon</span> has to be "wasted" for IE7+8.</p>
<p>Setting the outmost &lt;div&gt;'s background to black and ui-icon height to 50% takes care of IE7+8. The button backgrounds for all other browsers are inserted using pseudo-element
<span class="typewriter">::before</span>, which is placed above .ui-icon and is thankfully ignored by both IE7 (<span class="typewriter">:before</span>) and IE8 (
<span class="typewriter">::before</span>).
</p>
<div class="ui-footer ui-bar-a ui-footer-fixed ui-fixed-inline">
<div class="ui-navbar">
<ul class="apple-navbar-ui ui-grid-d">
<li class="ui-block-a"><a href="#" class=""><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-b"><a href="#" class=""><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-c"><a href="#" class=""><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-d"><a href="#" class=""><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-e"><a href="#" class=""><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
</ul>
</div>
</div>
<P>I figured this out using <a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/" title="Nicolas Gallagher - Multiple Backgrounds and Borders">Nicolas Gallaghers "Multiple Backgrounds and Borders"</a> article,
which helped me understand how to properly use pseudo-elements <span class="typewriter">::before</span> and <span class="typewriter">::after</span>
as well as <a href="http://7synth.com/dev/gradients" title="Reinhard von der Waydbrink - Linear and Radial Gradients for all Browsers">Reinhard von der Waydbrinks "Linear and Radial Gradients for all Browsers Script"</a>, which I found to be an excellent source on how to get gradients on all browsers - especially IE.
</p>
</div>
<div data-role="collapsible" data-icon="three" data-collapsed="true">
<h3>Icon Backgrounds</h3>
<p>For idle and hover-active state you will need to attach two gradient backgrounds to <span class="typewriter">ui-btn</span>. While the idle gradient is
straightforward, the hover-active background is difficult, as it's using multiple linear and radial background-images, color-stops and transparency. </p>
<p>Too much for IE7+8, who get a plain linear gradient with transparency. All other browser are working smoothly - except for Opera, which supports multiple background-images with linear
gradients only. Once you add a radial gradient the whole background breaks. There is a fallback .png image provided, but since some browsers load this although
not being necessary, the fallback is commented out to not fire an unwanted http-request.
</p>
<div class="ui-footer ui-bar-a ui-footer-fixed ui-fixed-inline">
<div class="ui-navbar">
<ul class="apple-navbar-ui ui-grid-d">
<li class="ui-block-a"><a href="#" class="ui-btn" ><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-b"><a href="#" class="ui-btn" ><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-c"><a href="#" class="ui-btn" ><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-d"><a href="#" class="ui-btn" ><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-e"><a href="#" class="ui-btn" ><span class=""><span class=""></span><span class="ui-icon"></span></span></a></li>
</ul>
</div>
</div>
<P>Credits for the gradients go to <a href="http://dribbble.com/shots/66678-iOS-Tab-Bar-Highlight-with-Webkit-CSS-Gradients" title="Jordan Dobson - iOS Tab Bar with Webkit CSS Gradients">Jordan Dobsons iOS Tab Bar with Webkit Gradients</a> for
his excellent walkthrough on how to mimic the iOS active gradient with plain webkit-CSS (I still needed forever for all the other browsers) and to <a href="http://css3please.com/" title="CSS3 Please!">CSS3Please!</a> for showing how to get opacity into IE-filter.
The current gradients aren't perfect. Feel free to chip in and make them closer to the original.
</p>
</div>
<div data-role="collapsible" data-icon="four" data-collapsed="true">
<h3>Button Text and Hover Gradient</h3>
<p>As the Icon background required the &lt;a&gt; <span class="typewriter">ui-btn</span> to be shrunk to 30x30px, the clickable area needs to be reset.
This is done using <span class="typewriter">ui-btn-text</span>, which has to be expanded to full button size and therefore also holds the <span class="typewriter">:hover</span>
gradient. Here you need the only CSS-"Hack", as IE9 renders both the RGBA and MS-filter background resulting in stacked transparent gradients (20%+20% = looks bad). I found
the "Dummy-Hack" solution on <a href="http://stackoverflow.com/questions/6506085/rgba-background-with-ie-filter-alternative-ie9-renders-both " title="IE9 with rgba background and IE filter renders both">Stack Overflow</a>.
</p>
<div class="ui-footer ui-bar-a ui-footer-fixed ui-fixed-inline">
<div class="ui-navbar">
<ul class="apple-navbar-ui ui-grid-d">
<li class="ui-block-a"><a href="#" class="ui-btn" ><span class=""><span class="ui-btn-text">Features</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-b"><a href="#" class="ui-btn" ><span class=""><span class="ui-btn-text">Brands</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-c"><a href="#" class="ui-btn" ><span class=""><span class="ui-btn-text">Fees</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-d"><a href="#" class="ui-btn" ><span class=""><span class="ui-btn-text">Contact</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-e"><a href="#" class="ui-btn" ><span class=""><span class="ui-btn-text">About</span><span class="ui-icon"></span></span></a></li>
</ul>
</div>
</div>
</div>
<div data-role="collapsible" data-icon="five" data-collapsed="true">
<h3>Icon Sprites</h3>
<p>Unfortunately only webkit supports <span class="typewriter">-webkit-mask-image</span>, so a cross browser solution needs to be set-up differently.
The way to go for me are "cut-out" png-icons (think stamping cookies out of dough and keeping the dough). This works great across all browsers - including IE.</p>
<p>Of course you cannot simply cut-out icons from a plain background, because the icon background needs to match the gradient button background
previously assigned to <span class="typewriter">ui-icon</span>. If you can live with the current button backgrounds simply download the templates from Github and start
cutting your icons. If you make your own button-background, you will also need to redraw the icon-background accordingly.
</p>
<p>To see how it works - for this page, the plain icon background looks like this:</p>
<img src="examples/double300x132.png" alt="sample background template" title="sample background template" />
<p>And the finished cut-out with a background image to show the effect:</p>
<div class="spriteContainer">
<img class="sprite" src="examples/combosprite.png" alt="cut-out sprite" title="cut-out sprite" />
<span class="spriteBack"></span>
</div>
<p>There is also a nice way of putting "retina-icons" on non-retina devices. If you define an element being 30x30px and then specify a background with <span class="typewriter">background-size</span> 60x60px
you are basically loading retina resolution into normal browsers with an artificial 2:1 ratio. Works on all browsers that support the <span class="typewriter">background-size</span>
property, which are all but IE7 and IE8. Zoom in to the following two images to see the difference.
</p>
<div class="spacer">
<div class="hi-res"><span class="spriteText">hi-res</span></div>
<div class="lo-res"><span class="spriteText">lo-res</span></div>
</div>
</div>
<div data-role="collapsible" data-icon="six" data-collapsed="true">
<h3>Combo "retina-regular" or seperate sprites</h3>
<p>You can put both the retina and regular CSS sprite into a single png image. This way you can serve hi-res icons to all browsers except IE7+8, which
get lo-res icons from the same sprite. To do so you need to add a class of <span class="typewriter">comboSprite</span> to the navbar &lt;ul&gt; element.</p>
<p>Alternatively you can use CSS media-queries (like JQM does) to check for retina and then serve the respective sprite. Here you need to add a class of <span class="typewriter">soloSprite</span>.
Both ways are included in the CSS and translate to a single HTTP request, so if you want good cross-browser looks you will have a few KB extra file size.</p>
<p>The icon positioning is also straightforward, although it still needs some tweaking. IE7+8 ignore <span class="typewriter">background-size</span> and render correctly by default.
All other browsers get the artifical ratio and <span class="typewriter">background-position-x/y</span>. IE9+ is still 1px off, any clues on how to get the navbar
to render correctly are welcome.<p>
<p>The sprite is attached to <span class="typewriter">ui-btn-inner</span>. Putting it all together:</p>
<div class="ui-footer ui-bar-a ui-footer-fixed ui-fixed-inline">
<div class="ui-navbar comboSprite">
<ul class="apple-navbar-ui ui-grid-d">
<li class="ui-block-a"><a href="#" data-icon="features" class="ui-btn"><span class="ui-btn-inner"><span class="ui-btn-text">Features</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-b"><a href="#" data-icon="brands" class="ui-btn"><span class="ui-btn-inner"><span class="ui-btn-text">Brands</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-c"><a href="#" data-icon="fees" class="ui-btn"><span class="ui-btn-inner"><span class="ui-btn-text">Fees</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-d"><a href="#" data-icon="contact" class="ui-btn"><span class="ui-btn-inner"><span class="ui-btn-text">Contact</span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-e"><a href="#" data-icon="about" class="ui-btn"><span class="ui-btn-inner"><span class="ui-btn-text">About</span><span class="ui-icon"></span></span></a></li>
</ul>
</div>
</div>
</div>
<div data-role="collapsible" data-icon="six" data-collapsed="true">
<h3>Notifiers and Coming Soon</h3>
<p>You can also use the JQM class of <span class="typewriter">ui-li-count</span> to add count bubbles, which are CSS-ed into notifier icons. The bubbles expand automatically depending on
included text and as the background is a gradient CSS, too, you can tweak the colors according to your desired theme as well.
</p>
<div class="ui-footer ui-bar-a ui-footer-fixed ui-fixed-inline">
<div class="ui-navbar comboSprite">
<ul class="apple-navbar-ui ui-grid-a">
<li class="ui-block-a"><a href="#" data-icon="features" class="ui-btn"><span class="ui-btn-inner"><span class="ui-btn-text">Features<span class="ui-li-count">21</span></span><span class="ui-icon"></span></span></a></li>
<li class="ui-block-b"><a href="#" data-icon="brands" class="ui-btn"><span class="ui-btn-inner"><span class="ui-btn-text">Brands<span class="ui-li-count">!*&%</span></span><span class="ui-icon"></span></span></a></li>
</ul>
</div>
</div>
<p>And there it is, the bartender-plugin.<p>
<p>You can grab the template and sample sprites from <a href="https://github.com/frequent/bartender/" title="bartender cross browser iOS tab bar on Github">Github</a>. I'm planing to add some more features to the plugin (make it scrollable to carry more buttons, look at stick-2-top/left/right,
so make sure to fork the bartender or check back to see how things are coming along. Please post issues, suggestions and such on Github.</p>
</div>
</div>
</div>
<div data-role="footer" data-id="mainFooter" data-position="fixed">
<div data-role="navbar" data-grid="d">
<ul class="apple-navbar-ui comboSprite">
<li><a href="#features" data-iconpos="top" data-icon="features">Features</a></li>
<li><a href="#brands" data-iconpos="top" data-icon="brands">Brands<span class="ui-li-count">10</span></a></li>
<li><a href="#fees" data-iconpos="top" data-icon="fees">Fees</a></li>
<li><a href="#contact" data-iconpos="top" data-icon="contact">Contact</a></li>
<li><a href="#about" data-iconpos="top" data-icon="about">About Us</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="features">
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#landing" data-role="button" data-inline="true">Menu</a>
<h1 class="">Features</h1>
</div>
<div data-role="content" class="content">
<p>This is the <strong>Features</strong> page!</p>
</div>
<div data-role="footer" data-id="mainFooter" data-position="fixed">
<div data-role="navbar" data-grid="d">
<ul class="apple-navbar-ui comboSprite">
<li><a href="#features" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="features">Features</a></li>
<li><a href="#brands" data-iconpos="top" data-icon="brands">Brands<span class="ui-li-count">10</span></a></li>
<li><a href="#fees" data-iconpos="top" data-icon="fees">Fees</a></li>
<li><a href="#contact" data-iconpos="top" data-icon="contact">Contact</a></li>
<li><a href="#about" data-iconpos="top" data-icon="about">About Us</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="brands">
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#landing" data-role="button" data-inline="true">Menu</a>
<h1 class="">Brands</h1>
</div>
<div data-role="content" class="content">
<p>This is the <strong>Brands</strong> page!</p>
</div>
<div data-role="footer" data-id="mainFooter" data-position="fixed">
<div data-role="navbar" data-grid="d">
<ul class="apple-navbar-ui comboSprite">
<li><a href="#features" data-iconpos="top" data-icon="features">Features</a></li>
<li><a href="#brands" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="brands">Brands<span class="ui-li-count">10</span></a></li>
<li><a href="#fees" data-iconpos="top" data-icon="fees">Fees</a></li>
<li><a href="#contact" data-iconpos="top" data-icon="contact">Contact</a></li>
<li><a href="#about" data-iconpos="top" data-icon="about">About Us</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="fees">
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#landing" data-role="button" data-inline="true">Menu</a>
<h1 class="">Fees</h1>
</div>
<div data-role="content" class="content">
<p>This is the <strong>Fees</strong> page!</p>
</div>
<div data-role="footer" data-id="mainFooter" data-position="fixed">
<div data-role="navbar" data-grid="d">
<ul class="apple-navbar-ui comboSprite">
<li><a href="#features" data-iconpos="top" data-icon="features">Features</a></li>
<li><a href="#brands" data-iconpos="top" data-icon="brands">Brands<span class="ui-li-count">10</span></a></li>
<li><a href="#fees" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="fees">Fees</a></li>
<li><a href="#contact" data-iconpos="top" data-icon="contact">Contact</a></li>
<li><a href="#about" data-iconpos="top" data-icon="about">About Us</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#landing" data-role="button" data-inline="true">Menu</a>
<h1 class="">Contact</h1>
</div>
<div data-role="content" class="content">
<p>This is the <strong>Contact</strong> page!</p>
</div>
<div data-role="footer" data-id="mainFooter" data-position="fixed">
<div data-role="navbar" data-grid="d">
<ul class="apple-navbar-ui comboSprite">
<li><a href="#features" data-iconpos="top" data-icon="features">Features</a></li>
<li><a href="#brands" data-iconpos="top" data-icon="brands">Brands<span class="ui-li-count">10</span></a></li>
<li><a href="#fees" data-iconpos="top" data-icon="fees">Fees</a></li>
<li><a href="#contact" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="contact">Contact</a></li>
<li><a href="#about" data-iconpos="top" data-icon="about">About Us</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#landing" data-role="button" data-inline="true">Menu</a>
<h1 class="">About</h1>
</div>
<div data-role="content" class="content">
<p>This is the <strong>About</strong> page!</p>
</div>
<div data-role="footer" data-id="mainFooter" data-position="fixed">
<div data-role="navbar" data-grid="d">
<ul class="apple-navbar-ui comboSprite">
<li><a href="#features" data-iconpos="top" data-icon="features">Features</a></li>
<li><a href="#brands" data-iconpos="top" data-icon="brands">Brands<span class="ui-li-count">10</span></a></li>
<li><a href="#fees" data-iconpos="top" data-icon="fees">Fees</a></li>
<li><a href="#contact" data-iconpos="top" data-icon="contact">Contact</a></li>
<li><a href="#about" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="about">About Us</a></li>
</ul>
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19087935-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</html>
Jump to Line
Something went wrong with that request. Please try again.