SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'm sure you could find plenty by Googling that question. My first attempt dug up this:

    Rotated Background with Slide Up Menu using JQuery and CSS | Web Development

    Demo: Rotated Background with Slide Up Menu

  3. #3
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ralph.m - thanks for the try, but that is not what im looking for. First i need it completely stacked, not each nav floated left. Second and most important, i need the main nav to stay in place and the sub nav to grow out of the top and up.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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%;
    				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>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Thanks for posting this, cesarcesar. Nice not to see so much unnecessary JS. The menu doesn't work with JS off, which means it's not as accessible as it could be. Ideally the top-level links would be clickable in such situations.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it doesn't work with JS off, but I will have a JS-off static navigation in place to cover it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •