Hi guys,

Ive been developing but Ive run into some trouble, basically I have two menus on my website, both run on javascript - one on classie.js, the other on jquery, I am certain that the scripts are conflicting as when I comment out one menu, the other functions perfectly and vice versa, if I do not do this, only the first menu works correctly. I should also add that even if I comment out the menu but do not comment out the call of the main.js javascript file the 2nd menu continues to function The code that I have is shown below;

Jquery and Modernizr files for menu 1
	<script src="js/modernizr.js"></script> <!-- Modernizr -->
  	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
//Menu Number 1
<div class="search-overlay"></div>
  	</main>
  	<div class="cd-member-bio member-1">


		<div class="cd-bio-content">
	<a href="#0" class="search-close"><img src="../img/cur.png" height="10" width="10" /><span class="entypo-cancel"></span></a> 
			<div id="inside-search">
				<h4>Search</h4>
				<div class="searchwrap">
					<input type="text" class="search" value=""><input class="entypo-search searchsubmit" type="button"  />
				</div>
				<h4>Advanced Search</h4>
				<div class="search-item">			
					<div class="item-bar">
						<span class="item-title">Color</span>
						<span class="search-button unactive">unactive</span>
					</div>
					<div class="check-search">
							<div class="hex">
								<input type="text" class="" value="#">
							</div>							
							<span class="color1"></span>	
							<span class="color2"></span>	
							<span class="color3"></span>	
							<span class="color4"></span>		
							<span class="color5"></span>	
							<span class="color6"></span>		
					</div>	
				</div>
				<div class="search-item">			
					<div class="item-bar">
						<span class="item-title">Type</span>
						<span class="search-button unactive">unactive</span>
					</div>
					<div class="check-search">
					
							<span class="cat active">Catering</span>	
							<span class="cat">Design Agency</span>	
							<span class="cat">Pharmaceuticals</span>	
							<span class="cat active">Bakery</span>		
							<span class="cat">Boutique</span>	
							<span class="cat">More</span>		
					</div>
				</div>
				<div class="search-item">			
					<div class="item-bar">
						<span class="item-title">Popularity</span>
						<span class="search-button unactive">unactive</span>
					</div>
					<div class="radio-search">
						<div class="select one">
							Most Popular
						</div>
						<div class="select two selected">
							Least Popular
						</div>				
					</div>	
				</div>
				<div class="search-item">			
					<div class="item-bar">
						<span class="item-title">Time frame</span>
						<span class="search-button active" data-icon="*">active</span>
					</div>		
					<div class="radio-search">
						<div class="select one selected">
							Latest
						</div>
						<div class="select two">
							Oldest
						</div>				
					</div>
					</div>
				</div>
				<span id="submit">
					Submit
				</span>
	</div> 
	<script src="js/main.js"></script> 

//MEnu N2
		<div class="overlay overlay-corner">
			<button type="button" class="overlay-close">Close</button>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Submit</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">contact</a></li>
					<li><a href="#">trio</a></li>
				</ul>
			</nav>
			<span id="social"><a href="#"><span class="entypo-twitter"></span></a></span>
		</div>
		<script src="js/classie.js"></script>
		<script src="js/demo1.js"></script>

Thanks guys,

Any help at all is greatly appreciated...

this might be the answer for you

Sash thats a good article and fixes the cause for conflicts that sometimes arise when multiple libraries, but the OP here is only using one.

 

For a start if you have already loaded jQuery you should use it for all your dom manipulation, and everything should be concatenated into one external script. You have not put up the code for your scripts so its hard to tell but maybe you have conflicting variables or something similar. If the functionality for both menus is similar then youll just want to call a single function with the .on('click', functionName()); method assuming in the example its a click to open thing.

Edited July 8, 201412 yr by rbrtsmith