dcsimg


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2
  1. #1
    Join Date
    Feb 2007
    Posts
    79

    Reverse / Drop Up Style Accordion

    Howdy Community,

    I have spent the past 4 hours strait looking for and trying to modify an accordion style vertical menu who's elements slide out of the top and up instead of the normal slide out of the bottom and down action.

    I would like it in jQuery, but at this point I will take any library. Thanks for your help. I know some have wondered "What have you tried making work".. jQuery Tools, Jquery UI and about 3 other scripts that looked updateable. All I couldn't get to work.

    I also made an attempt to fake an accordion using show/hide toggles and this sorta worked, but it didnt have the nice slide as well as my data didnt move on page in the right direction. Headache!!!

    Help!! Thanks, Cesar

  2. #2
    Join Date
    Feb 2007
    Posts
    79
    SOLVED!

    Specials Thanks to @tfburges from codingforums.com

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Test</title>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    		<style type="text/css">
    			.UpMenus {
    				position:absolute;
    				bottom:50&#37;;
    				left:50%;
    				width:102px;
    				height:126px;
    				margin:63px 0px 0px -50px;
    				padding:0px;
    				border:0px;
    				border-bottom:1px solid #00f;
    				list-style-type:none;
    				overflow:visible;
    			}
    			.UpMenus li {
    				position:relative;
    				float:left;
    				width:100px;
    				height:16px;
    				padding:2px 0px;
    				border:1px solid #00f;
    				border-bottom:0px;
    				background:#fff;
    				font:normal 12px sans-serif;
    				text-align:center;
    				overflow:visible;
    				cursor:pointer;
    				cursor:hand;
    			}
    			.UpMenus li:hover {
    				background:#00f;
    				color:#fff;
    			}
    			.UpMenus li ol {
    				position:absolute;
    				bottom:21px;
    				width:98px;
    				height:0px;
    				margin:0px;
    				padding:0px;
    				border:1px solid #00f;
    				border-top:0px;
    				border-bottom:0px;
    				list-style-type:none;
    				overflow:hidden;
    			}
    			.UpMenus li ol.Up {
    				border-top:1px solid #00f;
    			}
    			.UpMenus li ol li {
    				color:#000;
    				border:0px;
    				border-bottom:1px solid #99f;
    			}
    			.UpMenus li ol li:hover {
    				background:#99f;
    				color:#fff;
    			}
    		</style>
    		<script type="text/javascript">
    			$(function(){
    				$('.UpMenus > li').click(function(){
    					var ol = $(this).children('ol');
    					var h = ol.height()?0:ol.children('li').length*21;
    					var d = 0;
    					ol.parent().parent().children('li').each(function(){
    						if (d) {
    							$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
    							$(this).animate({top:'0px'},800);
    						} else if (!$(this).is(ol.parent())) {
    							$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
    							$(this).animate({top:(h?-h:'0')+'px'},800);
    						} else {
    							if (h) ol.addClass('Up');
    							ol.animate({height:h+'px'},800);
    							$(this).animate({top:'0px'},800,function(){if(!h){ol.removeClass('Up')}});
    							d = 1;
    						}
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class="UpMenus">
    			<li>
    				Menu 1
    				<ol>
    					<li>Sub 1 for Menu 1</li>
    					<li>Sub 2 for Menu 1</li>
    				</ol>
    			</li>
    			<li>
    				Menu 2
    				<ol>
    					<li>Sub 1 for Menu 2</li>
    					<li>Sub 2 for Menu 2</li>
    					<li>Sub 3 for Menu 2</li>
    					<li>Sub 4 for Menu 2</li>
    				</ol>
    			</li>
    			<li>
    				Menu 3
    				<ol>
    					<li>Sub 1 for Menu 3</li>
    					<li>Sub 2 for Menu 3</li>
    					<li>Sub 3 for Menu 3</li>
    				</ol>
    			</li>
    			<li>
    				Menu 4
    				<ol>
    					<li>Sub 1 for Menu 4</li>
    					<li>Sub 2 for Menu 4</li>
    					<li>Sub 3 for Menu 4</li>
    					<li>Sub 4 for Menu 4</li>
    					<li>Sub 5 for Menu 4</li>
    				</ol>
    			</li>
    			<li>
    				Menu 5
    				<ol>
    					<li>Sub 1 for Menu 5</li>
    					<li>Sub 2 for Menu 5</li>
    					<li>Sub 3 for Menu 5</li>
    					<li>Sub 4 for Menu 5</li>
    					<li>Sub 5 for Menu 5</li>
    					<li>Sub 6 for Menu 5</li>
    					<li>Sub 7 for Menu 5</li>
    				</ol>
    			</li>
    			<li>
    				Menu 6
    				<ol>
    					<li>Sub 1 for Menu 6</li>
    					<li>Sub 2 for Menu 6</li>
    				</ol>
    			</li>
    		</ul>
    	</body>
    </html>

Similar Threads

  1. Ajax browser and drop down menu problem
    By blckspder in forum AJAX
    Replies: 1
    Last Post: 11-22-2006, 03:19 PM
  2. DotNetBar Suite 3.0 with Office 2003 style released
    By DevComponents in forum dotnet.announcements
    Replies: 0
    Last Post: 04-20-2003, 07:44 PM
  3. Style properties for Drop Down list
    By Manoj Yadav in forum Web
    Replies: 1
    Last Post: 12-19-2002, 05:38 AM
  4. Drag and Drop Problem
    By Xin Li in forum .NET
    Replies: 0
    Last Post: 03-13-2002, 05:03 AM
  5. Replies: 0
    Last Post: 06-21-2001, 05:33 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center






×
We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.