PDA

View Full Version : Rounded Spry Drop Down Menus?


chux
12-18-2012, 01:16 PM
Does anyone know how to make the bottom edge of spry horizontal menu bar drop down menus rounded? Is this even possible with spry menu bars?

edbr
12-19-2012, 12:59 AM
in the css it should be possible

chux
12-19-2012, 06:08 PM
I have pretty much deducted that I have to add a rule, class or id somewhere. This cannot be done through the original set of SpryMenubarHorizontal rules. Something has to be added so that it only affects the bottom <li> of each submenu.

This is what I am trying to add to SpryMenubarHorizontal.css:

-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

I have been trying to add rules, classes and id's everywhere. I think I am on the right track. Can I add id's or classes to SpryMenubarHorizontal.css?

domedia
12-19-2012, 09:07 PM
You only need the two last lines of your code. Firefox and webkit will understand it.

Your challenge is coming up with the right selector. I would look at using the pseudo selector :last-child

(and yes you can add ID and class selectors in the CSS file if you want)

chux
12-20-2012, 01:30 PM
Thanks for the reply. That is definitely the way to go. I just can't figure out the correct selector and where to place it. I have attached my sprymenubarhorizontal.css file. You will see that I have added three rules to give the submenus a different look from the main navbar. For the life of me, I can't figure this out.

ul.MenuBarHorizontal > li:last-child
{
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

or

ul.MenuBarHorizontal ul > li:last-child
{
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

or

ul.MenuBarHorizontal ul li:last-child
{
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

Those are just a couple of variations placed in various locations in sprymenubarhorizontal.css. Can you steer me in the right direction on this? Thanks again.

chux
01-02-2013, 01:36 PM
In SpryMenuBarHorizontal.css at the bottom of the Design Information section I added:

ul.MenuBarHorizontal ul li:last-child a
{
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

And got the desired result.

I found this link helpful:
http://forums.adobe.com/thread/852178