Add RTL support to Superfish jQuery menu plugin

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.

 

/* 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;
}

Comments

This code works perfectly for

This code works perfectly for horizontal mode but not for vertical mode.
would you describe how it works in vertical mode ??
Thanks

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

copyright © 2011, 2 tablespoons | Privacy Policy