Simple Mobile Nav Bar

HTML & CSS
1

Does anyone have some html5 and css3 code to create a nice simple navigation bar with images (similar to an iphone app). For an example please check http://www.photoshop-plus.co.uk/content/tutorials/mobile_apps/step20.gif. However any tips and tricks or other designs will be appreciated.

2

Hi,

I don’t see any need for images there as it all looks like text. Indeed if you are targetting mobile then you should use as few images as possible.

I would do something roughly like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
body {
	background:#000;
	color:#fff;
}
ul.nav {
	margin:0 auto;
	padding:0;
	list-style:none;
	text-align:center;
	border-bottom:1px solid #ccc;
	width:100%;
}
ul.nav li a, ul.nav li a:visited {
	color:#fff;
	text-decoration:none;
}
.nav li { display:block; }
.nav a {
	display:block;
	padding:10px 25px 25px;
	border-bottom:1px solid #ccc;
	margin-bottom:-1px;
	text-align:center;
}
.nav a:hover { border-bottom:1px solid #0cf; }
@media only screen and (min-width:580px) {
.nav li { display:inline; }
.nav a {
	display:inline-block;
	padding:10px 25px 25px;
	border-bottom:1px solid #ccc;
	margin-bottom:-1px;
	text-align:center;
}
}
</style>

<!--[if lt IE 9]>
<style type="text/css">
.nav li { display:inline; }
.nav a {
	display:inline-block;
	padding:10px 25px 25px;
	border-bottom:1px solid #ccc;
	margin-bottom:-1px;
	text-align:center;
	position:relative;
}
* html .nav a{top:1px}
</style>
<![endif]-->
</head>

<body>
<ul class="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">New Technology</a></li>
		<li><a href="#">Mobile Applications</a></li>
		<li><a href="#">The Future</a></li>
</ul>
</body>
</html>

See the mobile section for more hints and tips.

3

Paul O’B thanks alot I only want images to ease the look of the nav bar for users though this is really nice and simple the addition of a small images would add to the appeal of the bar. However I do get your point and agree with it thats why I only want images within articles and on the bar. Any tips on how to add a before and after image below the text of the nav bar?

4

Paul O’B thanks alot I only want images to ease the look of the nav bar for users though this is really nice and simple the addition of a small images would add to the appeal of the bar. However I do get your point and agree with it thats why I only want images within articles and on the bar. Any tips on how to add a before and after image below the text of the nav bar?

5

HI,

You could add some images and do something like this (Just view source for the code).

On screens smaller than 580px (apart from IE) the display should break to a whole line for each navitem (as usual for main mobile menus).

6

That is really nice I like this one - I will play around with the css and see if i can prevent it from breaking because I want this to be my main navigation bar at the head of all pages.

Thanks

7

lol - I specially made it break to a new line for mobile because you may be dealing with screen widths of only 240px and you simply can’t fit all those items onto one line for mobile. The media query supplies the code for screens larger than 580px only (excluding IE). Mobile screens get the one item per line design by default.:slight_smile:

8

Ok understood but this site i am building will eventually become an app (using phonegap) so am catering for bbs, droids and iOS WP7 etc should i still need to cater for screens smaller than 480px?

9

Won’t they all be smaller than 480px then (apart from a few tablets and ipad etc)?

You should probably ask those sorts of questions in the mobile forum link I gave above as I don’t get involved in apps. You may also find more info at the build mobile site.

10

Thanks alot