SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Mobile Nav Bar

    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/cont...pps/step20.gif. However any tips and tricks or other designs will be appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:

    HTML Code:
    <!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. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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:

    HTML Code:
    <!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.
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #6
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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).
    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by skelleex View Post
    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
    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.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #10
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Thanks alot


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •