www.webdeveloper.com
Results 1 to 1 of 1

Thread: [RESOLVED] Fullscreen drop down

  1. #1
    Join Date
    Apr 2012
    Posts
    11

    resolved [RESOLVED] Fullscreen drop down

    Hi,

    I'm trying to create a dropdown menu that starts as a 40px band across the top of the page and then when menu is clicked it drops down to fill the screen.
    The band you can see when the page loads is basically the bottom of the dropdown and when clicking menu it drops down to reveal the whole thing.

    I have achieved this to a certain extent however it appears different on other browsers.

    Here's it online:
    http://www.mastersofnone.co.uk/slidermick/default.html

    On my iMac with FF it appears perfectly however in safari the menu loads further down and on a PC the band doesn't even show but when menu is pressed it works fine but again returns too far up so is hidden.

    Here's the html and JS:
    Code:
    <body>
    
    <div id="title">
    		Title goes here
    	</div>
    <div id="contact">
    		+contact goes here
    	</div>
    
    	
    	<div id="menubutton">
    		<a href="#" class="topMenuAction">Menu open/close</a>
    	</div>
    
        
    
    
    	<script type="text/javascript">
    	$(document).ready(function() {
    					$("#slider").animate({ 
    					marginTop: "-829px"}); 
    	
    		$(".topMenuAction").click( function() {
    			if ($("#openCloseIdentifier").is(":hidden")) {
    				$("#slider").animate({ 
    					marginTop: "-829px"
    					}, 700 );
    				
    				$("#openCloseIdentifier").show();
    			} else {
    				$("#slider").animate({ 
    					marginTop: "0px"
    					}, 700 );
    				
    				$("#openCloseIdentifier").hide();
    			}
    		});  
    	});
    	</script>
    	
    	
    	
    	<div id="sliderWrap">
    		<div id="openCloseIdentifier"></div>
    		<div id="slider">
    			<div id="sliderContent">
    				
    				<div id="kinetic">
    Some content goes here
                    </div>
    				
    				<div id="static">
    Some content also goes here
                    </div>
                    
    			<div id="openCloseWrap">
    				<a href="#" class="topMenuAction" id="topMenuImage">
    					
    				</a>
    			</div>
    		</div>
    	</div>
    	
        
    </body>
    </html>
    And this is the CSS:

    Code:
    body {
      background:#ccc;
      margin: 0;
      font-family: helvetica neue, Arial, sans-serif;
      font-size: 11px;
      color: #000;
      line-height: 15px;
    }
    
    #title {
      position:fixed;
      height: 30px;
      padding: 10px 0px 0px 30px;
      z-index:100;
    
    }
    
    #contact {
      position:fixed;
      height: 30px;
      padding: 10px 0px 0px 0px;
      right:35px;
      z-index:100;
    }
    
    #header {
      position:fixed;
      height: 27px;
      padding: 10px 0px 0px 50px;
      width:100%;
    
    
    }
    
    #menubutton {
      position:fixed;
      width: 100%;
      height:25px;
      padding: 10px 0px 0px 300px;
      z-index:10;
    }
    
    
    
    a {
      color:#000;
      text-decoration:none;
    }
    
    #kinetic {
    padding-bottom:30px;
    
    }
    
    #static {
    
    }
    
    #sliderWrap {
    
      width: 100%;
    }
    
    #slider {
      position: fixed;
      background:#fff;
      color:#000;
      width: 100%;
      height: 100%;
      margin-top: -829px;
      padding:0px 0px 0px 300px;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
      filter: alpha(opacity=60);
      -moz-opacity:0.6;
      -khtml-opacity: 0.6;
      opacity: 0.6;
    
    }
    
    #slider img {
      border: 0;
    }
    
    #sliderContent {
      margin: 0px 0px 0px 0px;
      position: fixed;
      padding-top: 50px;
    
    
    }
    The attached image is how it looks on my computer which is perfect and it drops down to full screen perfectly.

    Any ideas why it's so different on other machines/browsers?
    Attached Images Attached Images

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