?
Solved

Open a div with click on an image

Posted on 2016-11-12
7
Medium Priority
?
118 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 

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

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

764 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