Solved

Open a div with click on an image

Posted on 2016-11-12
7
42 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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
FTP File permissions 1 30
Box Model and Styling 12 20
Urgent Help with HTML CSS Positioning 9 21
Printing a Google Form 2 7
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now