Web Analytics Made Easy - StatCounter Jquery menu fade in and out delay - CodingForum

Announcement

Collapse
No announcement yet.

Jquery menu fade in and out delay

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Jquery menu fade in and out delay

    Hi All,

    I do not consider myself proficient in jquery, which is why I used an open source script. I usually pick things up pretty quickly but I am having trouble adding a menu fade in and out delay to the code. I have found examples online, but I must be entering the code in the wrong spot, because I still can't get it to work.

    Here is the jquery that currently runs the menu:

    Code:
    <head><!--Scripts Start Here-->

<script src="http://localhost/joomla/templates/pub/jquery-1.3.2.min.js"></script>

	<!--Navigation-->
<script type="text/javascript">
$(document).ready(function() {

	$("ul#topnav li").hover(function() { //Hover over event on list item
		$(this).css({ 'color' : '6FB900'}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'color' : 'none'}); //Ditch the background
		$(this).find("span").hide(); //Hide the subnav
	});

});
</script>
	<!--End Navigation-->
<!--Scripts End Here-->

</head>
    Ideally I would like a pretty quick fade into the menu on hover, and out on hover out, however, the most important part is the delay in which the sub menu stays active when the user hovers out.

    Can someone show me the appropriate code and where it would be inserted into what I currently have?

    Thanks!
    Meebix
    Tags: None
  • #2
    What part of the menu would you like delayed?

    When the user mouses off the submenus you want the submenus to be delayed before fading out?

    Regards,

    LC.

    Comment

    • #3
      Try this:
      Code:
      var delay_time = 200;
$("ul#topnav li").hover(function() {
	$(this).css({ 'color' : '#6FB900'}).find("span").show(); //You forgot # here
} , function() {
	$(this).css({ 'color' : 'none'}).find("span").delay(delay_time).hide(0);
});
      Last edited by crayday; Sep 10, 2011, 09:30 AM.

      Comment

      • #4
        @LearningCoder: Basically the way it works is when the user hovers over the main menu, a horizontal submenu appears below. I want there to be a delay in when the submenu disappears from when the user's mouse moves off one of the main menu links.

        (The reason is because there is a gap between the main menu and the submenu, so the submenu disappears too quickly right now for the user to even get his mouse on the submenu).

        @CrayDay: Doesn't seem to have worked :/


        Thanks again all!

        Comment

        • #5
          Ah, I understand now. Have you tried giving the mouseoff function a timeframe in which to 'hide()'?? Maybe try this out:-

          Code:
          <script type="text/javascript">
$(document).ready(function() {

	$("ul#topnav li").hover(function() { //Hover over event on list item
		$(this).css({ 'color' : '6FB900'}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'color' : 'none'}); //Ditch the background
		$(this).find("span").hide(3000); //Hide the subnav
	});

});
</script>
          I have added 3000 inside of your mouseoff hide() method. I believe this should hide the menu over the course of 3 seconds (3000 milliseconds), which will effectively give the user time to get his/her mouse from the main menu, to the sub-menu.

          Let me know how you got on as i'm not very good with jQuery. Let me see if I can find you a good tutorial on it.

          Regards,

          LC.

          Comment

          • #6
            Originally posted by meebix View Post
            @CrayDay: Doesn't seem to have worked :/
            It works with a usual, simple css menu which i wrote to test the code. What is your version of jQuery? Give an example of your menu.

            Comment

            • #7
              @LearningCoder: Interesting, it fades the menu out, but doesn't necessarily make it stay longer.

              @CrayDay: Here is the JQuery version (jquery-1.3.2.min.js)

              Here is an example of what I am looking for: http://steelseries.com/us/home

              Hover over one of the main menu items and see how the submenu stays for a couple seconds after your mouse if off the main menu.

              Comment

              • #8
                Originally posted by meebix View Post
                @CrayDay: Here is the JQuery version (jquery-1.3.2.min.js)
                =) That's why .delay function doesn't work (it was added in 1.4 version). You should update your jquery, your version is obsolete.

                Comment

                • #9
                  Ah ha, glad it was something simple! Thanks CrayDay.

                  One last question. The delay is working now, so the user can get to the submenu, however, while my mouse is in the submenu, (because it is off the main menu link) the submenu disappears after the delay.

                  Can I add some logic to say, if the user's mouse is in the main link OR submenu, stay active. Once the user's mouse leaves the main link or submenu, then activate the delay?

                  Thanks again.

                  Comment

                  • #10
                    Just put your submenu tag into the main menu tag like this:
                    Code:
                    <ul id="topnav">
	<li>
		main menu
		<span>sub menu inside main menu</span>
	</li>
</ul>
                    span (or some other tag inside span) should have absolute position, so it won't change sizes of element li.

                    Comment

                    Previous template Next
                    Working...
                    X
                    😀
                    🥰
                    🤢
                    😎
                    😡
                    👍
                    👎