expand first menu option on page load in Jquery - Photoshop

Gitz
July 31, 2015
246 views
3 votes
3 Answers

I have created a menu which is working fine. But on the page load all the menu items are collapsed. A look look on my code

$(document).ready(function() {
  $("#nav > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if (!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

/* nav menu styles */

#nav {
  display: block;
  width: 280px;
  margin-left: -40px;
  list-style-type: none;
}
#nav li {} #nav > li > a {
  display: block;
  padding: 8px 7px;
  font-size: 1.3em;
  font-weight: 200;
  color: #889599;
  text-decoration: none;
  border-bottom: 1px solid #EFEFEF;
  background-color: #F7F9FA;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#292929));
    background: -webkit-linear-gradient(top, #343434, #292929);
    background: -moz-linear-gradient(top, #343434, #292929);
    background: -ms-linear-gradient(top, #343434, #292929);
    background: -o-linear-gradient(top, #343434, #292929);
    background: linear-gradient(top, #343434, #292929);*/
}
#nav > li > a:hover,
#nav > li > a.open {
  color: #889599;
  background-color: #F7F9FA;
}
#nav li ul {
  display: none;
  background: #EFEFEF;
  list-style-type: none;
  margin-left: -40px;
}
#nav li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 30px;
  font-size: 1.1em;
  text-decoration: none;
  font-weight: 200;
  color: #889599;
}
#nav li ul li a:hover {
  background: #F7F9FA;
}

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="nav">
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Animation</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Graphic Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a>
        </li>
        <li><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding &amp; Logos</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphic+design+illustrations">Illustrations</a>
        </li>
        <li><a href="http:/www.google.com/search?q=infographics+inspiration">Infographics</a>
        </li>
        <li><a href="http:/www.google.com/search?q=product+design+inspiration">Product Design</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Digital Photography</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=cityscape+photography">Cityscapes</a>
        </li>
        <li><a href="http:/www.google.com/search?q=water+ocean+photography">Oceans</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wide+angle+lens+photography">Wide-Angle Lens</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wildlife+photography">Wildlife</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Print &amp; Identity</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=branding+identity+print+design">Branding</a>
        </li>
        <li><a href="http:/www.google.com/search?q=business+cards+design">Business Cards</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+design+letterpress">Letterpress</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+poster+artwork">Poster Art</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Programming</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=learn+css3+web+development">CSS3</a>
        </li>
        <li><a href="http:/www.google.com/search?q=learn+html5+web+development">HTML5</a>
        </li>
        <li><a href="http:/www.google.com/search?q=javascript+jquery+tutorials">JavaScript &amp; jQuery</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+development+mysql">MySQL Databases</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wordpress+programming">Wordpress CMS</a>
        </li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-arrow-circle-o-right"></i>&nbsp;Web Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=web+design+icons">Icons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+tutorials">Tutorials</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+user+interface">User Interfaces</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design">Website Layouts</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

On page load all the menu items are collapsed.I only want to expand first menu option on page load.

Please help me to create this.

Tags: html jquery

Answers

~~Just do this:~~

$(document).ready(function(){
   $("#nav li:first").find('a').trigger('click');
})

UPDATE

DEMO

$(document).ready(function() {
  $("#nav > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if (!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
  $("#nav > li:first > a").trigger('click');
  //Or else you can go with below one too
  //$("#nav li:first").find('a').trigger('click');
});

Just trigger click on the first item. You can use :first Pseudo Class

$(document).ready(function() {
  $("#nav > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if (!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
  $("#nav > li:first > a").trigger('click');
});

/* nav menu styles */

#nav {
  display: block;
  width: 280px;
  margin-left: -40px;
  list-style-type: none;
}
#nav li {} #nav > li > a {
  display: block;
  padding: 8px 7px;
  font-size: 1.3em;
  font-weight: 200;
  color: #889599;
  text-decoration: none;
  border-bottom: 1px solid #EFEFEF;
  background-color: #F7F9FA;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#292929));
    background: -webkit-linear-gradient(top, #343434, #292929);
    background: -moz-linear-gradient(top, #343434, #292929);
    background: -ms-linear-gradient(top, #343434, #292929);
    background: -o-linear-gradient(top, #343434, #292929);
    background: linear-gradient(top, #343434, #292929);*/
}
#nav > li > a:hover,
#nav > li > a.open {
  color: #889599;
  background-color: #F7F9FA;
}
#nav li ul {
  display: none;
  background: #EFEFEF;
  list-style-type: none;
  margin-left: -40px;
}
#nav li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 30px;
  font-size: 1.1em;
  text-decoration: none;
  font-weight: 200;
  color: #889599;
}
#nav li ul li a:hover {
  background: #F7F9FA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="nav">
    <li><a href="#">Animation</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Graphic Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a>
        </li>
        <li><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding &amp; Logos</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a>
        </li>
        <li><a href="http:/www.google.com/search?q=graphic+design+illustrations">Illustrations</a>
        </li>
        <li><a href="http:/www.google.com/search?q=infographics+inspiration">Infographics</a>
        </li>
        <li><a href="http:/www.google.com/search?q=product+design+inspiration">Product Design</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Digital Photography</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=cityscape+photography">Cityscapes</a>
        </li>
        <li><a href="http:/www.google.com/search?q=water+ocean+photography">Oceans</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wide+angle+lens+photography">Wide-Angle Lens</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wildlife+photography">Wildlife</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Print &amp; Identity</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=branding+identity+print+design">Branding</a>
        </li>
        <li><a href="http:/www.google.com/search?q=business+cards+design">Business Cards</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+design+letterpress">Letterpress</a>
        </li>
        <li><a href="http:/www.google.com/search?q=print+poster+artwork">Poster Art</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Programming</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=learn+css3+web+development">CSS3</a>
        </li>
        <li><a href="http:/www.google.com/search?q=learn+html5+web+development">HTML5</a>
        </li>
        <li><a href="http:/www.google.com/search?q=javascript+jquery+tutorials">JavaScript &amp; jQuery</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+development+mysql">MySQL Databases</a>
        </li>
        <li><a href="http:/www.google.com/search?q=wordpress+programming">Wordpress CMS</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Web Design</a>
      <ul>
        <li><a href="http:/www.google.com/search?q=web+design+icons">Icons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+tutorials">Tutorials</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design+user+interface">User Interfaces</a>
        </li>
        <li><a href="http:/www.google.com/search?q=web+design">Website Layouts</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

- MeeneshJain
- July 31, 2015 at 6:53 am
- 0 votes
0
One solution is that you can hard code in html to open that menu

add open class to a and style='display:block' to your ul
```
<ul id="nav">
    <li><a class="open" href="#">Animation</a>
      <ul style="display: block;">
        <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a>
        </li>
        <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a>
        </li>
```
Or

You can add this before your click event
```
 $("nav").find("li:first a").addClass("open");
$("nav").find("li:first ul").show();
```
here is a Example
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

expand first menu option on page load in Jquery – Photoshop

Answers

Or

here is a Example