Problem with drop down menu

[benjaminmorgan]

I am building a project site using skills I have learned and when I started on the dropdown menu it hit me hard. I couldn't remember much of anything using Jquery to build a dropdown. I have the design of the site all nice and tidy then I tried making the list item toggle when I clicked it when I used Jquery's toggle function but nothing happened. I don't know if it has anything to do with CSS specificity or not. I don't have the site hosted but I can send the source files in an email and you can play around. It is small as I started it a couple of days ago so there isn't a lot of stuff to read through. If you could help me I would appreciate it.

Edited November 18, 2011 by benjaminmorgan

[benjaminmorgan]

$("div.hide").click(function() {

$("div.hide").removeClass("hide");

});

If i have an unordered list in a div with the class called hide and it is inside a list item in a navigation bar why won't it remove the class and show it? Is the code not right?

[falkencreative]

Do you have have CSS in place that adds display:none to div.hide? I'm not necessarily seeing any issues with your code otherwise... you have this code within a jquery code block and you are sure you have linked up the main jquery file correctly?

 

Keep in mind that this code will remove the "hide" class from any divs with that class. Clicking again won't make it show again. Instead, you might want to look at Toggle (http://api.jquery.com/toggle/). That will hide the selected element if it is visible, or show it again if it is hidden. I'd also suggest looking at http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers -- it's a bit of an older article now, but it really helped me when I was first starting with jQuery.

 

The only way we can really tell is if you post the code. You can upload a zip of the code here if you want -- click the "Add Reply" button at the bottom of the page and look for the "Attachments" header below the main input box.

[benjaminmorgan]

Okay, its attached.

[falkencreative]

A couple things:

 

-- You need the standard jquery block around your jquery code:

 

<script type="text/javascript">

$(document).ready(function(){

$("div.hide").click(function() {

$("div.hide").removeClass("hide");

});

});

</script>

 

-- Secondly, you can't click on an element that is hidden -- of course it won't show. Your "div.hide" initially has visibility set to hidden, so if it's hidden, you can't click on it. You'd be better off adding a link surrounding your "services" text, or targeting the entire <li>. For example:

 

<li class="dropdown">Services<img style="padding-left:5px;" alt="v" src="images/drop-down.gif" />

<noscript><p><a href="services.php">Services<img style="padding-left:5px;" alt="v" src="images/drop-down.gif" /></a> </p></noscript>

<div class="hide">

<ul class="droppeddown">

<li><a href="logo.php">Logo Design</a></li>

<li><a href="website.php">Website Design</a></li>

</ul>

</div>

</li>

 

<script type="text/javascript">

$(document).ready(function(){

$(".dropdown").click(function() {

$("div.hide").removeClass("hide");

});

});

</script>

 

It still won't work exactly like you want it to, but it's a step in the right direction.

[benjaminmorgan]

Did you see the space between the margin? not on the main UL but the sub level one. It kept the margin and I can't change it. Do you have an idea why? I fixed the jquery by adding the document ready function and adding slideToggle.

I have margin bottom with 15px but when I user #nav li ul li {margin:0;} nothing happens, the styles aren't applied at all if i use important on the #nav li ul li section it works but i was wondering if there was another way.

It is also doing something really weird when I click on it in Opera. The whole line of Li tags are going down with the last dropdown item. Only doing it in opera.

Thanks So Much. Guess this has been a good birthday after all.

nightvisionks.zip

Edited November 19, 2011 by benjaminmorgan

[falkencreative]

Adding #nav li ul li {margin:0;} just before

 

/*

END NAVIGATION

*/

 

in the default.css stylesheet seems to work for me?

[benjaminmorgan]

Okay it is working now, i guess the specificity of .droppeddown li wasn't enough. Did you see what it is doing in opera with the code i uploaded in the last post?

[falkencreative]

What version of Opera are you using (and are you using the most recent version?). I'm not seeing any issues (Opera 11.52 Mac)

[benjaminmorgan]

Windows, Version

11.52 it says i have latest version.

[falkencreative]

Sorry, I'm not able to duplicate the issue. Using Opera 11.52 Windows (Windows XP).

 

My personal preference would be that if the standard browsers (IE7-9, Firefox, Chrome) are working fine, Opera has a small enough market share that I wouldn't worry about it too much -- or, at least, it's an item that you can come back to later.

[benjaminmorgan]

Okay, Thanks so much for your help. I appreciate it.