It is a One Level Drop-Down Menu with Timeout effect. If you are looking for advanced script, see the Multi-Level Drop-Down Menubased on simple treelike unordered list. Internet has a lot of scripts with the name "Drop Down Menu". One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first - utterly worthless scripts. The second - too complex heap up and chargeable. And I just wrote this simple script: This menu can be located anywhere on the page: form this source post HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items. Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout: <li> tag have loat: left; declaration. sumbmenu layer have visibility: hidden;and position: absolute;. Anchor tag set to display: block; Everything else is usual decoration: Insert this code between your <head></head> tags. Look to the code for the comments: That’s it! All you have to do now is add some hover styles and make it your own. Enjoy! If you want to use this script on your page, please place link to http://javascript-array.com at one of your pages. Looking for Multi-Level Menu? See the Multi-Level Drop-Down Menu.Sample
http://javascript-array.com/scripts/simple_drop_down_menu/
HTML Code
<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>CSS Code
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}JavaScript Code
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose; 
Simple Drop-Down Menu v2.0
Longed-For Multi-Level Drop-Down Menu Script
The main feature of this menu is the clear separation between the HTML code, software code and visual appearance. No more onmouseover or onmouseout or, worse, multidimensional array of elements in a .js file. The HTML code of the menu is a simple treelike unordered list: After the script is attached, this multi-level unordered list becomes Multi-Level Drop-Down Menu (MLDDM). The visual appearance is specified using CSS. This is a very important point for a developer. In most similar scripts, menu items and the corresponding HTML-code are generated by the often obscure code of the script. This places severe limitations on the developer. Two most significant of them are difficulty of integrating this menu into the web-server code and difficulty to specify custom appearance (there is often only a possibility to choose one of them from a limited number of hard-coded themes) It is worth to mention so called Drop-Down Menu builders. These are end-user software, which allow composing menu items in visual mode. After this, such program will generate code that can be inserted into the page. For a home page creator such software is probably the best choice. But for a web developer this is clearly not, for the reasons outlined above - difficulties of integrating this pregenerated code into the web-server code, and difficulty of editing this code to fine-tune it. Thus, this script is targeted at web developers who want to have complete and clear control over the code. You can learn more about this menu at the developer website. There you can also view samples of variously themed menus. Source : http://javascript-array.com/scripts/multi_level_drop_down_menu/<ul class="mlddm">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a>
<ul>
<li><a href="#">Item 2.3.1</a></li>
<li><a href="#">Item 2.3.2</a></li>
<li><a href="#">Item 2.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>Example
Onclick Select All Text in field box
This script highlight all text in textarea or text field (input tag) by clicking on it. It allows users to reduce their manual work. For instance when users need to copy to the clipboard all text quickly or quickly delete the text from the field. For example: to copy a piece of code or to delete a username and password on login web page.
example : http://javascript-array.com/scripts/onclick_select_all_text_in_field/
Code
The script is really very simple. Text field must have unique identifier, this indentifier will be passed to the SelectAll() function. The function call only two methods: focus() and select().
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>
Textarea:<br>
<textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by clicking here </textarea>
Input TextBox:<br>
<input type="text" id="txtfld" onClick="SelectAll('txtfld');" style="width:200px" value = "This text you can select all" />You can modified for your blogger platform as on post or in page
How to Add MyBlogLog comment avatars in your Blogger Layouts Blog
As you have read, this is quite an easy hack to implement in your blog. This will enable MyBlogLog comment avatars for your comments, even if you are not a member of MyBlogLog yourself! There are a few things you should be aware of if you decide to use MyBlogLog avatars in your blog template: The instructions I provided above will link to the required script which is hosted on Merlinox's server (as he encourages readers to do this in his tutorial). If you would prefer to host the Javascript yourself, you should download this from Merlinox's post, upload to your own hosting account, and change the link to the script in the head of your template to refer to the location of your hosted script like this: I hope this tutorial has helped you to easily install Merlinox's Blogger plugin for MyBlogLog comment avatars in your own blog templates. If you enjoyed this post and would like to hear of future updates, please consider subscribing to the Blogger Buster feed. As always, your comments and opinions are much appreciated. And if you have an account with MyBlogLog, don't forget to choose "other" when you leave your comments and use your URL so that your avatar will appear beside your message!How to install MyBlogLog comment avatars in your Blogger Layouts blog
<script src='http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js' type='text/javascript'/>
This will link to the javascript used to power the comment avatars which is hosted by Merlinox.<b:loop values='data:post.comments' var='comment'>
This will be in the comments section of your template, and is easily found using the search function of your browser (CTRL+F). If you cannot find this line, this is probably because you have forgotten to expand the widget templates!<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>What you should know about using MyBlogLog comment avatars
For blog authors, this also means you would need to change your settings for comments, and enable "anyone" to comment, rather than only registered users.<script src='http://your-hosting-provider.com/your-folder/myBlogAvatar2.js' type='text/javascript'/>
Of course, you should substitute the URL in this example for the exact URL where your script is hosted.
Add background music to your blog
In this post, I'll concentrate on actually embedding the music (rather than adding widgets such as Last.fm playlists). You can see an example of embedded background music here and also further down this page... The easiest method of adding background sound is to include a line like this in your blog template, just after the opening <body> tag: So instead, you may prefer to use this method instead, which is compatible with all browsers (press the play icon to start music): Here are some sites I've used for copyright-free music you could use in your blog: <bgsound src="http://yoursite.com/yoursound.mp3" loop=infinite>
where the URL is that of the background music you wish to use. This method works perfectly well, but visitors to your site will not be able to switch the music off if it becomes distracting.<embed width="200" src="http://yoursite.com/yourmusic.mp3" autostart="false" loop="false" height="50"></embed>
You can change some of the variables to suit your needs:
Using either method, you can link to .mp3, .mid or .wav music files. However, you must be aware of copyright restrictions, and ensure you have the appropriate permission for use for the music you decide to use!
How to create a custom header in Blogger
My blog template is based on the Denim theme, but since I didn't particularly like the header, I replaced it with my own graphic, along with a link back to my site. Want to know how? Read on!
First, you'll need to create your new blog header using your favorite image creation software (eg: Paint, CorelDraw, Gimp, Photoshop...). Take a look in your blog template HTML and make a note of the width of your blog header; you'll probably want your new blog header to be this width too! Don't worry about the height: it can be as tall or as short as you want.
Once you've made your new blog header, you'll need to tinker with the HTML of your template a little bit. Make sure you backup your existing template before doing anything more, just in case something goes wrong and you need to pout your current template back in place instead. Then look for the following section of code:
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/> </b:section> </div>
The elements highlighted in bold need to be changed. So:
- Change maxwidgets='1' to at least 2 in order to be able to add another element in the header section.
- Alter showaddelement='no' to showaddelement='yes' to be able to add a different element to the header section (your new image)
- Replace locked='true' with locked='false' so that you can later remove the old header.
Now save your template, and go back to the layouts section in your dashboard. You'll notice that you can now add another element to your blog header!
If you only want to add your new blog header, and don't want to have this linked to your home page, you can easily do this by choosing to add a "Picture" element to your blog and uploading your new header.
However, if you prefer to link your header to your homepage (as in the default Blogger templates), you'll need to do a little more work first. Upload your image to a remote site (there are many free hosting accounts available, such asFreeImageHosting.net) and make a note of the full address of your file, including the extension (eg: www.yoursite.com/images/yourimage.jpg). Then, choose to add a "HTML/Javascript element and add the following:
<img src="http://www.yoursite.com/images/yourimage.jpg">
Replacing the image source with your own image address of course! This is the code needed to display your new blog header. Now to make this image become a link back to your blog's home page, you would need to add link tags as follows:
<a href="http://yourblogaddress.blogspot.com"><img src="http://www.yoursite.com/images/yourimage.jpg"></a>
Save this element and view your blog. You should see both the original blog header and your new blog header. Make sure your new blog header looks the way you want it to, then go back to edit the layout.
This time, click on the "header" element (the original blog header), and choose "remove page element". Once you do this, the original header will be completely removed, leaving only your customised one (a good reason to have saved a backup of your template, just in case!).