Jquery and magento

Jquery and magento

I am want to integrate jquery with magento in the form of a mega drop down menu like  asos.com. I am wondering if some people on here might assist me with this. OK so far I have downloaded jquery-1.4.2.js which i have upload to my root>js> and added a new folder jquery then I opened my page.xml and edited to call the script like so ( please see bold code )

Default layout, loads most of the pages
-->

    <default translate="label" module="page">
        <label>All Pages</label>
        <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

            <block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>prototype/prototype.js</script></action>
                <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
                <action method="addJs"><script>prototype/validation.js</script></action>
                <action method="addJs"><script>scriptaculous/builder.js</script></action>
                <action method="addJs"><script>scriptaculous/effects.js</script></action>
                <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <action method="addJs"><script>scriptaculous/controls.js</script></action>
                <action method="addJs"><script>scriptaculous/slider.js</script></action>
                <action method="addJs"><script>varien/js.js</script></action>
                <action method="addJs"><script>varien/form.js</script></action>
                <action method="addJs"><script>varien/menu.js</script></action>
                <action method="addJs"><script>mage/translate.js</script></action>
                <action method="addJs"><script>mage/cookies.js</script></action>
                <action method="addJs"><script>jquery/jquery-1.4.2.js</script></action>
                
                <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>

                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            </block>


Then I opened my jquery-1.4.2.jsand added jQuery.noConflict(); at the bottom like so


// Set the width or height on the element (default to pixels if value is unitless)
this.css( type, typeof size === "string" ? size : size + "px" );
};

});
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

})(window);

jQuery.noConflict();

ok question 1.

should I just replace<action method="addJs"><script>scriptaculous/effects.js</script></action> with my jquery.js file??


next here is my top.phtml file which calls the items for my nav

?>
<?php
/**
 * Top menu for store
 *
 * @see Mage_Catalog_Block_Navigation
 */
?>
<?php $_menu = ''?>
<?php foreach ($this->getStoreCategories() as $_category): ?>
    <?php $_menu .= $this->drawItem($_category) ?>
<?php endforeach ?>
<?php if ($_menu): ?>
<div class="nav-container">
    <ul id="nav">
        <?php echo $_menu; ?>
    </ul>
</div>
<?php endif; ?>

and here is my css section that defines the style for my nav

/********** < Navigation */
.nav-container {}
#nav { width: 100%; margin-left: 0px; margin-bottom: 0; margin-right: 0; margin-top: 0px; float:left; font-size:12px; }

/* ALL Levels */ /* Style consistent throughout all nav levels */
#nav li { position:relative;text-transform:uppercase; text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/* 0 Level */
#nav li { float:left; margin:1px 8px 11px 1px; padding:3px 8px; }
#nav li.active a { color:#444; }
#nav a { float:left; background:url(../images/bkg_nav_top.gif) no-repeat 100% 50%; padding-right:11px; color:#444; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#444; }
#nav li.over,
#nav li.active { margin:0 7px 10px 0; border:1px solid #bbb; background:#ececec; }

/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
#nav ul li.parent { background:url(../images/bkg_nav_parent.gif) no-repeat 100% 50%; }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }

/* 2nd Level */
#nav ul { position:absolute; width: 500px; top: 22px; left:-10000px; border:1px solid #bbb; border-bottom:2px solid #999; padding:3px 8px; background:#fcfcfc; font-size:11px; }

/* Show menu */
#nav li.over > ul { left:-1px; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { padding:3px 0; color:#444 !important; }
#nav ul li a:hover { padding:3px 0; color:#5a7f00 !important; }

/* 3rd+ Level */
#nav ul ul { top:5px; }
/********** Navigation > */
/* ======================================================================================= */

ok can any offer help and suggest on what I need to do??