[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

how to create experts-exchange like horizontal sliding menu with more button and sliding animation?

Posted on 2009-04-13
3
Medium Priority
?
404 Views
Last Modified: 2013-11-19
I want to create the menu like in experts-exchange which is say under home tab showing "Microsoft", "Apple", "Internet",...,"more" and when you click on "more" it shows other items in the menu with animation of slider.
How to create that?
0
Comment
Question by:K V
3 Comments
 
LVL 7

Expert Comment

by:StraySod
ID: 24138513
don't know what technique EE use, but it can be certainly done using jQuery animate plugin:
http://docs.jquery.com/Effects/animate

use appropriate css properties like right, left... and animate the container which holds all menu items
0
 
LVL 3

Accepted Solution

by:
hard2u2001 earned 2000 total points
ID: 24164932
they are using two absolutely positioned  "UL" tags. The first will be shown by default and the second UL is hidden at that time.When you click on button they simultaneously change the left co-ordinates of both UL in such a way that it looks like its being animated from right to left or left to right.
The code snippet below shows how particularly experts-exchange doing that.

I have used the same css from EE.


<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <script>
       /**
*  Helper functions
*
**/
function addClass(element, className)
{
   removeClass(element, className);
   if (element.className)
      element.className += ' ' + className;
   else
      element.className = className
}
 
 
function removeClass(element, className)
{
   var newClassName = '';
   if (element && element.className)
   {
      var a = element.className.split(' ');
      for (var i = 0; i < a.length; i++)
      {
         if (a[i] != className)
         {
            if (i > 0)
               newClassName += ' ';
            newClassName += a[i];
         }
      }
      element.className = newClassName;
   }
}
 
/**
*  ScrollableList function
*
*  pass a unique id into this constructor to designate it as a scrollable element.  In your HTML, you will need ids for the first state, the last state, the clipping area and the scroller controller.
*/
function ScrollableList(elementID, zonePosition, skinType) {
 
  this.elementID = elementID;
  this.scrollableAreaFirst = document.getElementById(this.elementID + '0');
  this.scrollableAreaLast = document.getElementById(this.elementID + '1');
  this.scrollableController = document.getElementById(this.elementID  + "Cont");
  this.scrollableClip = document.getElementById("compZnNavCl");
  this.scrollableClip.style.clip = "rect(0px, 922px, 35px, 0px)";
   
	
	this.time = 0;
	this.distance = 30;
	this.timeHandle = 0;
	this.isMoving = false;
	
	this.left = 0;
	this.left2 = this.scrollableAreaFirst.clientWidth;
	this.lastLiMoved = 0;
	// adjust the left positions of the lists according to which
	// list is currently visible. remove the next class if position 2
	if (zonePosition == 1) {
		this.firstPosition = true;
	}	else {
		this.left -= this.left2;
		this.left2 -= this.left2;
		removeClass(this.scrollableController, "next");
		this.firstPosition = false;
	}
		
	this.scrollableAreaLast.style.left = this.left2 + "px";
	this.scrollableAreaLast.style.marginTop = "-" + this.scrollableAreaFirst.clientHeight + "px";
 
	
	this.obj = elementID + "Object";
	eval(this.obj + "=this");
 
  this.toggle = function() {
		if (!this.isMoving) {
			this.isMoving = true;
	    if (this.firstPosition == true) {
  	    this.scrollLast();
    	} else {
      	this.scrollFirst();
    	}
		}
  }
 
  this.scrollLast = function() {
		this.distance = Math.abs(this.distance);
    this.scroll();
    removeClass(this.scrollableController, "next");
  }
 
  this.scrollFirst = function() {
		this.distance *= -1;
		this.scroll();
    addClass(this.scrollableController, "next");
  }
  
	
	this.scroll = function ()
	{
	if (this.keepScrolling()) {
	  		this.left -= this.distance;
			this.left2 -= this.distance;
			this.scrollableAreaFirst.style.left = this.left + "px";
			this.scrollableAreaLast.style.left = this.left2 + "px";
			this.timeHandle = setTimeout(this.obj + '.scroll()',this.time);
		} else {
			this.firstPosition = !this.firstPosition;
			this.isMoving = false;
			clearTimeout(this.timeHandle);
		}
	}
	
	/**
	 * returns true if we should continue to scroll the nav bar
	 */
	this.keepScrolling = function() {
		if (this.firstPosition == true) {			//scrolling left
		    //alert(this.lastLiMoved);
			if (this.left2 <= 0)
				return false;
		} else {															//scrolling right
			if (this.left >=0)
				return false;
		}
		return true;
	}
	
}
 
  </script>
  <style>
	#compZnNavCont{
		float:right;
		margin-top:5px;
		margin-right:1px;
		background-repeat:no-repeat;
		width:24px;
		z-index:1000;
		height:16px;
		display:block;
		cursor:pointer;
		background-image:url(http://www.experts-exchange.com/xp/images/zonePrevBack.png);
	}
	#compZnNavCont{
		*background-image:none;
		*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://images.experts-exchange.com/xp/images/zonePrevBack.png',sizingMethod='crop');
	}
	#compZnNav .next{
		background-image:url(http://www.experts-exchange.com/xp/images/zoneNextMore.png);
	}
	#compZnNav .next{
		*background-image:none;
		*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.experts-exchange.com/xp/images/zoneNextMore.png',sizingMethod='crop');
	}
	#compZnNav{
		top:127px;
		margin:0;
		position:absolute;
		width:957px;
		height:25px;
		white-space:nowrap;
		background:url(http://www.experts-exchange.com/xp/images/subNavBlue.gif) repeat-x;
		padding:0 10px 0 0;
		overflow:hidden
	}
	#compZnNavCl{
		position:absolute;
		overflow:hidden;
	}
	#compZnNav UL{
		width:900px;
		margin:0;
		height:25px;
		position:relative;
		clear:none;
		overflow:hidden;
	}
	#compZnNav #compZnNav1{
		background:url(http://www.experts-exchange.com/xp/images/subNavBack.gif) repeat-x;
		height:25px;
	}
	#compZnNav LI{
		background:url(http://www.experts-exchange.com/xp/images/zoneDivider.gif) 100% 100% no-repeat;
		display:block;
		margin:0;
		float:left;
		*width:10px;
		padding:0 10px 0 10px;
	}
	#compZnNavCl A{
		display:block;
		height:23px;
		background-position:19px 7px;
		background-repeat:no-repeat;
		margin:0;
		padding:0;
	}
	#compZnNav LI A SPAN{
		display:block;
		width:100%;
		height:23px;
		color:#FFF;
		font-weight:bold;
		text-decoration:none;
		/*overflow:hidden;*/
	}
	#compZnNav LI.nCur A:hover SPAN, #compZnNav LI.firstChild A:hover SPAN{
		/*background:url(http://www.experts-exchange.com/xp/images/15p_w_opacity.png) repeat-x;*/
		color:#FF6
	}
	#compZnNav LI.current A, #compZnNav LI.current A:hover{
		height:23px;
		/*background:url(http://www.experts-exchange.com/xp/images/zoneNav_opacity.png) repeat-x;*/
		color:#F6F;
	}
	#compZnNav LI.current A SPAN{
		background-position:19px 7px;
		background-repeat:no-repeat;
		color:#F6F;
	}
	
	#compZnNav .root A{text-decoration:none;}
	#compZnNav LI.current .root A SPAN{}
	
  </style>
 </head>
 
 <body>
	<div id="compZnNav">
		<a onmouseup="zoneScroller.toggle()" class="next" id="compZnNavCont">&nbsp;</a>
		<div id="compZnNavCl">
			<ul id="compZnNav0">
				<li class="firstChild current"><div class="root"><a href="/Microsoft/"><span>Microsoft</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Apple/"><span>Apple</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Internet/"><span>Internet</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Gamers/"><span>Gamers</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Digital_Living/"><span>Digital Living</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Virus_and_Spyware/"><span>Virus & Spyware</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Hardware/"><span>Hardware</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Software/"><span>Software</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/ITPro/"><span>ITPro</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Developer/"><span>Developer</span></a></div></li>
			</ul>
			<ul id="compZnNav1">
				<li class="nCur"><div class="root"><a href="/Storage/"><span>Storage</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/OS/"><span>OS</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Database/"><span>Database</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Security/"><span>Security</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Programming/"><span>Programming</span></a></div></li>
				<!--
				<li class="nCur"><div class="root"><a href="/Web_Development/"><span>Web Development</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Networking/"><span>Networking</span></a></div></li>
				<li class="nCur"><div class="root"><a href="/Other/"><span>Other</span></a></div></li>
				-->
			</ul>
		</div>
	</div>
	<script>
		var zoneScroller = new ScrollableList('compZnNav', 1,50 );
	</script>
 </body>
</html>

Open in new window

0
 
LVL 21

Author Closing Comment

by:K V
ID: 31569785
great !!!!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

607 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