www.webdeveloper.com
Results 1 to 5 of 5

Thread: Simple menu issues

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    11

    Simple menu issues

    Hi,

    I am trying to create a really simple drop down menu.

    I have one accordian button (labelled 'menu') that when clicked, opens up the dropdown menu.
    However, when you click 'menu' (once the dropdown is open) the dropdown closes up then opens again. How can I change the script below so that when the menu button is clicked it either opens the menu if it's closed or closes it if it is open?

    Code:
    $(document).ready(function() {
    	
    		
    	$('div.accordionButton').click(function() {
    		$('div.accordionContent').slideUp('normal');	
    		$(this).next().slideDown('normal');
    	});
    	
    	
    	$("div.accordionContent").hide();
    
    
    });
    Regards

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    it would be better with the HTML part together

  3. #3
    Join Date
    Apr 2012
    Posts
    11

  4. #4
    Join Date
    Apr 2012
    Posts
    11
    However I have removed all menus so it's just one.

  5. #5
    Join Date
    Apr 2012
    Posts
    11
    I've changed the way i'm going to do this menu and nearly have it working as I want.

    However all i need now is for the slider to be hidden on page load and then slide down when open/close is pressed. Here's it so far:

    Code:
    <body>
    
    
    	<script type="text/javascript">
    	$(document).ready(function() {
    	
    	
    		$(".topMenuAction").click( function() {
    			if ($("#openCloseIdentifier").is(":hidden")) {
    				$("#slider").animate({ 
    					marginTop: "-541px"
    					}, 400 );
    				
    				$("#openCloseIdentifier").show();
    			} else {
    				$("#slider").animate({ 
    					marginTop: "0px"
    					}, 400 );
    				
    				$("#openCloseIdentifier").hide();
    			}
    		});  
    	});
    	</script>
    	
    	
    	
    	<div id="sliderWrap">
    		<div id="openCloseIdentifier"></div>
    		<div id="slider">
    			<div id="sliderContent">
    				Content here
    			</div>
    			<div id="openCloseWrap">
    				<a href="#" class="topMenuAction" id="topMenuImage">
    					
    				</a>
    			</div>
    		</div>
    	</div>
    	
    	
    	
    	<div id="header">
    		<p></p>
    		<a href="#" class="topMenuAction">Menu</a>
    	</div>
    
    
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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



Recent Articles