WordPress.org

Forums

Problem with JS menu drop down length (4 posts)

  1. Chateaupoulet
    Member
    Posted 1 year ago #

    Hi there,

    I'm having a problem setting the length of a js drop down menu. I have adjusted it before successfully using a menu.css but cannot seem to make it work now. The site is http://www.hottotrotracingclub.com and the menu in question is Horses.

    This is the code in menu.css:

    'ul.sdt_menu li div.sdt_box_horses {
    width:210px;
    }ul.sdt_menu li div.sdt_box_horses {
    height:1800px;}
    ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#ebdc9d;'

    Setting the length at 1800 causes the menu to drop down to 1800 but then "bounce back up" to a height that leaves the last horse out of the list.

    Is there anything else I need to provide?

    Hope this makes sense and thank you for any help you can give.

  2. wpismypuppet
    Member
    Posted 1 year ago #

    Yes... it is a JavaScript menu, so you'll probably need to adjust the JavaScript as well to reflect the new height. Once JavaScript start to play with an element's styles, the CSS file controlling those styles are overridden because JavaScript will then make inline styles. It works on the first drop down, but JS takes over from there.

    However I strongly advise you to find a better menu system. If JavaScript is disabled (which a lot of people do for security) your website is rendered completely useless. Not to mention SEO will suffer as crawlers have a harder time with JS menus. Many of your pages might not get registered with Google and the likes.

    JavaScript is nice to enhance certain aspects of a website, but it should never be used as the only means of functionality.

  3. Chateaupoulet
    Member
    Posted 1 year ago #

    Thank you very much for that. I'll look at the JS again and explore alternative menu systems for the future.

  4. Chateaupoulet
    Member
    Posted 1 year ago #

    Playing around with the JS but it seems to have no effect. I'm not at all experienced with it so I must be missing something.

    The Trainer menu is working correctly so I copied the JS for that for the Horses menu, but no change. Menu.js code:

    ' $(function() {
    /**
    * for each menu element, on mouseenter,
    * we enlarge the image, and show both sdt_active span and
    * sdt_wrap span. If the element has a sub menu (sdt_box),
    * then we slide it - if the element is the last one in the menu
    * we slide it to the left, otherwise to the right
    */
    $('#sdt_menu > li').bind('mouseenter',function(){
    var $elem = $(this);
    $elem.find('img')
    .stop(true)
    .animate({
    'width':'133px',
    'height':'133px',
    'left':'0px'
    },400,'easeOutBack')
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'60px'},1000,'easeOutBack')
    .andSelf()
    .find('.sdt_active')
    .stop(true)
    .animate({'height':'60px'},300,function(){
    var $sub_menu = $elem.find('.sdt_box');
    var $sub_menu_trainer = $elem.find('.sdt_box_trainer');
    var $sub_menu_membership = $elem.find('.sdt_box_membership');
    var $sub_menu_about = $elem.find('.std_box_about');
    var $sub_menu_horses = $elem.find('.std_box_horses');
    var $sub_menu_gallery = $elem.find('.std_box_gallery');

    if($sub_menu_membership.length)
    {
    $sub_menu_membership.show().animate({'top':'80px','height':'200px','width':'185px'},200);
    }
    else if($sub_menu_trainer.length)
    {
    $sub_menu_trainer.show().animate({'top':'80px','height':'275px','width':'160px'},200);
    }
    else if($sub_menu_about.length)
    {
    $sub_menu_about.show().animate({'top':'80px','height':'80px','width':'150px'},200);
    }
    else if($sub_menu_horses.length)
    {
    $sub_menu_horses.show().animate({'top':'80px','height':'600px','width':'150px'},200);
    }
    else if($sub_menu_gallery.length)
    {
    $sub_menu_gallery.show().animate({'top':'80px','height':'80px','width':'150px'},200);
    }
    else if($sub_menu.length)
    {
    var left = '133px';
    if($elem.parent().children().length == $elem.index()+1)
    left = '-133px';
    $sub_menu.show().animate({'top':'80px','height':'225px'},200);
    }
    });
    }).bind('mouseleave',function(){
    var $elem = $(this);

    var $sub_menu = $elem.find('.sdt_box');
    var $sub_menu_trainer = $elem.find('.sdt_box_trainer');
    if($sub_menu_trainer.length)
    {
    $sub_menu_trainer.hide().animate({'top':'0','height':'0'},200);
    }
    else if($sub_menu.length)
    {
    $sub_menu.hide().animate({'top':'0','height':'0'},200);
    }
    var $sub_menu_horses = $elem.find('.sdt_box_horses');
    if($sub_menu_horses.length)
    {
    $sub_menu_horses.hide().animate({'top':'0','height':'0'},200);
    }
    else if($sub_menu.length)
    {
    $sub_menu.hide().animate({'top':'0','height':'0'},200);
    }

    $elem.find('.sdt_active')
    .stop(true)
    .animate({'height':'0px'},300)
    .andSelf().find('img')
    .stop(true)
    .animate({
    'width':'0px',
    'height':'0px',
    'left':'85px'},400)
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'10px'},500);
    });
    });'

Topic Closed

This topic has been closed to new replies.

About this Topic