logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 12-18-2012, 01:16 PM   #1
chux
 
Join Date: Dec 2012
Location: Raymond, NH
Posts: 10
Default 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?
chux is offline   Reply With Quote
Old 12-19-2012, 12:59 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 9,315
Default

in the css it should be possible
__________________
If you're happy and you know it shake your meds!
different style links examples


Bali Villas Flights to Bali
edbr is online now   Reply With Quote
Old 12-19-2012, 06:08 PM   #3
chux
 
Join Date: Dec 2012
Location: Raymond, NH
Posts: 10
Default 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?

Last edited by chux; 12-19-2012 at 06:22 PM.. Reason: Add more description
chux is offline   Reply With Quote
Old 12-19-2012, 09:07 PM   #4
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,710
Default

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)
domedia is offline   Reply With Quote
Old 12-20-2012, 01:30 PM   #5
chux
 
Join Date: Dec 2012
Location: Raymond, NH
Posts: 10
Default Correct syntax and placement?

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.
Attached Files
File Type: txt spry.txt (6.6 KB, 0 views)

Last edited by chux; 12-20-2012 at 01:34 PM.. Reason: typo
chux is offline   Reply With Quote
Old 01-02-2013, 01:36 PM   #6
chux
 
Join Date: Dec 2012
Location: Raymond, NH
Posts: 10
Default 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

Last edited by chux; 01-02-2013 at 01:55 PM..
chux is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


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


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