Log in

View Full Version : Css And JQuery Help For Nav Menu


Bloodshot
09-26-2009, 06:44 AM
Hey Guys,

I am using this script I found on the net, but I am having issues.

I am trying to move the css code from html file to the css file but it just stops working after that. Then with the JQuery i changed it from a click to a hover over the arrow but I would like it have it work when the menu section is hovered as well ie: Tutorials.

Any suggestions or help? I have been at this for days and I am just stuck now.


JQuery:


// JavaScript Document
$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

$("ul.topnav li span").hover(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('slow').show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});






<!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>Untitled</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/default.js"></script>
<style type="text/css">
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(images/nav/nav_menu_background.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(images/nav/nav_menu_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center;
}
</style>

</head>

<body>
<div class="container">

<div id="header">
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>

</html>
davelf
09-26-2009, 10:04 AM
have you include the css into the html head? when you remove the style into css file.



<link rel="stylesheet" type="text/css" href="yourStyle.css" />
Bloodshot
09-26-2009, 04:44 PM
That's not the problem, because I have other css code in the css file that is being read but as soon as I move this css code in there, my nav menu does not work anymore, the layout is gone basically.

If anyone can test out what I mean, you will see it.
jscheuer1
09-27-2009, 10:12 AM
Please post a link to the page on your site that contains the problematic code so we can check it out.
Bloodshot
09-27-2009, 04:42 PM
Thanks.

Here is an example of it: http://www.sohtanaka.com/web-design/examples/drop-down-menu/

Here is the article: http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
jscheuer1
09-27-2009, 05:09 PM
That page works fine, and I see no external styles. Most likely, when you went to make the styles external, one or both of two things happened:


You made a (or placed the menu styles after an existing) syntax error (like including the style tag, etc.), thus invalidating the external version of the styles for the menu.

You changed the effective order of the styles visa vis your other styles and a conflict arose that prevented some or all of the menu styles from being used.


It could of course be some other issue, like incorrect link tag to the styles, incorrect location in the link tag, etc., too many things to enumerate really. I can't really tell unless I see an example page where the problem actually exists. Please post a link to the actual page with the actual problem.
Bloodshot
09-27-2009, 05:27 PM
I have the script working but I would like to clean up the css, I am having issue setting a font style just for the nav menu. All the css tags are used as ul.thenav or something like I am not very found of that style i have tried setting it to #thenav ul, li or .thenav ul, li but the whole thing just breaks.

Here is the html page: http://www.thenerdstop.com/default2.html
Here is the css page: http://www.thenerdstop.com/css/default2.css
Here is the js script: http://www.thenerdstop.com/js/default.css

Thanks
simcomedia
09-27-2009, 08:02 PM
You just want to change the font family? You'd modify this section:

ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}


By adding:

ul.topnav li a{
padding: 10px 5px;
font-family: name of font;
color: #fff;
display: block;
text-decoration: none;
float: left;
}

You could also add:
font-size: 12pt;
font-weight: bold;
Bloodshot
09-27-2009, 08:14 PM
Thanks guys, I finally got it working...thanks for the help :)