Template:Team:HokkaidoU Japan/LargeDropDown/JS

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <script type="text/javascript"> $(function() { - →* * the menu: var $menu = $('#ldd_menu'); /** * for each list element, ...")
 
(97 intermediate revisions not shown)
Line 2: Line 2:
<script type="text/javascript">
<script type="text/javascript">
-
            $(function() {
+
$(function() {
-
/**
+
    var $menu = $('#ldd_menu');
-
* the menu
+
                    var $child  = $menu.children(".menu_button");
-
*/
+
                    $child.hover(function() {  
-
var $menu = $('#ldd_menu');
+
                    var $number = $child.index(this);
-
+
-
/**
+
            $child.eq($number).find('.ldd_submenu').stop().slideDown(300);
-
* for each list element,
+
} ,function(){  
-
* we show the submenu when hovering and
+
                                          $child.find('.ldd_submenu').stop(true).slideUp(300);
-
* expand the span element (title) to 510px
+
 
-
*/
+
});
-
$menu.children('li').each(function(){
+
});
-
var $this = $(this);
+
-
var $span = $this.children('span');
+
-
$span.data('width',$span.width());
+
-
+
-
$this.bind('mouseenter',function(){
+
-
$menu.find('.ldd_submenu').stop(true,true).hide();
+
-
$span.stop().animate({'width':'510px'},300,function(){
+
-
$this.find('.ldd_submenu').slideDown(300);
+
-
});
+
-
}).bind('mouseleave',function(){
+
-
$this.find('.ldd_submenu').stop(true,true).hide();
+
-
$span.stop().animate({'width':$span.data('width')+'px'},300);
+
-
});
+
-
});
+
-
            });
+
</script>
</script>
</html>
</html>

Latest revision as of 13:12, 17 October 2014

Retrieved from "http://2014.igem.org/Template:Team:HokkaidoU_Japan/LargeDropDown/JS"