How To Add A Header With Opacity Using jQuery For Blogger

When I was looking for my next blog post, I came around a website, which has an opacity header in fixed position. The next thing came in my mind was to come make that same feature happen in Blogger. So to make that happen I used opacity script developed by David Walsh and I modified the script to make it work on Blogger platform. This tutorial will let you to add a header with opacity using jQuery and you can its easily editable to add more options within this feature and before heading into the tutorial, take a backup of your template. So here we go.

header with opacity for blogger

header with opacity for blogger

Live Demo

Step 1: Login to your Blogger dashboard and navigate to Layout > Edit HTML. Now check the “Expand Widget Templates” and search for the code <head> and replace it with the below code

<head> <script src='http://sites.google.com/site/bloggermint/jquery-1.4.2.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { (function() { //settings var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30; var topbarME = function() { $(&#39;#opacitybar&#39;).fadeTo(fadeSpeed,1); }, topbarML = function() { $(&#39;#opacitybar&#39;).fadeTo(fadeSpeed,fadeTo); }; var inside = false; //do $(window).scroll(function() { position = $(window).scrollTop(); if(position &gt; topDistance &amp;&amp; !inside) { //add events topbarML(); $(&#39;#opacitybar&#39;).bind(&#39;mouseenter&#39;,topbarME); $(&#39;#opacitybar&#39;).bind(&#39;mouseleave&#39;,topbarML); inside = true; } else if (position &lt; topDistance){ topbarME(); $(&#39;#opacitybar&#39;).unbind(&#39;mouseenter&#39;,topbarME); $(&#39;#opacitybar&#39;).unbind(&#39;mouseleave&#39;,topbarML); inside = false; } }); })(); }); </script>

In this step you can remove the jQuery script, if you have already initialized it on your blog.

Step 2: Now we are going to add the CSS code, which is responsible for appearing the opacity header on the top. So search for the code ]]> and replace it with the below code

#opacitybar	{ 	border-bottom:1px solid #ECF1EF; 	background:#151715;        font-color:#000000; 	padding:10px 20px; 	position:fixed; 	top:0; 	left:0; 	z-index:2000; 	width:100%; } ]]></b:skin>

Here you can change the color of the header bar by changing the background value.

Step 3: At this stage, we are heading to insert the functions to be visible on the header bar. So here I inserted basic navigation link to be seen inside the header bar, but this can be changed according to your own ideas. Search for the code

and replace the below code before 

<div id='opacitybar'> 	<a href='#'>My Projects</a> | 	<a href='#'>Freebies</a> | 	<a href='#'>Tutorials</a> |  </div>

Save the template, to see the changes. If you have any troubles in making it work on Blogger platform, drop in your comments.



READ MORE - How To Add A Header With Opacity Using jQuery For Blogger

Another Quote Box Template (post)

I just copy and paste and put a download link  and i think it can be considerable to put in a post of your blog post without change any code in design page, just like not a simple tutorial, and i think this is good to slim our code, and here the one i found just before :

 

the code just like below :

<div style="color: #757575; background-color: #f2f2f2; text-align: justify; padding: 5px; border: 1px dotted #bebebe;">
<div><span><a style="text-decoration: none; color: #00659a; font: normal normal normal 11px/normal verdana;" href="http://www.wupload.com/file/97932890/" target="_blank">http://www.wupload.com/file/97932890/</a></span></div>
</div>

READ MORE - Another Quote Box Template (post)

Recent Posts with Thumbnails Hack for Blogger

Recent Posts with Thumbnails is an interesting hack that allows you to display your latest posts in various styles. Of course, Blogger has the Recent Posts with Thumbnails gadget, but this hack gives you more flexibility and options to choose from. Another default Recent Posts widget pulls content from your RSS feed and shows only the post titles.


But thanks to Marianne, who was responsible for this Blogger hack, your site can look great. 

Before you make any changes, take a backup of your template from Design --> Edit Html. 

