Jquery, Rounded Corners, and Disastrous Results
bnice5000 - June 29, 2009 - 21:39
I will start by saying that I am a complete newb when it comes to jquery and Drupal theme development. I am trying to use the jquery corners http://www.malsup.com/jquery/corner/ product to create rounded corners in the navigation menu on a Drupal 6 Zen sub-theme. I have the corners rounded by inserting the code below into my page.tpl.php, but the issue that I am running into is that the corners style are being inherited all the way through the menu instead of staying on the top level. I have included my code below. Any help would be appreciated. Thank you in advance.
--Brian
$(window).load(function(){
$("#sidebar-left-inner ul.menu li").corner("bl tl");
});
=-=
they are targeting the entire sidebar because your code is telling it to do so. I'd think you need to use the block delta of that specific menu?
I'm not familiar with that
I'm not familiar with that script but you need a way to override it for deeper levels, such as (pseudo code)...
$("#sidebar-left-inner ul.menu ul li").corner("no rounded corners");
Professional Drupal Design and Theme Services
Additional Information
I have narrowed it down to the fact that the menu system does not have a div that represents the levels of the menu system. Because of this, the modules that I am using to round corners in jquery (http://www.malsup.com/jquery/corner/) does not understand that it is not supposed to cascade lower.
Currently in the rounded corners jquery module there does not appear to be a way to override the corners module in the code. I am going to try and contact the author of the module, I am also going to try and implement something on my own.
In the short term though I need to get something up and running. I guess my question morphs a little bit. Has anyone had any luck with other corner rounding jquery or javascript code in there themes? Also, In the past (in websites that I have written not using drupal), I usually surround each level of the menu with a div. Is there a way to override the system to create a div at the top level of the menu? If someone could point me to some docs it would be most appreciated.
--Brian
...
Do you need the DIV, can you use the UL block level wrapper thats already there? I'm thinking you can use the Menu Attributes module to insert a custom class on the containing li and use that as jQuery hook, such as
<ul><li>Item</li>
<li class="level-1">Parent Item</li>
<ul>
<li>Child menu item</li>
</ul>
</li>
</ul>
Where level-1 is the custom class inserted with Menu Attributes module and the selector hook is just li.level-1 ul to target that wrapper.
Other than that I seem to recall someone posting some code a while back that added dynamic classes for each level in the hierarchy, but I cant find it right at this moment.
Remember also that jQuery fully supports all CSS3 selectors, so its pretty easy to insert markup and/or classes...
Professional Drupal Design and Theme Services
Thank You To Everybody and the Solution
Thank you to VeryMisunderstood and a special thank you to jmburnz. The seeds of the solution were in your post. Here is what I did. As per your suggestion I looked at the Menu Attributes module (http://drupal.org/project/menu_attributes). It does not allow you to directly target the li tag but it does let you target the a tag. So, you mentioned that jquery is pretty flexible and thinking about that I used the ability to traverse the DOM and it gave me the perfect solution. I inserted a class tag called level1 on the a tag using the Menu Attributes module for the top level of the menu. I then used the jquery item parent to effect the li tag. Thank you again for all the help. Also, if anyone else is interested in the rounded corners jquery plugin, I have included my solution below.
--Brian
In the page.tpl.php for your theme insert the following:
$(window).load(function(){$("a.level1").parent().corner("bl tl");
});