CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kevin B
Kevin B

Reputation: 3

Make a javascript menu open when the page is loaded

I'm using a css menu that I found on the web and would like to add some javascript to it to enable a menu to be automatically opened when the page loads. I'm rubbish with javascript, so could do with some help. Below is the JS code. I have four menu's in the HTML with one sub menu; at the moment, which contain 'a' links. I would like the first menu to open on page load, which will reveal it's submenu.

JS Code:

$(document).ready(function () {
    $(document).ready(function () {
        $('#cssmenu > ul > li ul').each(function (index, e) {
            var count = $(e).find('li').length;
            var content = '<span class="cnt">' + count + '</span>';
            $(e).closest('li').children('a').append(content);
        });
        $('#cssmenu ul ul li:odd').addClass('odd');
        $('#cssmenu ul ul li:odd').addClass('odd');
        $('#cssmenu ul ul li:even').addClass('even');
        $('#cssmenu > ul > li > a').click(function () {
            $('#cssmenu li').removeClass('active');
            $(this).closest('li').addClass('active');
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#cssmenu ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }
            if ($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;
            }
        });
    });
});

Upvotes: 0

Views: 2490

Answers (4)

Karthick Kumar
Karthick Kumar

Reputation: 2361

 $("#cssmenu ul li:eq(0)").addClass('active');
 $("#cssmenu ul li:eq(0) ul").css('display','block');

add this piece of code and try demo http://jsfiddle.net/myJaM/3/

Upvotes: 1

Tim
Tim

Reputation: 3038

If you want it to be open on start, why not just add the active class to the li, and display: block to the child ul?

Or are you looking for the animation to run at start? If so do this at the end of your document.load function: 

$('#cssmenu > ul > li:first > a').trigger('click');

On a side note your styling classes (last, odd and even) are unncessary. Try using :nth-last-child, :nth-child(odd) and :nth-child(even).

Upvotes: 0

jaypeagi
jaypeagi

Reputation: 3141

If you want to do this in jQuery as opposed to CSS (for transferability, perhaps) you have two choices:

Upvotes: 0

AfromanJ
AfromanJ

Reputation: 3932

You can just add the active class to your first <li class="has-sub"> and add display: block; to the <ul> inside. No JQuery needed.

<li class='has-sub active'><a href='#'><span>Geeky Sites</span></a>
   <ul style="display: block;">
      <li class='last'><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a></li>
   </ul>
</li>

Upvotes: 1

Related Questions