Then copy paste the below code in Design --> Page Elements section of your blog. 
recent posts with thumbnails horizontal
<script language="JavaScript">
imgr = new Array();


imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL1.jpg";
imgr[2] = "http://YOURIMAGEURL2.jpg";
imgr[3] = "http://YOURIMAGEURL3.jpg";
imgr[4] = "http://YOURIMAGEURL4.jpg";

showRandomImg = true;

tablewidth = 278;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 100;
imgheight = 80;

fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 75;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "YOUR-BLOG-URL";

</script>
<script src="http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js" type="text/javascript"></script>
To run you through the script, you can add your own image url here 'http://YOURIMAGEURL.jpg' for articles without an image. You can add imgr[1] [2] etc., as per your requirement. You can adjust the image size, background colour, post title colour, summary colour, font size, number of posts to be showed and so on in the code. Add your blog url at the place where it is mentioned in the code and at the end of the code there is a javascript file -'http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js' (marked in bold) which can be hosted on your server or any other site. 
recent posts with thumbnails and commentsAs mentioned earlier this Recent Posts gives you lot of variations in terms of display, for instance you can have horizontal or vertical display, with or without comments, thumbnails with description etc. I have mentioned below the different javascript files available and based on your choice upload it your server or file hosting sites and add the js link in the above code and save the changes.

- Recent posts in horizontal position with only thumbnails 
- Recent posts in vertical position with only thumbnails
- Recent posts in horizontal position with thumbnails, title, description and comments
- Recent posts in vertical position showing thumbnails, title, description and comments
- Recent posts in horizontal position showing thumbnails, title, description and without comments 
- Recent posts in vertical position showing thumbnails, title, description and without comments
- Recent posts in horizontal position showing thumbnails with title, description from any particular label 
- Recent posts in vertical position showing thumbnails with title, description from any particular label
- Recent posts in horizontal position showing thumbnails with title, description in between thumbnails instead of below thumbnail 

In case of recent posts with thumbnails from any particular label/tags/categories, insert this line in the above code after - 

'home_page = "YOUR-BLOG-URL";'

label = "tagname";

Recent Posts with thumbnails hack certainly enhances the look of your blog!

source :// http://www.bloggerblogtemplates.com


READ MORE - Recent Posts with Thumbnails Hack for Blogger

Add Author Box Below Blogger Posts

Ever thought of adding a author box at the end of a post giving information about you to your readers? Its a common feature on many wordpress blogs, and now its possible to add it on blogger blogs as well. 


Here is a step-by-step instruction to display an author box. Go to Design--Edit HTML, click on expand widgets and search for this code -

]]></b:skin>

Add the following code just above that -

.author_info {
float: right;
width: 573px;
padding: 10px;
border: 1px solid #e0e0e0;
margin-bottom: 15px;
margin-top: 15px;
background: #eee;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_photo {
float: left;
margin: 0 0 0 10px;
}
.author_photo img {
margin-right: 10px;
border: 1px solid #e0e0e0;
}

Now look for this line of code -
<div class='post-footer-line post-footer-line-1'>

Insert the following below it and save the changes -
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://3.bp.blogspot.com/_tbHfaj1A058/TSGc3fOc-NI/AAAAAAAAL7A/GU6dmnqINik/s1600/images.jpeg'/></div>
<h3>About the Author</h3> This article is written by: <a href='YOUR_BLOGGER_PROFILE_LINK'><b>YourName</b></a> - who has already written <b>30</b> articles for <a href='BLOG_LINK'>BLOG_NAME</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
YourName&#39;s <a href='your web url'>Website</a><br style='clear:both;'/>

</div>
</b:if>
Replace the text where ever mentioned in the above code, add your profile link, facebook, twitter ID and your contact details. You can also fiddle around with the font, spacing, alignment of the box etc in the first code.

READ MORE - Add Author Box Below Blogger Posts
Labels: ,

Replacing PSA Google Adsense with Alternatif Ads

