AJAX? Nice looking drop down menus

Posted on 2009-05-10
Last Modified: 2012-05-06

If you have a look at this site:

The "Jump to" menu on their top right hand side looks extremely nice when you mouse over it not like a conventional dropdown.

Where can I go to download a similar script?
Question by:hubfub
LVL 10

Expert Comment

ID: 24347664

Hello Hubfub,

They are using jquery library, which is OpenSource released under both MIT License and GPL License.

This library is one of the "state of the art" javascript library, you can rely on.

Here are some tutorials to get started:




Author Comment

ID: 24347675
I was more looking for pre-made dropdowns as opposed to ones you make yourself

Assisted Solution

khr2003 earned 100 total points
ID: 24347951
try this website it has many ajax scripts:

Accepted Solution

ycTIN earned 300 total points
ID: 24351100
not AJAX, DHTML only

    <base href="">
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
		<link rel="stylesheet" href="Content_Common/Includes/Styles_System1.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="Includes/Styles_Structural.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="Includes/style_300409.css" type="text/css" media="screen" charset="utf-8" />
        <script type="text/javascript">
            var menu1 = new Array()
            menu1[0] = '<a href="">Home</a>';
            menu1[1] = '<a href="/Content_Common/pg-web-design-company-profile.seo">About us</a>';
            menu1[2] = '<a href="/Content_Common/pg-web-design-careers.seo">&nbsp;&nbsp;&nbsp;Working with Netstarter</a>';
            menu1[3] = '<a href="/Content_Common/pg-web-design-agency-careers.seo">&nbsp;&nbsp;&nbsp;Career opportunities</a>';
            menu1[4] = '<a href="/Content_Common/pg-In-The-Media.seo">&nbsp;&nbsp;&nbsp;In the media</a>';
            menu1[5] = '<a href="/Content_Common/pg-News.seo">&nbsp;&nbsp;&nbsp;News</a>';
            menu1[6] = '<a href="/Content_Common/pg-Web-Solution-By-Type.seo">Solutions</a>';
            menu1[7] = '<a href="/Content_Common/pg-Web-Solution-By-Type.seo">&nbsp;&nbsp;&nbsp;By Type</a>';
            menu1[8] = '<a href="/Content_Common/pg-Web-Solution-By-Industry.seo">&nbsp;&nbsp;&nbsp;By Industry</a>';
            menu1[9] = '<a href="/Content_Common/pg-content-management-system.seo">&nbsp;&nbsp;&nbsp;Content Management System</a>';
            menu1[10] = '<a href="/Content_Common/pg-web-design-expertise.seo">Expertise</a>';
            menu1[11] = '<a href="/Content_Common/pg-web-design.seo">&nbsp;&nbsp;&nbsp;Web design & web development</a>';
            menu1[12] = '<a href="/Content_Common/pg-Flash-design-and-development.seo">&nbsp;&nbsp;&nbsp;Flash design and development</a>';
            menu1[13] = '<a href="/Content_Common/pg-seo-search-engine-optimisation.seo">&nbsp;&nbsp;&nbsp;Search engine optimisation</a>';
            menu1[14] = '<a href="/Content_Common/pg-Online-advertising.seo">&nbsp;&nbsp;&nbsp;Online advertising</a>';
            menu1[15] = '<a href="/Content_Common/pg-Logo-design.seo">&nbsp;&nbsp;&nbsp;Logo design and branding</a>';
            menu1[16] = '<a href="/Content_Common/pg-Custom-application-development.seo">&nbsp;&nbsp;&nbsp;Custom application development</a>';
            menu1[17] = '<a href="/Content_Common/pg-video-for-web.seo">&nbsp;&nbsp;&nbsp;Website video integration</a>';
            menu1[18] = '<a href="/Content_Common/pg-3D-Modeling.seo">&nbsp;&nbsp;&nbsp;3d rendering</a>';
            menu1[19] = '<a href="/Content_Common/pg-web-design-portfolio.seo">Our work</a>';
            menu1[20] = '<a href="/Content_Common/pc-web-design-case-studies-by-type.seo">&nbsp;&nbsp;&nbsp;By Type</a>';
            menu1[21] = '<a href="/Content_Common/pc-web-design-case-studies-by-industry.seo">&nbsp;&nbsp;&nbsp;By Industry</a>';
            menu1[22] = '<a href="/Content_Common/pg-Contact-Web-Design-Sydney.seo">Contact Us</a>';
            function ReloadBigBusiness(){
                //document.getElementById("OurBusinessImg").src = "/images/OurBusiness_Big.jpg";
                document.getElementById("OurBusH1").innerHTML = "<div class=\"heading1\">big business</div>";
                document.getElementById("OurBusinessTxtSpan").innerHTML = "<h2>Our prosperous small business division provides us with the resources and economies of scale to produce world class solutions for our blue chip customers.</h2><br /><br /><span class=\"MainCopy\">By eliminating the need for expensive contractors and maintaining our talent fulltime in-house, we are able to compete with the big agencies at a dramatically reduced price. If you are seeking the services of top tier web firm, why not consider the company that many of the most respected agencies already outsource to... you will save!</span><div style=\"float:left; width:200px; height:33px;\"> </div>";
                sIFR.replace(tahoma, {
                    selector: '.heading1',
                    wmode: 'transparent',
                    css: {
                        '.sIFR-root': {
                            'text-transform': 'lowercase',
                            'font-size': '34px'
            function ReloadSmallBusiness(){
                document.getElementById("OurBusH1").innerHTML = "<div class=\"heading1\">small business</div>";
                document.getElementById("OurBusinessTxtSpan").innerHTML = "<h2>Netstarter is a web design agency for all businesses great and small. Just because we are the trusted partner for some of the biggest international brands, doesn't mean that we are necessarily expensive! Having successfully produced more than 2500 websites, chances are we have an affordable solution to accommodate your individual needs.</h2><br /><br /><span class=\"MainCopy\">At Netstarter, we have an entire team dedicated to the production of quality websites for small businesses. We have levelled the playing field by providing small business owners with access to the same professional web design service usually reserved for big companies with deep pockets. By redefining the way websites are designed and managed, we ensure that our small business customers are able to employ the latest web technologies needed to grow and further their business.</span>";
                sIFR.replace(tahoma, {
                    selector: '.heading1',
                    wmode: 'transparent',
                    css: {
                        '.sIFR-root': {
                            'text-transform': 'lowercase',
                            'font-size': '34px'
            function loadSWF(url){
                swfobject.embedSWF(url, "flashcontent", "370", "385", "7");
            function loadSWF2(url){
                swfobject.embedSWF(url, "flashcontent2", "273", "324", "7");
            function settab1(){
                document.getElementById("main").style.backgroundImage = "url(/images/bg1.gif)";
                document.getElementById("contents_h2").innerHTML = "<h2>Web design is our bread and butter. You might be surprised to know, that many of Australia&#39;s leading marketing companies, SEO specialists and digital agencies outsource their web design work to us!</h2>";
                document.getElementById("contents_txt").innerHTML = "Our talented team of project managers, designers and developers are specialists in the very unique field of web design. We combine creative talent with proven web development technologies to achieve outstanding results. All of our websites incorporate the latest Flash, CSS and XHTML techniques to ensure your website visitors have an engaging online experience. <a href=\"/Content_Common/pg-web-design.seo\"><img src=\"/images/more_arrow.gif\" border=\"0\" /></a>";
            function settab2(){
                document.getElementById("main").style.backgroundImage = "url(/images/bg2.gif)";
                document.getElementById("contents_h2").innerHTML = "<h2>We can partner with you to build a successful E-Commerce website that generates an additional revenue stream for your business. Why not turn your website into your hardest working sales rep!</h2>";
                document.getElementById("contents_txt").innerHTML = "If you are serious about expanding your target market and increasing your sales through the creation of an E-Commerce website, it is important you consider all of the critical success factors that will impact the performance of your online store. We make it our job to under your business and tailor a solution that best suits your requirements. Some of our online stores turn over between $1 000 000 - $5 000 000 per annum. <a href=\"/Content_Common/pg-eCommerce-websites.seo\"><img src=\"/images/more_arrow.gif\" border=\"0\" /></a>";
            function settab3(){
                document.getElementById("main").style.backgroundImage = "url(/images/bg3.gif)";
                document.getElementById("contents_h2").innerHTML = "<h2>Our position at the top of the search engines is a testimony to our ability to formulate and manage a successful SEO strategy. We understand just how important top rankings can be for your business, but more importantly, we know how to achieve them.</h2>";
                document.getElementById("contents_txt").innerHTML = "Nowadays web design and SEO go hand in hand. There is no point investing in a professional website if customers are unable to find it through keywords searches on the major search engines. As the official web partner of some of Australia most respected SEO companies, we have the technology and optimisation expertise to transform your website into a lead generating asset! <a href=\"/Content_Common/pg-seo-search-engine-optimisation.seo\"><img src=\"/images/more_arrow.gif\" border=\"0\" /></a>";
            function settab4(){
                document.getElementById("main").style.backgroundImage = "url(/images/bg4.gif)";
                document.getElementById("contents_h2").innerHTML = "<h2>PPC advertising ensures instant results in the paid search engine listings. A well planned & managed PPC campaign should be an integral part of your overall SEO strategy as it provides guaranteed, measurable results!</h2>";
                document.getElementById("contents_txt").innerHTML = "We currently manage the PPC (pay per click) campaigns for hundreds of Australian businesses. Our proven track record in delivering exceptional results is underpinned by our comprehensive PPC formula which involves full service keyword research, campaign development, competitor analysis and bid evaluations. Save yourself the hassle and confusion in managing a successful PPC campaign by letting one of your qualified experts handle the entire process for you. <a href=\"/Content_Common/pg-online-advertising.seo\"><img src=\"/images/more_arrow.gif\" border=\"0\" /></a>";
            function MM_swapImgRestore(){ //v3.0
                var i, x, a = document.MM_sr;
                for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) 
                    x.src = x.oSrc;
            function MM_preloadImages(){ //v3.0
                var d = document;
                if (d.images) {
                    if (!d.MM_p) 
                        d.MM_p = new Array();
                    var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
                    for (i = 0; i < a.length; i++) 
                        if (a[i].indexOf("#") != 0) {
                            d.MM_p[j] = new Image;
                            d.MM_p[j++].src = a[i];
            function MM_findObj(n, d){ //v4.01
                var p, i, x;
                if (!d) 
                    d = document;
                if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
                    d = parent.frames[n.substring(p + 1)].document;
                    n = n.substring(0, p);
                if (!(x = d[n]) && d.all) 
                    x = d.all[n];
                for (i = 0; !x && i < d.forms.length; i++) 
                    x = d.forms[i][n];
                for (i = 0; !x && d.layers && i < d.layers.length; i++) 
                    x = MM_findObj(n, d.layers[i].document);
                if (!x && d.getElementById) 
                    x = d.getElementById(n);
                return x;
            function MM_swapImage(){ //v3.0
                var i, j = 0, x, a = MM_swapImage.arguments;
                document.MM_sr = new Array;
                for (i = 0; i < (a.length - 2); i += 3) 
                    if ((x = MM_findObj(a[i])) != null) {
                        document.MM_sr[j++] = x;
                        if (!x.oSrc) 
                            x.oSrc = x.src;
                        x.src = a[i + 2];
            var W3CDOM = (document.createElement && document.getElementsByTagName);
            function initFileUploads(){
                if (!W3CDOM) 
                var fakeFileUpload = document.createElement('div');
                fakeFileUpload.className = 'fakefile';
                var image = document.createElement('img');
                image.src = 'pix/button_select.gif';
                var x = document.getElementsByTagName('input');
                for (var i = 0; i < x.length; i++) {
                    if (x[i].type != 'file') 
                    if (x[i].parentNode.className != 'fileinputs') 
                    x[i].className = 'file hidden';
                    var clone = fakeFileUpload.cloneNode(true);
                    x[i].relatedElement = clone.getElementsByTagName('input')[0];
                    x[i].onchange = x[i].onmouseout = function(){
                        this.relatedElement.value = this.value;
            function MM_jumpMenu(targ, selObj, restore){ //v3.0
                eval(targ + ".location='" + selObj.options[selObj.selectedIndex].value + "'");
                if (restore) 
                    selObj.selectedIndex = 0;
            /* Drop Down */
             * AnyLink Drop Down Menu- © Dynamic Drive (
             * This notice MUST stay intact for legal use
             * Visit for full source code
            //Contents for menu 1
            var menuwidth = '191px' //default menu width
            var menubgcolor = '#ffffff' //menu bgcolor
            var disappeardelay = 250 //menu disappear speed onMouseout (in miliseconds)
            var hidemenu_onclick = "yes" //hide menu when user clicks within menu?
            /////No further editting needed
            var ie4 = document.all
            var ns6 = document.getElementById && !document.all
            if (ie4 || ns6) 
                document.write('<div id="dropmenudiv" style="visibility:hidden;width:' + menuwidth + ';background-color:' + menubgcolor + '" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
            function getposOffset(what, offsettype){
                var totaloffset = (offsettype == "left") ? what.offsetLeft : what.offsetTop;
                var parentEl = what.offsetParent;
                while (parentEl != null) {
                    totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft : totaloffset + parentEl.offsetTop;
                    parentEl = parentEl.offsetParent;
                return totaloffset;
            function showhide(obj, e, visible, hidden, menuwidth){
                if (ie4 || ns6) 
           = = "-500px"
                if (menuwidth != "") {
                    dropmenuobj.widthobj =
                    dropmenuobj.widthobj.width = menuwidth
                if (e.type == "click" && obj.visibility == hidden || e.type == "mouseover") 
                    obj.visibility = visible
                else if (e.type == "click") 
                    obj.visibility = hidden
            function iecompattest(){
                return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
            function clearbrowseredge(obj, whichedge){
                var edgeoffset = 0
                if (whichedge == "rightedge") {
                    var windowedge = ie4 && !window.opera ? iecompattest().scrollLeft + iecompattest().clientWidth - 15 : window.pageXOffset + window.innerWidth - 15
                    dropmenuobj.contentmeasure = dropmenuobj.offsetWidth
                    if (windowedge - dropmenuobj.x < dropmenuobj.contentmeasure) 
                        edgeoffset = dropmenuobj.contentmeasure - obj.offsetWidth
                } else {
                    var topedge = ie4 && !window.opera ? iecompattest().scrollTop : window.pageYOffset
                    var windowedge = ie4 && !window.opera ? iecompattest().scrollTop + iecompattest().clientHeight - 15 : window.pageYOffset + window.innerHeight - 18
                    dropmenuobj.contentmeasure = dropmenuobj.offsetHeight
                    if (windowedge - dropmenuobj.y < dropmenuobj.contentmeasure) { //move up?
                        edgeoffset = dropmenuobj.contentmeasure + obj.offsetHeight
                        if ((dropmenuobj.y - topedge) < dropmenuobj.contentmeasure) //up no good either?
                            edgeoffset = dropmenuobj.y + obj.offsetHeight - topedge
                return edgeoffset
            function populatemenu(what){
                if (ie4 || ns6) 
                    dropmenuobj.innerHTML = what.join("")
            function dropdownmenu(obj, e, menucontents, menuwidth){
                if (window.event) 
                    event.cancelBubble = true
                else if (e.stopPropagation) 
                dropmenuobj = document.getElementById ? document.getElementById("dropmenudiv") : dropmenudiv
                if (ie4 || ns6) {
                    showhide(, e, "visible", "hidden", menuwidth)
                    dropmenuobj.x = getposOffset(obj, "left")
                    dropmenuobj.y = getposOffset(obj, "top")
           = dropmenuobj.x - clearbrowseredge(obj, "rightedge") + "px"
           = dropmenuobj.y - clearbrowseredge(obj, "bottomedge") + obj.offsetHeight + "px"
                return clickreturnvalue()
            function clickreturnvalue(){
                if (ie4 || ns6) 
                    return false
                    return true
            function contains_ns6(a, b){
                while (b.parentNode) 
                    if ((b = b.parentNode) == a) 
                        return true;
                return false;
            function dynamichide(e){
                if (ie4 && !dropmenuobj.contains(e.toElement)) 
                else if (ns6 && e.currentTarget != e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget)) 
            function hidemenu(e){
                if (typeof dropmenuobj != "undefined") {
                    if (ie4 || ns6) 
               = "hidden"
            function delayhidemenu(){
                if (ie4 || ns6) 
                    delayhide = setTimeout("hidemenu()", disappeardelay)
            function clearhidemenu(){
                if (typeof delayhide != "undefined") 
            if (hidemenu_onclick == "yes") 
                document.onclick = hidemenu
        <div id="NSDropDown">
            <div id="NSDropDownTxt">
                Jump to
            <div id="NSDropDownBox">
                    <a onmouseout="delayhidemenu(); MM_swapImgRestore();" onmouseover="MM_swapImage('dropdownimg','','/images/JumpTo_SelectPage_On.gif',1); dropdownmenu(this, event, menu1, '190px');" onclick="MM_swapImage('dropdownimg','','/images/JumpTo_SelectPage_On.gif',1); dropdownmenu(this, event, menu1, '190px');"><img alt="drop down" src="" id="dropdownimg" name="dropdownimg"/></a>

Open in new window


Assisted Solution

jccs0519 earned 100 total points
ID: 24359797
Here is my input, you can use Yahoo's User Interface library (YUI), you just need to figure out how to access the library and input the data to the dropdown, then it's there.  This is pretty much pre-made.

Here is an example:

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery Sticky Menu 24 36
Question about traversing a tree using jQuery 7 34
Adding items to a C# list incrementally 5 33
what is the best Integrated development environment 2 21
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
This video teaches users how to migrate an existing Wordpress website to a new domain.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question