Need help with Superfish Navbar

bertvb · November 5, 2010, 12:33pm

Hi,

I’ve been stuck on the Superfish Navbar (horizontal submenu)
i want to create a horizontal submenu.
I’ve been trying to get this to work for a day now and I keep getting a vertical dropdow.
http://cl.ly/2c594465e29d061528c3

I’ve done something wrong somewhere but can’t figure out what.

Can anyone help me on this ??

/* =Menu
-------------------------------------------------------------- */

.skip-link {
display:none;
}
#access {
height: 40px;
overflow: visible;
z-index: 100;
font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin:	 0;
padding:	 0;
list-style:	 none;
}
.sf-menu {
line-height:	1.0;
}
.sf-menu ul {
position:	 absolute;
top:	 -999em;
width:	 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:	 100%;
}
.sf-menu li:hover {
visibility:	 inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:	 left;
position:	 relative;
}
.sf-menu a {
display:	 block;
position:	 relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:	 0;
top:	 2.5em; /* match top ul list item height */
z-index:	 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:	 -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:	 10em; /* match ul width */
top:	 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:	 -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:	 10em; /* match ul width */
top:	 0;
}

/*** THEMATIC SKIN ***/
.sf-menu {
float:right;
}
.ie6 .sf-menu {
margin-bottom: -1px;
}
.sf-menu a {
border:1px solid #000;
padding: 9px 13px;
text-decoration:none;
}
.windows .sf-menu a {
font-size: 12px;
padding: 9px 13px 10px;
}
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
border-bottom-color: #fff;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #666;
}
.sf-menu li {
background: #16437A;
margin-left: 20px;
}
.sf-menu li li {
background: #fff;
float: right;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #fafafa;
outline: 0;
border-bottom-color: #ccc;
}
.sf-menu ul {

}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top: 32px; /* overriding essential styles */
}
.sf-menu ul ul {
margin-top:0;
}
.sf-menu ul a {
background:#fafafa;
border-bottom:none;
}
.sf-menu ul a:hover {
color: #666;
}

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
background:	 #BDD2FF;
height:	 2.5em;
padding-bottom:	2.5em;
position:	 relative;
}
.sf-navbar li {
background:	 #AABDE6;
position:	 static;
}
.sf-navbar a {
border-top:	 none;
}
.sf-navbar li ul {
width:	 44em; /*IE6 soils itself without this*/
}
.sf-navbar li li {
background:	 #BDD2FF;
position:	 relative;
}
.sf-navbar li li ul {
width:	 13em;
}
.sf-navbar li li li {
width:	 100%;
}
.sf-navbar ul li {
width:	 auto;
float:	 left;
}
.sf-navbar a, .sf-navbar a:visited {
border:	 none;
}
.sf-navbar li.current {
background:	 #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar li li.current,
.sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active {
background:	 #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
ul.sf-navbar ul li:hover li,
ul.sf-navbar ul li.sfHover li,
.sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active {
background:	 #D1DFFF;
}
ul.sf-navbar li li li:hover,
ul.sf-navbar li li li.sfHover,
.sf-navbar li li.current li.current,
.sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active {
background:	 #E6EEFF;
}
ul.sf-navbar .current ul,
ul.sf-navbar ul li:hover ul,
ul.sf-navbar ul li.sfHover ul {
left:	 0;
top:	 2.5em; /* match top ul list item height */
}
ul.sf-navbar .current ul ul {
top: -999em;
}

.sf-navbar li li.current > a {
font-weight:	bold;
}

/*** point all arrows down ***/
/* point right for anchors in subs */
.sf-navbar ul .sf-sub-indicator { background-position: -10px -100px; }
.sf-navbar ul a > .sf-sub-indicator { background-position: 0 -100px; }
/* apply hovers to modern browsers */
.sf-navbar ul a:focus > .sf-sub-indicator,
.sf-navbar ul a:hover > .sf-sub-indicator,
.sf-navbar ul a:active > .sf-sub-indicator,
.sf-navbar ul li:hover > a > .sf-sub-indicator,
.sf-navbar ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/*** remove shadow on first submenu ***/
.sf-navbar > li > ul {
background: transparent;
padding: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
width:	10em;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left:	10em; /* match ul width */
top:	0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

function child_head_scripts() { ?>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/superfish.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("ul.sf-menu")
.find('li.current_page_item,li.current_page_parent,li.current_page_ancestor')
.addClass('current') // WP fix : Enables showing of subapage nav when on one
.end()
.superfish({
pathClass : 'current',
delay: 100, // delay on mouseout
speed: 'fast', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
});
</script>

<?php }

add_filter('thematic_head_scripts','child_head_scripts');

function child_add_menuclass($ulclass) {
return preg_replace('/

/', '<ul id="nav" class="sf-menu sf-vertical">', $ulclass, 1);
}
add_filter('wp_page_menu','child_add_menuclass');

thanks in advance

PaulOB · November 5, 2010, 1:30pm

Do you have a link to a working page as we need working html and css to debug?

If the menu is going vertical then its likely you have set a width on the nested ul and therefore it can only downwards.

It’s probably here:


.sf-menu ul {
position:	 absolute;
top:	 -999em;
width:	 10em; /* left offset of submenus need to match (see below) */
}

Increase the width or set it to auto to see if it makes a difference.

Form the look of the image you linked to it doesn’t look like you want a horizontal menu anyway as it doesn’t seem to make sense.

bertvb · November 12, 2010, 12:46pm

Hey Paul,

I’ve kept looking this week, but still haven’t figured it out.
to try and create a navbar I followed a manual online. (http://themeshaper.com/forums/topic/create-horizontal-dropdown-child-menu-that-holds-on-subpage )

here you can see the site:
http://www.vals-alarm.be/wp-brc/

PaulOB · November 12, 2010, 1:33pm

Hi,

The nav seems to be working. What do you want to happen. It wouldn’t seem logical for the dropdowns to go horizontal in that setup.

To make them go horizontal you would make the nested ul have a width that is wide enough to hold all the submenu items and then ensure the lists in that menu have a suitable width defined (not 100% otherwise that will just be one per row). The list items would then be floated left.

The superfish site has a horizontal example here.

bertvb · November 12, 2010, 1:41pm

I thought I could make something along this line:
http://cl.ly/0B113z3z25081w0N3t1D (I’m more of a printed media man, more than I’m a web man)

PaulOB · November 12, 2010, 8:37pm

Hi,

Here’s a rough idea of what you need to do although I seem to be fighting the jS here.


/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin:    0;
    padding: 0;
    list-style: none;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu ul {
    position: absolute;
    top: -999em;
  [B]  width:800px!important[/B]; /* left offset of submenus need to match (see below) */
}
[B].sf-menu{position:relative;}
.sf-menu li{position:static!important}[/B]
.sf-menu ul li {
  [B]  width: 10em!important;
    float:right!important;
    clear:none!important;
}[/B]
.sf-menu li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
}
.[B]sf-menu li {
    float: left;
    position: relative;
}[/B]
.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
  [B]  right: 0;[/B]
    top: 2.5em; /* match top ul list item height */
    z-index: 99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
    top: -999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
    [B]right: 0;[/B] /* match ul width */
    top: 0;
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
   [B] right:        0; [/B]/* match ul width */
    top:            0;
}
/*** THEMATIC SKIN ***/

Make sure you backup first in case it all goes horribly wrong