to replace the PSA that appears, in the script you can add google adsense alternative urls, can use a script from google that you have uploaded to your host or use the url that you've prepared to replace if the PSA that appears. 
this method I pake in all my web, including on this blog. 
eg like this: 

<script type="text/javascript"> <! - 
google_ad_client = ""; 
google_alternate_ad_url = "http://www.yoururl.com/altads.htm"; 
google_ad_width = 160; 
google_ad_height = 600; 
google_ad_format = "160 × 600_as"; 
google_ad_type = "text_image"; 
google_ad_channel = ""; 
google_color_border = "f2e6bc"; 
google_color_link = "6d310d"; 
google_color_bg = "f2e6bc"; 
google_color_text = "000000"; 
google_color_url = "000000"; 
//-></ Script> 
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </ script> 

in the code that I make bold is the alternative url. if the PSA appeared then to be replaced / filled with pages that exist in http://www.yoururl.com/altads.htm 

Another way is to use the collapsing ad unit script, which is usually my pake for which I put the adsense code within / between posts, to avoid the blank if the ad does not appear / PSA. 
enough "save link as .." for Firefox or "save target as ..." for Internet users google_adsense_script.html file explorer. 
upload the file to the root of your domain, then use as alternative ads in your adsense code, like this: 
google_alternate_ad_url = "http://www.yourdomain.com/google_adsense_script.html"

READ MORE - Replacing PSA Google Adsense with Alternatif Ads
Labels:

Inserting Quran with GIF Image from Islamic-council

Just Insert the Image from http://www.islamic-council.com and put image source in HTML through the pattern below :
<img src=http://www.islamic-council.com/quran/image/[surah_number+”_”+number_aayaah+”.gif”]>
Example : Basmallah is the First ALquran Ayaah (Al-Fatihah): 
<img src=http://www.islamic-council.com/quran/image/1_001.gif>

 
Catatan: You can see the url example just like the image of aayaah below here for applied example

READ MORE - Inserting Quran with GIF Image from Islamic-council

Removing Label in The Bottom of The Post

How to remove label that always appears at the bottom of the post?

Simply, here's how:

 
 Log into the blog dashboard, then go to the DESIGN> EDITHTML

* Check the first box "Expand Widget Templates"
* Find the code below:


<span class='post-labels'>
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,
</b:if></b:loop></b:if>
</span>

* Having met the above code, then DELETE all the code.
* Click "Save Template"
* View Blog to see the results ...

READ MORE - Removing Label in The Bottom of The Post
Labels: ,

Not Showing Author Posted By

Hei... I thing not much explained just delete this code if you not want show your post id or the name of author... LOL


<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span> 


READ MORE - Not Showing Author Posted By
Labels:

Doorway Pages and Hidden Text

Doorway Pages and Hidden Text

Another common keyword scam is doorway pages. Before Google introduced the PageRank algorithm, doorways were a common practice and there were times when they were not considered an illegal optimization. A doorway page is a page that is made especially for the search engines and that has no meaning for humans but is used to get high positions in search engines and to trick users to come to the site. Although keywords are still very important, today keywords alone have less effect in determining the position of a site in search results, so doorway pages do not get so much traffic to a site but if you use them, don't ask why Google punished you.

Very similar to doorway pages was a scam called hidden text. This is text, which is invisible to humans (e.g. the text color is the same as the page background) but is included in the HTML source of the page, trying to fool search engines that the particular page is keyword-rich. Needless to say, both doorway pages and hidden text can hardly be qualified as optimization techniques, there are more manipulation than everything else.

READ MORE - Doorway Pages and Hidden Text

Keyword Density or Keyword Stuffing



Keyword Density is the percentage of occurrence of your keywords to the text in the rest of your webpage.
It is important for your main keywords to have the correct keyword density to rank well in Search Engines.

  

Keyword stuffing is a deceptive technique to try and elevate a website's search engine result ranking by including targeted keywords more often than they naturally would appear in a quality document. The intent is to make it so that it's it is unlikely to be seen by a visitor but will be visible to search engines.

