Added Jquery NavBar to my site but now any new UL and LI tags use the navbar values

HTML & CSS
1

Hi guys n girls,

I’m really not sure what i doing wrong with this one, I have tried countless different techniques but nothing is working correctly, please can someone help :injured:

Basically I built a layout for a new project over the weekend. Everything was looking good. I then downloaded and setup a jquery nav bar.

URL for Jquery Nav Bar Plugin: http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/

Since adding the nav bar any time i try to write a standard UL elsewhere on my layout it seems to be taking the CSS values from the nav bar.

What I want is for the nav bar to have the correct css settings applied to it and for any other UL’s or LI’s on my webpage to behave normally without any of the nav bar styling applied to it.

I have tried to modify the code for the nav bar ul and li’s to be specific as much as i can but it just don’t seem to work either… I’m totally lost on this one!

Here is my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My New Layout</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="shortcut icon" href="img/favicon.ico"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</head>

<body>

<div id="main_wrap">


<!--===================================================START OF BANNER AND NAV=========================================-->
<div id="banner_wrap">

<div id="menu-container">  <!-- use "selectedMenu" as a class for selected link -->
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Link 1</a></li>
<li><a href="#" class="normalMenu">Link 2</a></li>
<li><a href="#" class="normalMenu">Link 3</a></li>
<li><a href="#" class="normalMenu">Link 4</a></li>
<li><a href="#" class="normalMenu">Link 5</a></li>
<li><a href="#" class="normalMenu">Link 6</a></li>
</ul>
</div><!--End of menus container Div-->

</div><!--End of Banner Wrap-->



<div id="slider_wrap"></div><!--End of slider Wrap-->




<!--===================================================START OF CONTENT AREA=========================================-->

<div id="content_wrap">

<div id="left_content">

<div id="left_title_img"></div><!--end of left title img -->

<div id="title_text">What We Do</div>

<div id="rigt_title_img"></div>

<div id="left_text_box"><h2>This Is A Subheader In Green</h2>

<p>No illud timeam necessitatibus has, qui perpetua petentium intellegebat ut, exerci habemus no quo. Iusto deleniti id mea, mei vivendo splendide in, enim assueverit has an. An cum stet facete platonem, doming suavitate at mel. Cu saperet docendi minimum sit, virtute diceret mentitum ut mei, vix et modo inani splendide.
</p>

<p>Ius cu quot elaboraret, quo cu nibh dicam. Dolores inciderint philosophia est eu, populo saperet propriae sed te. Case mucius eam ut. His te consulatu honestatis.</p>

</div><!--End of left_text_box -->

</div><!--end of left content div -->


<div id="right_content">

<div id="left_title_img"></div><!--end of left title img -->

<div id="title_text">Another Subtitle</div>

<div id="rigt_title_img2"></div>

<div id="right_text_box"><h2>This is Sub Header 2</h2>

<p>No illud timeam necessitatibus has, qui perpetua petentium intellegebat ut, exerci habemus no quo. Iusto deleniti id mea, mei vivendo splendide in, enim assueverit has an. An cum stet facete platonem, doming suavitate at mel. Cu saperet docendi minimum sit, virtute diceret mentitum ut mei, vix et modo inani splendide.
</p>

</div><!--End of right_text_box -->

</div><!--End of right content-->

</div><!--End of content wrap-->



</div><!--End of Main Wrap div -->


<!--===================================================END OF CONTECT AREA=========================================-->



<div id="stats_wrap">

<div id="stats_center">

<div id="col1">
<h2>TITLE ONE</h2>
<div class="footer_img_01"></div>
<h3>12</h3>
<h2>MORE TEXT</h2>
</div><!--Enf of Col 1 div-->


<div id="col2">
<h2>ANOTHER TITLE</h2>
<div class="footer_img_02"></div>
<h3>82</h3>
<h2>MORE TEXT</h2>
</div><!--Enf of Col 2 div-->


<div id="col3">
<h2>ANOTHER TITLE</h2>
<div class="footer_img_03"></div>
<h3>500</h3>
<h2>MORE TEXT</h2>
</div><!--Enf of Col 3 div-->


<div id="col4">
<h2>ANOTHER TITLE</h2>
<div class="footer_img_04"></div>
<h3>2013</h3>
<h2>MORE TEXT</h2>
</div><!--Enf of Col 4 div-->


<div id="col5">
<h2>ANOTHER TITLE</h2>
<div class="footer_img_05"></div>
<h3>ISO</h3>
<h2>MORE TEXT</h2>
</div><!--Enf of Col 5 div-->

</div><!--End of stats centre div-->


</div><!--End of stats-->


<!--===================================================START OF FOOTER AREA=========================================-->

<div id="footer">

<div id="footer_center"><!--Start of footer center div -->

<div id="footer_left"><p>&copy;&nbsp;2014 MY WEBSITE.COM</p></div><!--End of footer left div-->

