AJAX? Nice looking drop down menus


If you have a look at this site: http://www.netstarter.com.au/

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?
Who is Participating?
not AJAX, DHTML only

    <base href="http://www.netstarter.com.au/">
        <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="http://www.netstarter.com.au/">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 (www.dynamicdrive.com)
             * This notice MUST stay intact for legal use
             * Visit http://www.dynamicdrive.com/ 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) 
                    dropmenuobj.style.left = dropmenuobj.style.top = "-500px"
                if (menuwidth != "") {
                    dropmenuobj.widthobj = dropmenuobj.style
                    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(dropmenuobj.style, e, "visible", "hidden", menuwidth)
                    dropmenuobj.x = getposOffset(obj, "left")
                    dropmenuobj.y = getposOffset(obj, "top")
                    dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj, "rightedge") + "px"
                    dropmenuobj.style.top = 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) 
                        dropmenuobj.style.visibility = "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="http://www.netstarter.com.au/images/JumpTo_SelectPage_Off.gif" id="dropdownimg" name="dropdownimg"/></a>

Open in new window


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:



hubfubAuthor Commented:
I was more looking for pre-made dropdowns as opposed to ones you make yourself
try this website it has many ajax scripts:
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:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.