This can be attempted in multiple ways. The classic method used to involve hiding the text by making the font color of text match the background color or by making the text very small. It can also be done by repeating keywords in the meta information of a site, and Google may even consider it to be stuffing if you repeat keyword phrases in the html title tag of the document. In other words, giving your document a title like "Keyword stuffing - learn all about keyword stuffing - more answers about keyword stuffing." 

Sometimes SEO experts go too far in their desire to push their clients' sites to top positions and resort to questionable practices, like keyword stuffing. Keyword stuffing is considered an unethical practice because what you actually do is use the keyword in question throughout the text suspiciously often. Having in mind that the recommended keyword density is from 3 to 7%, anything above this, say 10% density starts to look very much like keyword stuffing and it is likely that will not get unnoticed by search engines. A text with 10% keyword density can hardly make sense, if read by a human. Some time ago Google implemented the so called “Florida Update” and essentially imposed a penalty for pages that are keyword-stuffed and over-optimized in general.

Generally, keyword density in the title, the headings, and the first paragraphs matters more. Needless to say that you should be especially careful not to stuff these areas. Try the Keyword Density Cloud tool to check if your keyword density is in the acceptable limits, especially in the above-mentioned places. If you have a high density percentage for a frequently used keyword, then consider replacing some of the occurrences of the keyword with synonyms. Also, generally words that are in bold and/or italic are considered important by search engines but if any occurrence of the target keywords is in bold and italic, this also looks unnatural and in the best case it will not push your page up.

 

READ MORE - Keyword Density or Keyword Stuffing
Labels: ,

About Avoiding Over SEO

The fight to top search engines' results knows no limits – neither ethical, nor technical. There are often reports of sites that have been temporarily or permanently excluded from Google and the other search engines because of malpractice and using “black hat” SEO optimization techniques. The reaction of search engines is easy to understand – with so many tricks and cheats that SEO experts include in their arsenal, the relevancy of returned results is seriously compromised to the point where search engines start to deliver completely irrelevant and manipulated search results. And even if search engines do not discover your scams right away, your competitors might report you. There are vis a vis to understand about it :

Keyword Density or Keyword Stuffing?

Doorway Pages and Hidden Text

Duplicate Content

Links Spam

READ MORE - About Avoiding Over SEO
Labels: , ,

Synergy Between Domain Names & Keyword Based Search Engine Optimization Strategies

writng in computer

SEO Question: Do domain names play a role in SEO? Do search engines understand that the words are in the URL even if they are ran together without hyphens in between them? What techniques are best for registering a domain name that search engines like Google will like?

Answer: Over time the role of the domain name as an SEO tool has changed, but currently I think they carry a lot of weight for the associated exact match search. Depending on how they are leveraged going forward they may or may not continue to be a strong signal of quality to search engines.

Domain Names & Link Anchor Text

When I first got in the SEO game a good domain name was valuable because if you got the exact keywords you wanted to rank for in your name it made it easier to get anchor text related to what you wanted to rank for. For example, being seobook.com made it easier for me to rank for seo bookand seo.

That link still exists, but nowhere near as strongly or broadly as it once did.

The Fall of Anchor Text & the Rise of Filters

Anchor text as an SEO technique is no secret. To make up for the long ongoing abuse of it, Google started placing less weight on anchor text AND creating more aggressive filters that would filter out sites that have a link profile that looked too spammy with too many inbound links containing the exact same anchor text. If everyone who links to me uses seo book as the anchor text it is much harder to consistently rank for that term than it would be if there was a more natural mixture to it. A natural mix would have some of the following

Natural link profiles also contain deep links to internal pages, whereas spammy sites tend to point almost all of their links at their home page.

Domain Names in Action

As Google started getting more aggressive at filtering anchor text, they started placing more weight on the domain name if the domain name exactly matched the keyword search query. They had to do this because they were filtering out too many brands for the search query attached to their brand.

