Add RTL support to Superfish jQuery menu plugin
posted November 20th, 2009 at 8:17 pm by chad
Gallery 3's core themes use the Superfish menu plugin for jQuery. Superfish provides very nice multi-level dropdown menus, but it does not include support for RTL languages.
So along with other recent work to provide better RTL support for Gallery 3 themes, I also wrote the following RTL overrides for Superfish.
Just drop the following in somewhere after the inclusion of the Superfish style sheet when your site's in RTL mode! Oh, you'll also need the submenu/arrows sprite file, arrows-ffffff-rtl.png flipped too.
NOTE: Thanks to a conflict between the code formatting module, Drupal, and/or TinyMCE, you'll need to change the > below to real greater than symbols. Sorry.
/* RTL Superfish ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.rtl .sf-menu a {
border-left: none;
border-right:1px solid #fff;
}
.rtl .sf-menu a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
.rtl .sf-sub-indicator {
left: .75em !important;
right: auto;
background: url('superfish/images/arrows-ffffff-rtl.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
.rtl a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: -10px -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
.rtl a:focus > .sf-sub-indicator,
.rtl a:hover > .sf-sub-indicator,
.rtl a:active > .sf-sub-indicator,
.rtl li:hover > a > .sf-sub-indicator,
.rtl li.sfHover > a > .sf-sub-indicator {
background-position: 0 -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.rtl .sf-menu ul .sf-sub-indicator { background-position: 0 0; }
.rtl .sf-menu ul a > .sf-sub-indicator { background-position: -10px 0; }
/* apply hovers to modern browsers */
.rtl .sf-menu ul a:focus > .sf-sub-indicator,
.rtl .sf-menu ul a:hover > .sf-sub-indicator,
.rtl .sf-menu ul a:active > .sf-sub-indicator,
.rtl .sf-menu ul li:hover > a > .sf-sub-indicator,
.rtl .sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: 0 0; /* arrow hovers for modern browsers*/
}
.rtl .sf-menu li:hover ul,
.rtl .sf-menu li.sfHover ul {
right: 0;
}
.rtl ul.sf-menu li li:hover ul,
.rtl ul.sf-menu li li.sfHover ul {
right: 10em; /* match ul width */
}
.rtl ul.sf-menu li li li:hover ul,
.rtl ul.sf-menu li li li.sfHover ul {
right: 10em; /* match ul width */
}
/*** shadows for all but IE6 ***/
.rtl .sf-shadow ul {
background: url('superfish/images/shadow.png') no-repeat bottom left;
padding: 0 0 9px 8px;
-moz-border-radius-bottomright: 17px;
-moz-border-radius-topleft: 17px;
-webkit-border-top-left-radius: 17px;
-webkit-border-bottom-right-radius: 17px;
}
.rtl .sf-menu a {
border-left: none;
border-right:1px solid #fff;
}
.rtl .sf-menu a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
.rtl .sf-sub-indicator {
left: .75em !important;
right: auto;
background: url('superfish/images/arrows-ffffff-rtl.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
.rtl a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: -10px -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
.rtl a:focus > .sf-sub-indicator,
.rtl a:hover > .sf-sub-indicator,
.rtl a:active > .sf-sub-indicator,
.rtl li:hover > a > .sf-sub-indicator,
.rtl li.sfHover > a > .sf-sub-indicator {
background-position: 0 -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.rtl .sf-menu ul .sf-sub-indicator { background-position: 0 0; }
.rtl .sf-menu ul a > .sf-sub-indicator { background-position: -10px 0; }
/* apply hovers to modern browsers */
.rtl .sf-menu ul a:focus > .sf-sub-indicator,
.rtl .sf-menu ul a:hover > .sf-sub-indicator,
.rtl .sf-menu ul a:active > .sf-sub-indicator,
.rtl .sf-menu ul li:hover > a > .sf-sub-indicator,
.rtl .sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: 0 0; /* arrow hovers for modern browsers*/
}
.rtl .sf-menu li:hover ul,
.rtl .sf-menu li.sfHover ul {
right: 0;
}
.rtl ul.sf-menu li li:hover ul,
.rtl ul.sf-menu li li.sfHover ul {
right: 10em; /* match ul width */
}
.rtl ul.sf-menu li li li:hover ul,
.rtl ul.sf-menu li li li.sfHover ul {
right: 10em; /* match ul width */
}
/*** shadows for all but IE6 ***/
.rtl .sf-shadow ul {
background: url('superfish/images/shadow.png') no-repeat bottom left;
padding: 0 0 9px 8px;
-moz-border-radius-bottomright: 17px;
-moz-border-radius-topleft: 17px;
-webkit-border-top-left-radius: 17px;
-webkit-border-bottom-right-radius: 17px;
}
filed under:
Comments
We need more details
Hello,
I would like to thank you for your great effort. As a beginner, I can not apply what you described so I suggest to write the article step by step or provide example to download.
Many thanks,
Saleh
Post new comment