<div id="footer_middle"><p>22 Oakwood Avenue, Westfield</p></div><!--end of footer middle div-->

<div id="footer_right">

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

</div><!--end of footer right div-->

</div><!--end of footer center div -->

</div><!--End of footer-->

<!--===================================================END OF FOOTER AREA=========================================-->



</body>
</html>

Here is the main CSS file for the page:

/*===================================================== DEFAULT TAGS ======================================*/
body{
	margin:0px;
	padding:0px;}

p{
	color:#999;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
}

#main_wrap{
	margin:0 auto;
	width:1024px;
}


/*===================================================== END OF DEFAULT TAGS ======================================*/	






/*===================================================== START OF BANNER & NAV BAR ======================================*/	
#banner_wrap{
	width:1024px;
	height: 152px;
	background:url(img/banner.jpg) no-repeat;
	
}

#menu-container{
	float: right;
	width: 480px;
}





/*===================================================== END OF BANNER & NAV BAR ======================================*/


#slider_wrap{
	margin:0 auto;
	width:1024px;
	height: 560px;
	background:url(img/slider.jpg) no-repeat;
}





/*===================================================== MAIN CONTENT AREA ======================================*/
#content_wrap{
	margin:0 auto;
	width:1024px;
	height: auto;
	margin-top: 20px;
}

#left_content{
	width:700px;
	float:left;
}

#left_title_img{
	background:url(img/title_bg_left.png) no-repeat;
	width:19px;
	height:10px;
	float: left;
	margin: 5px 10px 0 0;
}

#left_text_box{
	clear: left;
	margin-right: 110px;
	margin-bottom: 80px;
	margin-top: 35px;
}
#right_text_box{
	clear: left;
	margin-top: 35px;
}

#left_text_box h2, #right_text_box h2{
	color:#0C8941;
	font-size: 16px;
	font-weight: lighter;
}

#title_text {
	color:#0c8a41;
	font-size: 14px;
	font-weight: bolder;
	float: left;
}

#rigt_title_img{
	background:url(img/title_bg_right.png) no-repeat;
	width:476px;
	height:10px;
	float: left;
	margin: 5px 0 0 10px;
}

#rigt_title_img2{
	background:url(img/title_bg_right2.png) no-repeat;
	width:205px;
	height:10px;
	float: left;
	margin: 5px 0 0 10px;
}


#right_content{
	width:324px;
	float:left;
}


/*=================================================== END OF MAIN CONTENT AREA ======================================*/






/*=================================================== START OF STATS WRAP ======================================*/
#stats_wrap{
	margin:0 auto;
	width:100%;
	height:178px;
	background-color:#0c9a48;
	clear: both;
}

#stats_center{
	margin:0 auto;
	height: 178px;
	width: 1024px;
}

#col1{
	width: 160px;
	height: 90px;
	float: left;
	border-right: 1px solid #CCC;
	margin: 45px 0 0 25px;
}

#col2{
	width: 200px;
	height: 90px;
	float: left;
	border-right: 1px solid #CCC;
	margin: 45px 0 0 15px;
}
#col3{
	width: 210px;
	height: 90px;
	float: left;
	border-right: 1px solid #CCC;
	margin: 45px 0 0 15px;
}
#col4{
	width: 180px;
	height: 90px;
	float: left;
	border-right: 1px solid #CCC;
	margin: 45px 0 0 15px;
}
#col5{
	width: 180px;
	height: 90px;
	float: left;
	margin: 45px 0 0 20px;
}

#col1 col2 col3 col4 col5, h2{
	color:#FFF;
	font-size: 11px;
	font-weight: normal;
	margin: 0 0 0 0;
}

#col1 col2 col3 col4 col5, h3{
	color:#FFF;
	font-size: 46px;
	font-weight: normal;
	margin: 0 0 0 0;
	line-height: 60px;
}

.footer_img_02{
	background:url(img/02.gif) no-repeat;
	width: 59px;
	height: 38px;
	float: right;
	margin: 15px 80px 0 0;
}

.footer_img_04{
	background:url(img/04.gif) no-repeat;
	width: 59px;
	height: 49px;
	float: right;
	margin: 8px 15px 0 0;
}

.footer_img_05{
	background:url(img/05.gif) no-repeat;
	width: 59px;
	height: 35px;
	float: right;
	margin: 14px 35px 0 0;
}

.footer_img_01{
	background:url(img/01.png) no-repeat;
	width: 59px;
	height: 49px;
	float: right;
	margin: 14px 15px 0 0;
}

.footer_img_03{
	background:url(img/03.png) no-repeat;
	width: 59px;
	height: 49px;
	float: right;
	margin: 10px 45px 0 0;
}
/*=================================================== END OF STATS WRAP ======================================*/


/*===================================================== FOOTER AREA ======================================*/
#footer{
	width:100%;
	height: 42px;
	background-color: #0c8a41;
}

#footer_center{
	margin:0 auto;
	height: 42px;
	width: 1024px;
}

