Solved

Open a div with click on an image

Posted on 2016-11-12
7
87 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Facebook React and SyntheticEvents 6 49
css help with menu spacing 10 30
Problem with a CSS in a page 2 26
Capture logon name 13 31
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

911 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

22 Experts available now in Live!

Get 1:1 Help Now