READ MORE - Synergy Between Domain Names & Keyword Based Search Engine Optimization Strategies
Labels: ,

The Art Of Writing - Articles In 5 Minutes Or Less

WSO - The Art Of Writing - Articles In 5 Minutes Or Less



How To Write Articles in 5 Minutes or Less...


The Art of Writing - Articles in 5 Minutes or less gives you a step-by-step system that will:


*Cover the four major aspects of article writing that will boost your speed greatly once understood.
*Provide you with the action steps you need to reach your goal of faster article writing.
*Save you tons of time and money when it comes to creating content and articles in general.
*Give you a clear advantage over your competitors with the new skills you are about to develop...


Sales page
http://www.warriorforum.com/warrior-special-offers-forum/264271-5-minute-articles-180-sold.html
READ MORE - The Art Of Writing - Articles In 5 Minutes Or Less

Open popup window with open.window method

To open a new window by clicking on the link, you will need to use window.open method of javascript.

Sample of popup window

Click here for simple popup window

<a href="javascript: void(0)" 
   onclick="window.open('popup.html', 
  'windowname1', 
  'width=200, height=77'); 
   return false;">Click here for simple popup window</a>

Now you can open a simple window, also this function can have different features of that window to appear.

Syntax

window.open([URL], [Window Name], [Feature List], [Replace]);

Feature List:

PropertyDefault valueDescription
widthautospecifies width of the new window in pixels
heightautoheight of the window in pixels
topautospecifies window position
leftautospecifies window position
directoriesnoshould the directories bar be shown? (Links bar)
locationnospecifies the presence of the location bar
resizablenospecifies whether the window can be resized.
menubarnospecifies the presence of the menu bar
toolbarnospecifies the presence of the toolbar
scrollbarsnospecifies the presence of the scrollbars
statusnospecifies the presence of the statusbar


Click here for specific popup window

<a href="javascript: void(0)" 
   onclick="window.open('popup.html', 
  'windowname2', 
  'width=200, \
   height=77, \
   directories=no, \
   location=no, \
   menubar=no, \
   resizable=no, \
   scrollbars=1, \
   status=no, \
   toolbar=no'); 
  return false;">Click here for specific popup window</a>

Fullscreen popup window

The fullscreen parameter is supported only by Internet Exploer browser.

If you need to open fullscreen popup window in all browsers you need to use this modified function:

All browsers fullscreen popup window

