Solved

Open a div with click on an image

Posted on 2016-11-12
7
109 Views
Last Modified: 2016-11-13
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
0
Comment
Question by:MOSTAGHASSI
  • 4
  • 3
7 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41885188
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
 

Author Comment

by:MOSTAGHASSI
ID: 41885336
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41885364
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:MOSTAGHASSI
ID: 41885394
Line  "use strict"; has this error:

Use the function form of "use strict";

but adding position:absolute; solved that pushing problem.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41885448
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
 

Author Comment

by:MOSTAGHASSI
ID: 41885455
Thank you very much, it is ok now.
0
 

Author Closing Comment

by:MOSTAGHASSI
ID: 41885459
Thanks a lot.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AJAX, If No returns don't let the AJAX Call run again 2 32
JQuery Detecting page post back 6 19
CSS DIV Height in Percent 1 25
White space in figure / img 4 18
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question