Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Rounded Spry Drop Down Menus? (http://www.dreamweaverclub.com/forum//showthread.php?t=45027)

chux 12-18-2012 02:16 PM

Rounded Spry Drop Down Menus?
 
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 01:59 AM

in the css it should be possible

chux 12-19-2012 07:08 PM

New Rule Placement?
 
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 10: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 02:30 PM

Correct syntax and placement?
 
1 Attachment(s)
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 02:36 PM

I got it
 
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


All times are GMT. The time now is 03:57 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com