SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery and CSS Dropdown Menu

    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:
    HTML 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>

  2. #2
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    div{
      width:100px;
      height:100px;
    }
    jQuery
    Code:
    $('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.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  4. #4
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    OK, well you can style those link however you want using css. You currently have these styles associated with the menu:
    Code:
    <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>
    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.

    Hope that helps.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •