Solved

AJAX? Nice looking drop down menus

Posted on 2009-05-10
5
720 Views
Last Modified: 2012-05-06
Hi,

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?
0
Comment
Question by:hubfub
5 Comments
 
LVL 10

Expert Comment

by:NeoDiffusion
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:
http://docs.jquery.com/Tutorials

Enjoy,

Werner.

0
 
LVL 1

Author Comment

by:hubfub
ID: 24347675
I was more looking for pre-made dropdowns as opposed to ones you make yourself
0
 
LVL 3

Assisted Solution

by:khr2003
khr2003 earned 100 total points
ID: 24347951
try this website it has many ajax scripts:
http://www.ajaxrain.com/tag?tag=Forms
0
 
LVL 7

Accepted Solution

by:
ycTIN earned 300 total points
ID: 24351100
not AJAX, DHTML only
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

<html>

    <base href="http://www.netstarter.com.au/">

    <head>

        <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) 

                    return;

                var fakeFileUpload = document.createElement('div');

                fakeFileUpload.className = 'fakefile';

                fakeFileUpload.appendChild(document.createElement('input'));

                var image = document.createElement('img');

                image.src = 'pix/button_select.gif';

                fakeFileUpload.appendChild(image);

                var x = document.getElementsByTagName('input');

                for (var i = 0; i < x.length; i++) {

                    if (x[i].type != 'file') 

                        continue;

                    if (x[i].parentNode.className != 'fileinputs') 

                        continue;

                    x[i].className = 'file hidden';

                    var clone = fakeFileUpload.cloneNode(true);

                    x[i].parentNode.appendChild(clone);

                    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) 

                    e.stopPropagation()

                clearhidemenu()

                dropmenuobj = document.getElementById ? document.getElementById("dropmenudiv") : dropmenudiv

                populatemenu(menucontents)

                

                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

                else 

                    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)) 

                    delayhidemenu()

                else if (ns6 && e.currentTarget != e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget)) 

                    delayhidemenu()

            }

            

            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") 

                    clearTimeout(delayhide)

            }

            

            if (hidemenu_onclick == "yes") 

                document.onclick = hidemenu

        </script>

    </head>

    <body>

        <div id="NSDropDown">

            <div id="NSDropDownTxt">

                Jump to

            </div>

            <div id="NSDropDownBox">

                <div>

                    <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>

                </div>

            </div>

        </div>

    </body>

</html>

Open in new window

0
 
LVL 2

Assisted Solution

by:jccs0519
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:
http://developer.yahoo.com/yui/examples/menu/topnavfrommarkup.html
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
C3-->D3 Line Chart 4 19
Editing login page in zencart. 2 14
CSS help matching specific span class 2 23
Help cleaning out CSS 2 29
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now