Jump to content

Problem with drop down menu


benjaminmorgan

Recommended Posts

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 by benjaminmorgan
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by benjaminmorgan
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...