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

jQuery image menu (Cool Slide) B6dz0Du

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
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
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
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

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
avatar
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
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


jQuery image menu (Cool Slide) Slgray10

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

Male Posts : 45678
Reputation : 3219
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Back to top


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