TechQA.

Superfish menu vertically and opening to the left?

2.7k views Asked by At

I'm trying to use Superfish vertically but aligned to the right of page and thus opening any submenus to the left. I've been tweaking some CSS properties to achieve this but it doesn't work perfectly - the arrows are always positioned to the right of any parent menu text when in this case they should be at left of text and the positioning of the submenus to the left doesn't work exactly the same way in level 2 and level 3!

This is driving me crazy! Anyone has achieved this working perfectly? Any tips or examples?

Thanks in advance, LM

[EDIT]

I managed to put the arrows at left (commented in CSS [uppercase MY EDIT:...) and also managed to open the submenus at left (using the latest version of SuperFish with class .sf-vertical) but I'm still having problems with 3rd level submenus - the shadow is misplaced!

here is the html page and the CSS code I've altered (arrows in 'superfish.css' and position in 'superfish-vertical.css':

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link media="screen" rel="stylesheet" href="_assets/superfish.css" />
  <link media="screen" rel="stylesheet" href="_assets/superfish-vertical.css" />
  <script type="text/javascript" src="_assets/jquery-1.10.2.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="_assets/superfish.js"></script>
  <script type="text/javascript" src="_assets/hoverIntent.js"></script>
  <script type="text/javascript" src="_assets/supersubs.js"></script>
</head>
<body style="margin: 0;">

 <div style="width: 150px; position: absolute; top: 0px; right: 200px; background: #CCC;">
   <ul class="sf-menu sf-vertical" id="myMenu">
     <!--MENU-01-->
     <li><a href="#"><b>MENU-1</b></a></li>
     <!--MENU-02-->
     <li><a href="#"><b>MENU-2</b></a></li>
     <!--MENU-03-->
     <li>
       <a href="javascript:void(0);"><b>MENU-3</b></a>
       <ul>
         <li><a href="#">MENU-3.1</a></li>
         <li>
           <a href="javascript:void(0);">MENU-3.2</a>
           <ul>
             <li><a href="#">MENU-3.2.1</a></li>
             <li><a href="#">MENU-3.2.2</a></li>
             <li><a href="#">MENU-3.2.3</a></li>
             <li><a href="#">MENU-3.2.4</a></li>
           </ul>
         </li>
       </ul>
     </li>
     <!--MENU-04-->
     <li><a href="#"><b>MENU-4</b></a></li>
   </ul>
 </div>

 <script type="text/javascript">
 $(document).ready(function () {
   $('ul.sf-menu').supersubs({
     minWidth:'150px', maxWidth: '150px', extraWidth: 0
   }).superfish();
 });
 </script>

</body>
</html>

superfish.css

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: Arial, Helvetica, Sans-Serif; font-size: 12px; color: #FFFFFF;
}
.sf-menu li {
    position: relative;
}
.sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
}
.sf-menu > li {
    float: left;
}
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu ul ul {
    top: 0;
    left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {
    float: left;
    margin-bottom: 1em;
}
.sf-menu ul {
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    min-width: 12em; /* allow long menu items to determine submenu width */
    *width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
    /*border-left: 1px solid #fff;*/
    border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
    border-top: 1px solid rgba(255,255,255,0.5);
    padding: .75em 1em;
    text-decoration: none;
    zoom: 1; /* IE7 */
}
.sf-menu a {
    color: #13a;
}
.sf-menu li {
    background: #BDD2FF;
    white-space: nowrap; /* no need for Supersubs plugin */
    *white-space: normal; /* ...unless you support IE7 (let it wrap) */
    -webkit-transition: background .2s;
    transition: background .2s;
}
.sf-menu ul li {
    background: #AABDE6;
}
.sf-menu ul ul li {
    background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover {
    background: #CFDEFF;
    /* only transition out, not in */
    -webkit-transition: none;
    transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
    padding-right: 2.5em;
    *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px; /* MY EDIT: PLACES ARROWS AT MOST LEFT, IT WORKS OK */
    margin-top: -3px;
    height: 0;
    width: 0;
    /* order of following 3 rules important for fallbacks to work */
    border: 5px solid transparent;
    border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-top-color: rgba(255,255,255,0.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255,255,255,0.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
    border-left-color: white;
}

and finally superfish-vertical.css

/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
    width: 150px;
/* If you want the width of the closed menu to expand to its
widest top-level menu item (like its "Supersubs" submenus do),
replace the width rule above with the following two rules. */

/*
min-width: 12em;
*width: 12em;
*/
}

.sf-vertical ul {
    left: -100%; /* MY EDIT: THIS WORKS OK AT 2nd LEVEL */
    top: 0;
}
.sf-vertical > li {
    float: none;
}
.sf-vertical li {
    width: 100%;
}

.sf-vertical ul ul li {
    left: -200%; /* MY EDIT: THIS WORKS OK AT 3rd LEVEL BUT SHADOW IS MISPLACED */
    top: 0;
}

/*** alter arrow directions ***/
.sf-vertical.sf-arrows > li > .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255,255,255,0.5);
}
.sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
.sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
    border-left-color: white;
}
jquery css superfish
Original Q&A
2

There are 2 answers

0
xec On

Your second selector is selecting the <li> instead of the <ul> (where the shadow is), try;

.sf-vertical ul ul { /* removed trailing "li" selector */
    left: -100%; /* changed from 200% */
    top: 0;
}

Demo at: http://jsfiddle.net/JvmFm/2/

0
Moorthi Daniel On

This question may be old, but it may help some one, please try this jsfiddle.

(function($) { //create closure so we can safely use $ as alias for jQuery
    $(document).ready(function() {
        // initialise plugin
        var example = $('.sf-menu').superfish({
            //add options here if required                  
        }).supposition();
    });
})(jQuery);

Related Questions in JQUERY

Related Questions in CSS

Related Questions in SUPERFISH

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions