A question I often receive is what's the best way to implement a multi-level navigation bar for a website. In some cases, some of my readers ask to me a little help and send me "very original" solutions but not so suitable in terms of semantic and unobtrusive approach to coding. For my experience, I always suggest to use simple and standard methods. So in this tutorial I want to illustrate you how to implement a perfect multi-level navigation bar using HTML, CSS and some lines of unobtrusive JavaScript code with jQuery to show and hide sub sections. The result is the following:
You can quickly reuse the code I provided in this tutorial into your web projects, customizing the CSS file and changing the links. You can take a look at the demo here or download the source code here.
Navigation bar structure
Here is the standard box model of a typical navigation bar:
...and here is the standard HTML structure you would have to use to implement it
How you can see the code is composed by some nested unordered list. For example, in this tutorial I used the following code (main navigation items highlighted in bold):
You can add new main items or sub items simply adding new <li> tags with an <ul> tag within.
CSS Code
Now take a look at the CSS code. I prepared a very basic style you can customize how you prefer in your projects. Here is the code for the container of the navigation bar (<div id="#nav">):
Here is the code for navigation links. #nav ul li {...} it's the code that defines main items (in this tutorial for example they are Web Design, Tech News, Social Network). #nav ul li ul li {...} it's the code that defines sub items for each main item.
Here is the code for sub menu sections:
jQuery Code
Now take a look at this simple jQuery code that shows and hides sub sections using mouseover and mouseleave jQuery events. The code is very simple and works independently from the number of main items contained into the navigation bar. You have to copy the following code into the <head> tag of your page. Remember first to include a link to jQuery using the following code:
Than add this code:
You can also add this code in an external JS file and import it into the page that use this script. That's all! Take a look at the demo here or download the source code here.
Leave a comment for your suggestions, thanks!
You can quickly reuse the code I provided in this tutorial into your web projects, customizing the CSS file and changing the links. You can take a look at the demo here or download the source code here.
Navigation bar structure
Here is the standard box model of a typical navigation bar:
...and here is the standard HTML structure you would have to use to implement it
<div id="nav"> <!-- nav container -->
<ul>
</div><li>item <!-- main item -->
<ul><ul> <!-- item submenu -->
</li><li>sub item</li>
</ul>How you can see the code is composed by some nested unordered list. For example, in this tutorial I used the following code (main navigation items highlighted in bold):
<div id="nav">
<ul>
<div>
<ul>
<li><a href="#">Web Design</a>
<ul class="submenu">
<li><a href="http://www.9lessons.org">Woork</a></li>
<li><a href="http://www.dzone.com">DZone</a></li>
</ul>
</li>
<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.mashable.com">Mashable</a></li>
<li><a href="http://www.cnet.com">CNET</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<ul class="submenu">
<li><a href="http://www.9lessons.org">Woork</a></li>
<li><a href="http://www.dzone.com">DZone</a></li>
</ul>
</li>
<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.mashable.com">Mashable</a></li>
<li><a href="http://www.cnet.com">CNET</a></li>
</ul>
</li>
<ul>
<div>
You can add new main items or sub items simply adding new <li> tags with an <ul> tag within.
CSS Code
Now take a look at the CSS code. I prepared a very basic style you can customize how you prefer in your projects. Here is the code for the container of the navigation bar (<div id="#nav">):
#nav{
height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}
line-height:32px;
background:#3B5998;
padding:0 10px;
}
#nav ul,
#nav ul li {
#nav ul li{
#nav ul li {
margin:0;
padding:0;
list-style:none;
}padding:0;
list-style:none;
#nav ul li{
float:left;
display:block;
}display:block;
Here is the code for navigation links. #nav ul li {...} it's the code that defines main items (in this tutorial for example they are Web Design, Tech News, Social Network). #nav ul li ul li {...} it's the code that defines sub items for each main item.
#nav ul li a:link,
#nav ul li a:visited{
#nav ul li a:hover{
#nav ul li ul li{
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
#nav ul li ul li a:hover{
#nav ul li a:visited{
color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
}font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
#nav ul li a:hover{
color:#EBEFF7;
}#nav ul li ul li{
float:none;
display:block;
}display:block;
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
}background:#EBEFF7;
Here is the code for sub menu sections:
.submenu {
position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
jQuery Code
Now take a look at this simple jQuery code that shows and hides sub sections using mouseover and mouseleave jQuery events. The code is very simple and works independently from the number of main items contained into the navigation bar. You have to copy the following code into the <head> tag of your page. Remember first to include a link to jQuery using the following code:
<script type="text/javascript" src="jquery.js"></script>
Than add this code:
<script type="text/javascript">
function nav(){
$(document).ready(function() {
</script>
function nav(){
$('div#nav ul li').mouseover(function() {
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').mouseleave(function() {
}; $(this).find('ul:first').show();
});$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});$(document).ready(function() {
nav();
});</script>
You can also add this code in an external JS file and import it into the page that use this script. That's all! Take a look at the demo here or download the source code here.
Leave a comment for your suggestions, thanks!
In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage.
I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes.
Section 1: General HTML tags
In this section I divide the code in two subsections. A first subsection that contains code to reset HTML standard tags and a second subsection that contains code to redefine HTML standard tags.
Section 1: Subsection 1
How you know, regarding CSS reset, this practice is used to reset default browser styles for HTML standard elements (body, h1, p, ul, li, ...). One of the most popular files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of lines of CSS code. In reality, in the majority of cases, the only frequently used tags that require to be reset are body, h1, h2, h3, p, ul, li, form, input and rarely table, tr and td. So if you prefer, you can use a shortened version of these files that includes only HTML elements you really used in your pages:
In the previous code I highlighted in bold some HTML 5 new tags you could need to reset (see after for a short explanation about them).
Section 1: Subsection 2
In the second subsection of the section 1 I simply redefine HTML standard tags:
If I need to define a standard tag (for example <h1>) with different properties depending on the position of the tag on the page (<h1> for post titles and <h1> for sidebar titles) I prefer to add the related CSS code into the section that contains structural tags (Section 2). For example, for the sidebar:
Section 2: Structural tags
In this section I define all CSS elements that define the page structure. As I anticipated, HTML 5 introduces new tags that improve the semantic of the code. Some of these tags are: <header>, <nav>, <article>, <section>, <aside>, <footer>... You can use these tag instead of more common DIV layers we used until now (for example: <div id="nav">...</div>).
Shortly, the picture on the right represents a typical two columns layout that use HTML 5 tags to define page structure. If you want to know more information about this topic, I suggest you to take a look at these excellent articles:
- Smashing Magazine: HTML5 and The Future of the Web
- Steve Smith: Structural Tags in HTML5
- Lachlan Hunt: Preview of HTML5
CSS code is very simple:
Practically it's identical to the code we are using with DIV layers:
For each HTML element you can define its child elements. For example if this is the code for the navigation bar:
...the related CSS code is:
As I said before, in order to improve code readability, I suggest you to use indented code, and alphabetical order to list properties of elements:
What changes respect to HTML 4? Not so much:
Simplifying, this kind of structural tags in HTML 5 are DIV layer with a specific ID in HTML 4:
Section 3: Custom Classes
In the last section of my CSS files I add custom classes I can reuse in several sections (header, sidebar, footer,...).
That's all. If you have some suggestion about this topic please leave a comment, thanks!
I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes.Section 1: General HTML tags
In this section I divide the code in two subsections. A first subsection that contains code to reset HTML standard tags and a second subsection that contains code to redefine HTML standard tags.
Section 1: Subsection 1
How you know, regarding CSS reset, this practice is used to reset default browser styles for HTML standard elements (body, h1, p, ul, li, ...). One of the most popular files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of lines of CSS code. In reality, in the majority of cases, the only frequently used tags that require to be reset are body, h1, h2, h3, p, ul, li, form, input and rarely table, tr and td. So if you prefer, you can use a shortened version of these files that includes only HTML elements you really used in your pages:
/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {
border:0;
margin:0;
padding:0;
font-size:100%;
...
}margin:0;
padding:0;
font-size:100%;
...
In the previous code I highlighted in bold some HTML 5 new tags you could need to reset (see after for a short explanation about them).
Section 1: Subsection 2
In the second subsection of the section 1 I simply redefine HTML standard tags:
/* Subsection 2: Standard HTML tags redefinition */
body,
form, input {
h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}
body,
form, input {
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}font-family:Arial, Helvetica, sans-serif;
font-size:12px;
h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}
If I need to define a standard tag (for example <h1>) with different properties depending on the position of the tag on the page (<h1> for post titles and <h1> for sidebar titles) I prefer to add the related CSS code into the section that contains structural tags (Section 2). For example, for the sidebar:
aside {...}
aside h1 {...}
Section 2: Structural tags
In this section I define all CSS elements that define the page structure. As I anticipated, HTML 5 introduces new tags that improve the semantic of the code. Some of these tags are: <header>, <nav>, <article>, <section>, <aside>, <footer>... You can use these tag instead of more common DIV layers we used until now (for example: <div id="nav">...</div>).
Shortly, the picture on the right represents a typical two columns layout that use HTML 5 tags to define page structure. If you want to know more information about this topic, I suggest you to take a look at these excellent articles:- Smashing Magazine: HTML5 and The Future of the Web
- Steve Smith: Structural Tags in HTML5
- Lachlan Hunt: Preview of HTML5
CSS code is very simple:
header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}
Practically it's identical to the code we are using with DIV layers:
#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}
...
#nav{...}
#aside{...} /* sidebar*/
#footer{...}
...
For each HTML element you can define its child elements. For example if this is the code for the navigation bar:
<nav>
<ul>
</nav><li>...</li>
<li>...</li>
<li>...</li>
</ul><li>...</li>
<li>...</li>
...the related CSS code is:
nav{...}
nav ul{...}
nav ul li{...}
nav ul li a{...}
nav ul li a{...}
As I said before, in order to improve code readability, I suggest you to use indented code, and alphabetical order to list properties of elements:
nav ul li a{
font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;
}height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;
What changes respect to HTML 4? Not so much:
<div id="nav">
<ul>
<div><li>...</li>
<li>...</li>
<li>...</li>
</ul><li>...</li>
<li>...</li>
Simplifying, this kind of structural tags in HTML 5 are DIV layer with a specific ID in HTML 4:
#nav{...}
#nav ul{...}
#nav ul li{...}
#nav ul li a{...}
#nav ul li a{...}
Section 3: Custom Classes
In the last section of my CSS files I add custom classes I can reuse in several sections (header, sidebar, footer,...).
/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}
That's all. If you have some suggestion about this topic please leave a comment, thanks!
Some day ago I twittered a link about TweetTab a nice on-line service (similar to Monitter) to monitor in real time Twitter trends and custom searches. I like the design of TweetTab, clean and simple and I like in particular scrollpane used in each search tab. Take a look at this screenshot of TweetTab for a preview of the scrollpane used:
Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.
I prepared a simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .
Step 1. HTML code
First of all, you have to include jQuery and jScrollPane into the <head> tag of your web page:
Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example <p> tags:
<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:
It's important set a fixed height and the property overflow to "auto". This is the result:
Now add this JavaScript code below the inclusion of jScrollPane (in the <head> tag) to initialize the script for the layer with ID="section-scroll":
You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:
...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:
Step 2. CSS Code
Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.
The final result is something like this:
You can change it how you prefer for your web sites. That's all! Download the source code.
For other information about jScrollPane, thake a look at the official page.
Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.
I prepared a simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .
Step 1. HTML code
First of all, you have to include jQuery and jScrollPane into the <head> tag of your web page:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example <p> tags:
<div id="section-scroll" class="scroll-pane">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div><p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:
.scroll-pane {
width: 400px;
height: 250px;
overflow:auto;
}height: 250px;
overflow:auto;
It's important set a fixed height and the property overflow to "auto". This is the result:
Now add this JavaScript code below the inclusion of jScrollPane (in the <head> tag) to initialize the script for the layer with ID="section-scroll":
<script type="text/javascript">
$(function()
{
</script> {
$('#section-scroll').jScrollPane();
});You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:
<div id="section-scroll-1" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>
...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:
<script type="text/javascript">
$(function()
{
</script> {
$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
});$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
Step 2. CSS Code
Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.
.scroll-pane {
/*JScrollPane CSS*/
.jScrollPaneContainer {
}
.jScrollPaneTrack{
.jScrollPaneDrag{
.scroll-pane{padding:0;}
.scroll-pane p{
width: 400px;
height: 250px;
overflow:auto;
float: left;
}height: 250px;
overflow:auto;
float: left;
/*JScrollPane CSS*/
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
padding-right: 20px;
overflow: hidden;
z-index: 1;
padding-right: 20px;
}
.jScrollPaneTrack{
position:absolute;
cursor:pointer;
right:0;
top:0;
height:100%;
}cursor:pointer;
right:0;
top:0;
height:100%;
.jScrollPaneDrag{
position:absolute;
background:#CCC;
cursor:pointer;
overflow:hidden;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}background:#CCC;
cursor:pointer;
overflow:hidden;
-moz-border-radius:6px;
-webkit-border-radius:6px;
.scroll-pane{padding:0;}
.scroll-pane p{
-moz-border-radius:6px;
-webkit-border-radius:6px;
background:#232323;
padding:12px;
color:#CCC;
font-size:14px;
line-height:16px;
}-webkit-border-radius:6px;
background:#232323;
padding:12px;
color:#CCC;
font-size:14px;
line-height:16px;
The final result is something like this:
You can change it how you prefer for your web sites. That's all! Download the source code.
For other information about jScrollPane, thake a look at the official page.
In the last weeks I frequently received a question about how to use CSS3 border-radius property to draw HTML elements with rounded corners in Internet Explorer. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer.So to draw rounded corners in IE you have to use some trick, for example using CSS classes with a background image (take a look at this post).
The simpler and quick solution I know to draw rounded corners in every browser is to use a mix of CSS3 and JavaScript. CurvyCorners is a free JavaScript library for creating gorgeous rounded corners for HTML elements. The final result looks like this:
The big advantage of this script is that lets render rounded borders in Safari, Chrome and Mozilla (which support rounded borders via -webkit-border-radius and -moz-border-radius) natively with CSS3 property and in IE and Opera with JavaScript.
The only thing you have to do is to include curvycorners.js into the <head> tag of your page:
<script type="text/javascript" src="curvycorners.js"></script>
Then you have to write a CSS class like this:
.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
At this point add the following code into the <head> of your page, after the previous CSS code:
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
</script>function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
tl, tr, bl, br are: top-left, top-right, bottom-left, bottom-right borders.
If you have different CSS classes (ex. roundedCorners, roundedCorners_1, roundedCorners_2) you can apply them changing the previous code in this way:
...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...
Now if you want to apply rounded corners to a DIV element use this code:
<div class="roundedCorners"> </div>
This is the result in every browser:
I think this is actually the simpler and quick solution to implement rounded corners in every browser. Ok... and what's if JavaScript is disabled? Sincerly I think this case is not so frequent... but if you don't want to use JavaScript, the most realiable solution is to use CSS classes with background images. Any suggestion about this topic? Please leave a comment, thanks!
Download the source code here:
In this post I want to suggest you 10 useful code snippets for web developers based on some frequetly asked questions I received in the past months for my readers. This collection include several CSS, PHP, HTML, Ajax and jQuery snippets. Take a look!
1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:
2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:
3. HTML 5 CSS Reset
4. Unit PNG Fix
6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).
7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.
8. jQuery: Ajax call
...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):
1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:
<link rel="stylesheet" href="print.css" type="text/css" media="print">
2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:
@font-face {
font-family: MyFontFamily;
src: url('http://');
}
font-family: MyFontFamily;
src: url('http://');
}
Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.
4. Unit PNG Fix
This snippet fixes the png 24 bit transparency with Internet Explorer 6.
5. Tab Bar with rounded corners
This code illustrates how to implement a simple tab bar with rounded corners:6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).
<?php
if (isset($username[5])) {
// Do something...
}
?> // Do something...
}
7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.
<? php
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="\\" target="\">$1</a>", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="\\" target="\">$1</a>", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>
8. jQuery: Ajax call
This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:
<script type="text/javascript">
$(document).ready(function(){
</script>
$(document).ready(function(){
$("form#formId").submit(function() {
inputField = $('#inputFieldId').attr('value');
$.ajax({
return false;
});
});inputField = $('#inputFieldId').attr('value');
$.ajax({
type: "POST",
url: "yourpage.php",
cache: false,
data: "inputField ="+ inputField,
success: function(html){
$("#ajax-results").html(html);
}
});url: "yourpage.php",
cache: false,
data: "inputField ="+ inputField,
success: function(html){
$("#ajax-results").html(html);
}
return false;
});
</script>
9. CSS Layouts Collections
This page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it's very useful.
10. Simple versatile multilevel navigation Menu
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:
The only thing you have to do is to create nested <ul> lists into a main list with id="nav", in this way:
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<ul>
</li>
</ul>
...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}
...and this is the JavaScript code for jQuery you have to copy in the tag <head> of the pages that use this menu:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showmenu(){
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility:"visible", display:"none"}).show();
}, function(){
$(this).find('ul:first').css({visibility:"hidden"});
});
}
$(document).ready(function(){
showmenu();
});
</script>
In this post I want to illustrate a super simple way to work with Twitter API and PHP. In particular, this tutorial explains how to get public updates from Twitter public timeline and display them in a web page with a custom style using CSS. In order to get Twitter updates I used Twitterlibphp (a PHP implementation of the Twitter API) that allows you to take advantage of it from within your PHP applications.
Using this simple method you can obtain awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects (you need PHP and APACHE):
1. A little introduction
Twitterlibphp returns Twitter timeline in XML format and with this structure (take a look at the Twitter API home page for a full list of available nodes.):
So, if you want to display the user image, user status, and status date in your timeline you have to choose the following nodes:
But how you can display them? It's very simple! Take a look at the following code!
2. PHP code
Create a new file twitter_status.php and copy and paste the following code:
How you can see, the previous code is very simple to understand. The line:
get the 20 most recent public statuses posted. You can also use other functions such as:
getFriendsTimeline(): returns the 20 most recent statuses posted by the authenticating user and that user's friends.
- getUserTimeline(): returns the 20 most recent statuses posted from the authenticating user.
getReplies(): returns the 20 most recent @replies (status updates prefixed with @username) for the authenticating user.
Take a look at twitter.lib.php for the full list of available functions.
If you want to display different information, for example the source of the update (status->source) use this code:
...or if you want to display the number of followers of the current user (follower_count) use this code:
3. CSS Code
Now you can customize the style of your timeline using CSS code. I used the following classes but you can customize the look how you prefer:
That's all! Download the source code, open twitter_status.php, change $username and $password with your Twitter username and password and upload the file in your test server.
If you have some suggestion, please add a comment!
Using this simple method you can obtain awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects (you need PHP and APACHE):
1. A little introduction
Twitterlibphp returns Twitter timeline in XML format and with this structure (take a look at the Twitter API home page for a full list of available nodes.):
status
created_at
id
text
source
user
id
text
source
user
name
screen_name
description
profile_image_url
url
followers_count
...
...screen_name
description
profile_image_url
url
followers_count
...
So, if you want to display the user image, user status, and status date in your timeline you have to choose the following nodes:
But how you can display them? It's very simple! Take a look at the following code!
2. PHP code
Create a new file twitter_status.php and copy and paste the following code:
<div class="twitter_container">
<?php
// require the twitter library
require "twitter.lib.php";
// your twitter username and password
$username = "your_username";
$password = "your_password";
// initialize the twitter class
$twitter = new Twitter($username, $password);
// fetch public timeline in xml format
$xml = $twitter->getPublicTimeline();
$twitter_status = new SimpleXMLElement($xml);
foreach($twitter_status->status as $status){
echo '<br/>';
echo '<div class="twitter_posted_at">Posted at:'.$status->created_at.'</div>';
echo '</div>';
}
?>
<div>
<?php
// require the twitter library
require "twitter.lib.php";
// your twitter username and password
$username = "your_username";
$password = "your_password";
// initialize the twitter class
$twitter = new Twitter($username, $password);
// fetch public timeline in xml format
$xml = $twitter->getPublicTimeline();
$twitter_status = new SimpleXMLElement($xml);
foreach($twitter_status->status as $status){
foreach($status->user as $user){
echo '<img src="'.$user->profile_image_url.'" class="twitter_image">';
echo '<a href="http://www.twitter.com/'.$user->name.'">'.$user->name.'</a>: ';
}
echo $status->text;echo '<img src="'.$user->profile_image_url.'" class="twitter_image">';
echo '<a href="http://www.twitter.com/'.$user->name.'">'.$user->name.'</a>: ';
}
echo '<br/>';
echo '<div class="twitter_posted_at">Posted at:'.$status->created_at.'</div>';
echo '</div>';
}
?>
<div>
How you can see, the previous code is very simple to understand. The line:
$xml = $twitter->getPublicTimeline();
get the 20 most recent public statuses posted. You can also use other functions such as:
getFriendsTimeline(): returns the 20 most recent statuses posted by the authenticating user and that user's friends.
- getUserTimeline(): returns the 20 most recent statuses posted from the authenticating user.
getReplies(): returns the 20 most recent @replies (status updates prefixed with @username) for the authenticating user.
Take a look at twitter.lib.php for the full list of available functions.
If you want to display different information, for example the source of the update (status->source) use this code:
$status->source
...or if you want to display the number of followers of the current user (follower_count) use this code:
$user->followers_count
3. CSS Code
Now you can customize the style of your timeline using CSS code. I used the following classes but you can customize the look how you prefer:
.twitter_container{
color:#444;
font-size:12px;
width:600px;
margin: 0 auto;
}
.twitter_container a{
color:#0066CC;
font-weight:bold;
}
.twitter_status{
height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE;
}
.twitter_image{
float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;
}
.twitter_posted_at{
font-size:11px;
padding-top:4px;
color:#999;
}
color:#444;
font-size:12px;
width:600px;
margin: 0 auto;
}
.twitter_container a{
color:#0066CC;
font-weight:bold;
}
.twitter_status{
height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE;
}
.twitter_image{
float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;
}
.twitter_posted_at{
font-size:11px;
padding-top:4px;
color:#999;
}
That's all! Download the source code, open twitter_status.php, change $username and $password with your Twitter username and password and upload the file in your test server.
If you have some suggestion, please add a comment!