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)

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 ^_^
avatar
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
avatar
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>
avatar
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
avatar
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 41867
Reputation : 2877
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Back to top


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