<script type="text/javascript">
<!--
function popup(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0'
 params += ', fullscreen=yes';

 newwin=window.open(url,'windowname4', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="popup('popup.html')">Fullscreen popup window</a>

Centered popup window

To open new popup window in the middle of the screen we should know the size of a window and resolution of the screen. On the basis of these data, we will calculate values for the top-left corner.

Centered popup window

<script type="text/javascript">
<!--
function popup(url) 
{
 var width  = 300;
 var height = 200;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'windowname5', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="popup('popup.html')">Centered popup window</a>

READ MORE - Open popup window with open.window method

How to make correct rollover buttons with preload images

Rollover (Mouseover) is one of the most simplest and at the same time the most popular script on web-pages. Nevertheless in 90% of the cases this simple script is made incorrectly. The fact!

We first need to understand how this script should work. At first sight it looks quite elementary: Whenever the user moves the mouse pointer over the button, the button changes own state (one picture is replaced with another).

It should appear immediately but often it does not show. Why? The fact is that the second(active) picture downloads only WHEN user moves the mouse pointer over the button. Even if the user have hi-speed Internet connection - it will take away some time for that. The more the size of the picture - the more delay.

Sample of incorrect rollover button

When you move the mouse pointer over the button for the first time you may see a small lag:

Preload image

You need to use this script for load images as soon as possible. Insert this code between your <head></head> tags. Edit this script (see the comments).

<script type="text/javascript">
<!--
if(document.images)
{
  var image_array = new Array();
	
  // path to the directory with images
  var path = '/img/';

  // enumeration of the "active" images
  image_array[0] = path + "button1_red.gif";
  image_array[1] = path + "button2_red.gif";
  image_array[2] = path + "button3_red.gif";

  var preload_image = new Array ();
 
  for(var i=0; i<image_array.length; i++)
  {
    preload_image[i]= new Image();
    preload_image[i].src = image_array[i];
  }
}
//-->
</script>

After the images were loaded - we use usual rollover buttons html code.

HTML code

<a href="#" onmouseover="rollover('button1','button1_red.gif')" onmouseout="rollover('button1','button1_blue.gif')"><img src="/img/button1_blue.gif" name="button1" width="109" height="25" border="0"></a>
<a href="#" onmouseover="rollover('button2','button2_red.gif')" onmouseout="rollover('button2','button2_blue.gif')"><img src="/img/button2_blue.gif" name="button2" width="109" height="25" border="0"></a>
<a href="#" onmouseover="rollover('button3','button3_red.gif')" onmouseout="rollover('button3','button3_blue.gif')"><img src="/img/button3_blue.gif" name="button3" width="109" height="25" border="0"></a>

The onmouseover and onmouseout event handlers is used to execute specified Javascript code whenever the user moves the mouse over an button or move out from button.

Rollover function

Insert this code into any place of yours html, but BEFORE a html-code of buttons:

<script type="text/javascript">
<!--
function rollover(name, filename)
{
  var fullpath = '/img/' + filename;
  document.images[name].src = fullpath;
}
//-->
</script>

Correct sample



Note: Set fullpath variable to ="" if the images placed in the same directory as the html-file.

view complete example show use this source 

http://javascript-array.com/scripts/simple_rollover_button/#

READ MORE - How to make correct rollover buttons with preload images

jQuery Simple Drop-Down Menu Plugin

 

So, I present to you the simple drop-down menu. The peculiarity of this menu is that these 20 lines of code and absence of various cumbersome mouse events within html code. This script requires the jQuery library. There's a version that does not require jQuery.

 

Compatibility: IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+
Requirements: jQuery library
Size: < 1Kb;
Features:

  • unordered list as menu structure
  • absence of mouse events within html
  • timeout effect

License: Free, but please put a link to this page where you want.

 

Example:

 

http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

OK, let's do it. You have to include the jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>

As you can see, the link points to Google address. There is much probability that the jQuery already cached in the browser.

Now you can create main menu structure using HTML unordered list. Using of an unordered list for navigation is a very good practice. First of all it is semantically correct, it is also handy for changing/editing especially in compound treelike cases.

<ul id="jsddm">
    <li><a href="#">JavaScript</a>
        <ul>
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Effect</a>
        <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Help</a></li>
</ul>

The difference between this list from any other - the identifier [ id="jsddm" ].

Styles. Align elements of the first level in a row. Setup for all a-tags display:block style. Hide all inner unordered lists (layers). Decorate everything else.

#jsddm
{	margin: 0;
	padding: 0}
	
	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial}

	#jsddm li a
	{	display: block;
		background: #20548E;
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		width: 70px;
		color: #EAFFED;
		white-space: nowrap}

	#jsddm li a:hover
	{	background: #1A4473}
		
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-top: 1px solid white}
		
		#jsddm li ul li
		{	float: none;
			display: inline}
		
		#jsddm li ul li a
		{	width: auto;
			background: #9F1B1B}
		
		#jsddm li ul li a:hover
		{	background: #7F1616}

So, the script. Bind event handlers with a first-level li-nodes. If mouse over the button - close old layer(if it visible) and open new. When mouse out from button - turn on the timer to 500 milliseconds to close all layers. That's all :)

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

Note: Please don't forget to use the DOCTYPE declaration for universal compatibility, for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

License: Free, but please put a link to this page where you want.

Download jQuery Drop-Down Menu Sample

 

READ MORE - jQuery Simple Drop-Down Menu Plugin
Subscribe to: Posts (Atom)