The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

jQuery image menu (Cool Slide)

View previous topic View next topic Go down

Solved jQuery image menu (Cool Slide)

Post by sasukekun on May 25th 2013, 1:31 pm

hello all i want to ask ^^

how to solved this tutorial?
i like this slide because very smooth cheers
http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html



demo:
http://www.alohatechsupport.net/examples/image-menu-1.html

i done try, but i don understand in step 3-4 about jquery, Sad
I am confused what to put it where the code. I've tried and always failed Shocked

can you explain again this tutorial??

please help me Very Happy:

thanks before ^_^

sasukekun
Forumember

Posts : 253
Reputation : 6
Language : English

Back to top Go down

Solved Re: jQuery image menu (Cool Slide)

Post by sasukekun on May 26th 2013, 2:40 pm

BUMP!!

please someone help me Smile

thanks before bye

sasukekun
Forumember

Posts : 253
Reputation : 6
Language : English

Back to top Go down

Solved Re: jQuery image menu (Cool Slide)

Post by E-Mark on May 26th 2013, 2:46 pm

Here it is:
Code:
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery.js"></script>
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery-easing-compatibility.1.2.pack.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
  // find the elements to be eased and hook the hover event
  jQuery('div.jimgMenu ul li a').hover(function() { 
    // if the element is currently being animated
    if (jQuery(this).is(':animated')) {
      jQuery(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
      jQuery(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if (jQuery(this).is(':animated')) {
      jQuery(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
      jQuery(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
    }
  });
});
</script>

<style>

.jimgMenu {
  position: relative;
  width: 670px;
  height: 200px;
  overflow: hidden;
  margin: 25px 0px 0px;
}

.jimgMenu ul {
  list-style: none;
  margin: 0px;
  display: block;
  height: 200px;
  width: 1340px;
 
  }

.jimgMenu ul li {
  float: left;
}

.jimgMenu ul li a {
  text-indent: -1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right: 2px solid #fff;
  cursor:pointer;
  display:block;
  overflow:hidden;
  width:78px;
  height: 200px;
}

.jimgMenu ul li.slide-one a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/landscapes.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-two a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-three a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.slide-four a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/abstract.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-five a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/urban.jpg) repeat scroll 0%;
  min-width:310px;
 
}

.clear {
  clear: both;
}
</style>

<div class="jimgMenu">
  <ul>
    <li class="slide-one"><a href="#">Hello!</a></li>
    <li class="slide-two"><a href="#">Forumotion</a></li>
    <li class="slide-three"><a href="#">Coding</a></li>
    <li class="slide-four"><a href="#">Support</a></li>
    <li class="slide-five"><a href="#">Mark</a></li>
  </ul>
</div>

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: jQuery image menu (Cool Slide)

Post by refresh102 on May 26th 2013, 5:57 pm

Yeah It Works thumleft Again You Nailed It

refresh102
Forumember

Male Posts : 181
Reputation : 4
Language : English,Japanese

Back to top Go down

Solved Re: jQuery image menu (Cool Slide)

Post by sasukekun on May 26th 2013, 7:08 pm

now work 100% ^_^

thanks mr.mark problem solved Very Happy

you very amazing about coding
and never stingy to give a solution ^_^

thanks before bye

sasukekun
Forumember

Posts : 253
Reputation : 6
Language : English

Back to top Go down

Solved Re: jQuery image menu (Cool Slide)

Post by SLGray on May 26th 2013, 9:17 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum