www.webdeveloper.com
Results 1 to 3 of 3

Thread: Sliding menu issues.

  1. #1
    Join Date
    Aug 2013
    Posts
    4

    Sliding menu issues.

    First off here is a link to my site http://www.rezzurrectiontaxidermy.com.

    If you look at the menu, the third item down is "braggin' rights" I'm wanting to get this on the same line. But everything I've tried totally messes up the menu animation. Any help would be appreciated. Let me know if you need more clarification. Here is the code for that page. What is in red is the script for the menu. It also calls some other js files and has a css file to go with it as well.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Rezzurrection Taxedermy</title>
    t<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
    <style type="text/css">
    #fadeshow1 {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    #slideshowtoggler {
    	position: absolute;
    	bottom: 0;
    	text-align: center;
    	width: 100%;
    }
    #slideshowholder {
    	position: fixed;
    	bottom: -530px;
    	left: 0;
    	width: 100%;
    }
    #coninfo {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    
    #map_canvas {
    	position: absolute;
    	bottom: 30px;
    	left: 125%;
    	margin-left: -1000px;
    	width: 500px;
    	height: 500px;
    }
    
    #contactholder{
    	position: fixed;
    	bottom: -530px;
    	left: 0;
    	width: 100%;
    }
     
    html, body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	overflow:hidden;
    } 
    
    #filter{
    	position: fixed;
    }
    
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.delay.js"></script>
    <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
    
    
    
    <script>
    	$(document).ready(function() {	
    		$('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: -530});
    		});
    		$('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: -530});
    		});
    		$("#menu, #white_line, #logo").css("opacity","0");
    		$("#menu").stop().animate({
    				opacity: 0.9,
    				marginLeft: '50px' 
    		}, 2400, 'easeInSine');
    		$("#white_line, #logo").stop().animate(
    			{opacity: 0.7},
    			{duration:2400,easing: 'easeInSine'
    		})
    	
    		$('#menu span').mouseenter(function(element) {
    			$("#menu ul li").css("opacity","1");
    			$('#white_line').stop().animate(
    				{top: 40, height:290},
    				{duration:500,easing: 'easeOutBack'}
    			)
    			$("#menu ul li").eachDelay(function(){ 
    				$(this).stop().animate({
    				opacity: 1,
    				marginLeft: '0px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'easeOutBack');			
    			}, 30);			
    		});
    		
    		$('#menu').mouseleave(function(element) {
    			$("#menu ul li").eachDelay(function(index){ 
    				$(this).stop().animate({
    				opacity: 0,
    				marginLeft: '-200px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'linear');	
    				if(index == $("#menu ul li").size() -1){
    					$('#white_line').stop().animate(
    						{top: 79, height:1},
    						{duration:600,easing: 'easeInBack'
    					})
    				}
    			}, 30);
    			
    			
    		});
    		
    		
    		
    		
    		$('#menu ul li').mouseenter(function(element) {			
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '0.5' 
    			}, 500, 'linear');
    			$(this).stop().animate({
    				backgroundPosition: "300px 0px",
    				opacity: '1' 
    			}, 600, 'easeOutBounce');	
    			$(this).find('a').css("color","#916153");
    		});
    		
    		$('#menu ul li').mouseleave(function(element) {			
    			$(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '1' 
    			}, 200, 'linear');	
    			$(this).find('a').css("color","#000");
    		});
    		
    	});
    </script>
    
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    var $ = jQuery;
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["./Rez_Pics/Slide1.png"],
    		["./Rez_Pics/Slide2.png"],
    		["./Rez_Pics/Slide3.png"],
    		["./Rez_Pics/Slide4.png"],
    		["./Rez_Pics/Slide5.png"],
    		["./Rez_Pics/Slide6.png"],
    		["./Rez_Pics/Slide7.png"],
    		["./Rez_Pics/Slide8.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "none",
    	togglerid: "slideshowtoggler"
    })
    
    </script>
    <!--[if lt IE 9]>
    <style type="text/css">
    #bg {
    	background-image: none !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
    }
    </style>
    <![endif]-->
    </head>
    <body >
    
    <div id="pagewrap">
    		
    	<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>
    		
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item1"><a href="#">Gallery</a></li>
    				<li class="item2"><a href="#">Field Care</a></li>
    				<li class="item3"><a href="#">Braggin' Rights</a></li>
    				<li class="item4"><a href="#">Contact</a></li>
    				
    			</ul>
    			
    		</div>
    	</div>
    		<div id="logo"><a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png"></a></div>
    		<div id="FaceBook"><a href="https://www.facebook.com/RezzurrectionTaxidermy" rel="external"><img src="./Rez_Pics/camo-facebook-icon.png" /></a></div>
    </div>
    
    			<div id="slideshowholder">
    				<div id="fadeshow1"></div>
    					<div id="slideshowtoggler">
    						<a href="#" class="prev">		
    							<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
    								<span class="status" style="margin:0 50px; font-weight:bold"></span> 
    						<a href="#" class="next">
    							<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
    					</div>
    			</div>
    			<div id="contactholder">
    				<div id="coninfo"><img src="./Rez_Pics/ContactInfo.png"></div>
    				<div id="map_canvas">
    					<iframe width="500" height="500" frameborder="0" scrolling="no" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2788+highway+ff,+eureka+mo&amp;aq=&amp;sll=38.304661,-92.437099&amp;sspn=6.886173,9.876709&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=2788+FF,+Eureka,+Missouri+63025&amp;ll=38.460982,-90.65094&amp;spn=0.033604,0.04283&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
    				</div>
    			</div>
    						
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2012
    Posts
    46
    Hi

    Changing
    Code:
    <li class="item3"><a href="#">Braggin' Rights</a></li>
    To:
    Code:
    <li class="item3"><a href="#" style="font-size: 14px;">Braggin' Rights</a></li>
    Worked for me. Otherwise you'd have to dig into the file that you included called

    css/styles.css

    and change the code:
    Code:
    #menu ul li{
    	margin-left:-210px;
    	background: url(../Rez_Pics/li.png) repeat 150px top;
    	width:140px;
    	padding-left:10px;
    }
    To:
    Code:
    #menu ul li{
    	margin-left:-210px;
    	background: url(../Rez_Pics/li.png) repeat 150px top;
    	width:150px;
    	padding-left:10px;
    }
    The second solution might require that you adjust the jQuery animation code slightly to keep all the text in the animation. I didn't feel like recreating your entire site to try it out, but if you need more help just ask.

  3. #3
    Join Date
    Aug 2013
    Posts
    4
    Thanks, never thought about changing the font. I was trying to widen the area. Changed all the font in the css to 16px and it worked great. Thanks again!!

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