#footer_left{
	float: left;
}

#footer_middle{
	float: left;
}

#footer_right{
	float: left;
	margin-left: 50px;
}

#footer p{
	color:#FFF;
	display: block;
	margin: 0 0 0 80px;
	padding: 16px 0 0 0;
	font-size: 11px;
}

#footer #footer_middle p {
	margin: 0 0 0 40px;
}

#footer #footer_right a:link {
	margin: 0 0 0 10px;
	color:#FFF;
	font-size:12px;
	padding: 14px 0 0 0;
	display:inline-block;
	text-decoration: underline;
}


/*===================================================== END OF FOOTER AREA ======================================*/

And here is the CSS file for the nav bar:

/* Navigation menu styles */

ul{
	height:25px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

ul li{
	border:1px solid #444444;
	display:inline-block;
	float:left;
	height:25px;
	list-style-type:none;
	overflow:hidden;
}

ul li a, ul li a:hover,
ul li a:visited{
	text-decoration:none;
}

.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
	outline:none;
	padding:5px 10px;
	display:block;
}

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
	margin-top:-25px;
	background:url(img/grey_bg.gif) repeat-x #eeeeee;
	color:#444444;
}

.selectedMenu,.selectedMenu:visited {
	margin:0;
}

.normalMenu, .normalMenu:visited{
	color:white;
	background:url(img/dark_bg.gif) repeat-x #444444;
}

And lastly here is the js fiile for the nav bar:

$(document).ready(function(){

	$('#navigationMenu li .normalMenu').each(function(){

		$(this).before($(this).clone().removeClass().addClass('hoverMenu'));

	});
	
	$('#navigationMenu li').hover(function(){
	
		$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);

	},
	
	function(){
	
		$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);

	});
	
});

I would be so grateful for anyone who can tell me what I am doing wrong here… this is driving me crazy!!

Thanks guys n girls.

2

Hi,

Just use the id on the nav and change the specificity of the anchor styles.


/* Navigation menu styles */
 
ul#navigationMenu {
	height:25px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
	list-style:none;
}
ul#navigationMenu li {
	border:1px solid #444444;
	display:inline-block;
	float:left;
	height:25px;
	list-style-type:none;
	overflow:hidden;
}
.normalMenu, .normalMenu:hover, .normalMenu:visited { text-decoration:none; }
.normalMenu, .normalMenu:visited, .hoverMenu, .hoverMenu:visited, .selectedMenu, .selectedMenu:visited {
	outline:none;
	padding:5px 10px;
	display:block;
}
.hoverMenu, .hoverMenu:visited, .selectedMenu, .selectedMenu:visited {
	margin-top:-25px;
	background:url(img/grey_bg.gif) repeat-x #eeeeee;
	color:#444444;
}
.selectedMenu, .selectedMenu:visited { margin:0; }
.normalMenu, .normalMenu:visited {
	color:white;
	background:url(img/dark_bg.gif) repeat-x #444444;
}

That should work :slight_smile:

Here’s a version for modern browsers without using javascript :slight_smile:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul#navigationMenu {
	height:25px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
	list-style:none;
}
ul#navigationMenu li {
	border:1px solid #444444;
	display:inline-block;
	float:left;
	height:25px;
	overflow:hidden
}
ul#navigationMenu a {
	position:relative;
	top:-25px;
	padding-top:25px;
	display:block;
	text-decoration:none;
	background:#444;
	-moz-transition:top .2s linear;
	-webkit-transition:top .2s linear;
	transition:top .2s linear;
}
ul#navigationMenu a:after {
	content:" ";
	background:#eee;
	position:absolute;
	top:0px;
	left:0;
	right:0;
	height:25px;
	z-index:2;
}
ul#navigationMenu a:hover { top:0 }
ul#navigationMenu a b {
	outline:none;
	padding:5px 10px;
	display:block;
	position:relative;
	z-index:3;
	font-weight:normal;
	text-shadow:0 -25px 0px #444;
	color:#fff;
	height:15px;
	line-height:15px;
}
</style>
<!--[if lte IE 9]>
<style>
ul#navigationMenu a:after{display:none}
ul#navigationMenu a:hover{
	top:-25px;
	background:#eee;color:#444;
}
ul#navigationMenu a:hover b{color:#444}
</style>
<![endif]-->
</head>

<body>
<ul id="navigationMenu">
		<li><a href="#"><b>Link 1</b></a></li>
		<li><a href="#"><b>Link 2</b></a></li>
		<li><a href="#"><b>Link 3</b></a></li>
		<li><a href="#"><b>Link 4</b></a></li>
		<li><a href="#"><b>Link 5</b></a></li>
		<li><a href="#"><b>Link 6</b></a></li>
</ul>
</body>
</html>
3

Thanks for your help Paul.

I figured out where I was going wrong while I was waiting for my post to be approved.

But thank you very much anyways… plus the non-JS code will come in handy.

Thanks mate.