So I recently just started with jQuery and looked into doing a dropdown menu. I am pretty good with HTML and CSS but have a little trouble seeing the whole example with JavaScript and CSS together.
I was wondering if someone could give me a step-by-step procedure in writing the CSS part to give me a basic mental model for thinking about CSS and JavaScript working together. Thanks!
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function init_dropdown() {
if (!$('ul.dropdown').length) {
return;
}
$('ul.dropdown li.dropdown_trigger').hover(
function() { $(this).find('ul').fadeIn(1); },
function() { $(this).find('ul').hide(); }
);
}
$(document).ready(function() { init_dropdown(); });
// ]]>
</script>
<style type="text/css" media="screen">
/* <![CDATA[ */
body { font: small sans-serif; }
.dropdown { float: left; }
.dropdown a { line-height: 25px; text-decoration: none; }
.dropdown a:hover { color: #fff; background: #666; }
.dropdown li { list-style-type: none; position: relative; width: 80px; text-align: center; background-color: #eee; border: solid 1px #fff; }
.dropdown li.dropdown_trigger { float: left; }
.dropdown ul { position: absolute; display: none; }
.dropdown li ul { margin: 0px; padding: 0px; }
/* ]]> */
</style>
</head>
<body>
<nav>
<ul class="dropdown">
<li class="dropdown_trigger">
<a href="#">Nav Item 1</a>
<ul>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
</ul>
</li>
<li class="dropdown_trigger">
<a href="#">Nav Item 2</a>
<ul>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
</ul>
</li>
</ul>
</nav>
<p>
This text is just here to show that the menu overlaps the contents below it
</p>
</body>
</html>
If I were you, I would have a look at each css line in turn and find out what it does, then try changing it and seeing how that affects your menu.
Margin, padding, font, color, background and border are gonna make the biggest differences. There are also some CSS3 commands that might be worth a look. border-radius springs to mind.
Thanks for the feedback, but I was looking for a more elegant solution. Somehow I know that my jQuery works and I’m not working with the CSS in the jQUery just the hover technique to display and hide the list elements.
I was wondering if there are some CSS rules that can make the dropdown look much better. At this time the dropdown doesn’t really look right. It looks like this.
The borders are probably making it displaced slightly to the right and the top border between the list elements is making the second one thicker. I suppose I can just change it so that it has an upper border. I’m much more concerned that I got this effect with a little stroke of luck because I tried multiple times until I looked at some code from online in order to successfully create this dropdown. So I was wondering if there is a pragmatic approach to the CSS for the jQuery.
If you happen to know some good resources for learning jQuery WebApps that also shows CSS, that would be great because at the moment I own “jQuery CookBook” and it explains the jQuery very well but nothing related to the CSS. Again, thanks for trying to help.
I’m not sure if I can give you a step-by-step guide for the css. Basically CSS rules are fixed to the DOM, jQuery can manipulate the css rules on the fly.
For example:
CSS
div{
width:100px;
height:100px;
}
jQuery
$('div').css({background: 'red'}); //changes the background color of all divs AFTER the DOM has loaded
$('div').css({position: 'relative'}).animate({left: '+100px'}); //moves all divs 100px to the left
So as a general guide. CSS loads with the DOM, javascript (jQuery) can affect css commands AFTER the DOM has loaded.
There’s probably someone out there who can give you a more precise answer than that, but that’s how I see it.
