Open a div with click on an image

Hello;

I have an image as mobile menu icon as below:

 <div class="mobile-menu-icon">
      <a href="#"><img src="images/mobile_menu_icon.gif"  /></a>
  </div>

Open in new window


and a div which is for mobile menu as below:

   <!--start mobile menu codes -->
   <div class="wrapper-mobile-menu">
    <ul class="mobile-menu" dir="rtl">
      <li><a href="#">music</a></li>
      <li><a href="#">culture</a></li>
      <li><a href="#">lifestyle</a></li>
      <li><a href="#"> health</a></li>
      <li><a href="#">entertainment</a></li>
      <li><a href="#">sport</a></li>
      <li><a href="#">tech</a></li>
      <li><a href="#">social</a></li>
     </ul>
   </div>

Open in new window


i want that when the page load the div of mobile menu not shown but when click on img(mobile_menu_icon.gif) in above div then the mobile menu div open slowly and by click again on that img close.
I have installed jQuery

Thanks
MOSTAGHASSIAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
1 - just add "sue strict";  :
<script>
"use strict";
jQuery(function($) {
    $(".mobile-menu-icon a").click(function(evt) {
         evt.preventDefault();
         $(".wrapper-mobile-menu").toggle("slow");
    });
});
</script>

Open in new window

2 - replace :
.wrapper-mobile-menu {
    display:none;
}

Open in new window

by :
.wrapper-mobile-menu {
  position:absolute;
  top: 20px;
  left: 20px;
}

Open in new window


you can adjust top and left to your need
0
 
leakim971PluritechnicianCommented:
to hide your div by default, add some css :
.wrapper-mobile-menu {
    display:none;
}

Open in new window


to use your button to toggle slowly the div :
<script>
jQuery(function($) {
    $(".mobile-menu-icon a").click(function(evt) {
         evt.preventDefault();
         $(".wrapper-mobile-menu").toggle("slow");
    });
});
</script>

Open in new window

0
 
MOSTAGHASSIAuthor Commented:
Thanks,it works,but there are 2 things:

1-In line   3-$(".mobile-menu-icon a").click(function(evt) {    Dreamweaver report error( missing "use strict" statement) .

2-When i click on icon and when div open it cause that the divs which are below this div(wrapper-mobile-menu ) push down.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
MOSTAGHASSIAuthor Commented:
Line  "use strict"; has this error:

Use the function form of "use strict";

but adding position:absolute; solved that pushing problem.
0
 
leakim971PluritechnicianCommented:
And like this ?
<script>
jQuery(function($) {
"use strict";
    $(".mobile-menu-icon a").click(function(evt) {
         evt.preventDefault();
         $(".wrapper-mobile-menu").toggle("slow");
    });
});
</script>

Open in new window

0
 
MOSTAGHASSIAuthor Commented:
Thank you very much, it is ok now.
0
 
MOSTAGHASSIAuthor Commented:
Thanks a lot.
0
All Courses

From novice to tech pro — start learning today.