I hope this can help save someone some of the time I wasted .. lol. I have not spent any time refining the look of my sample menu but it should give a decent starting point. The child and grandchild menus are under About -> our company
This is a step by step instruction for creating a custom horizontal superfish menu
With this selection there are 6 thing you can customize easily to get a wide range of looks
the height of the menu
the font size/type
Background color/image
hover color/image
child menu items color/image
grandchild menu items color/image
Ian, chris or some of the other css wizards could polish the css code up and maybe I will followup
with arrows and shadowing if there is enough interest. I think a full on tutorial
for superfish and thematic would be a great addition, that could address arrows, shadowing and changing the display defaults like
dissolve rates in a similar manner.
I have used 3 images with gradients, but you could delete the links to those and
just go with flat background colors.
This is what I ended up with, it is still a rough draft but good enough for me at the moment.
http://www.besthealthsupplies.com
you will need to decide the height of your menu strip and the font size. The images
and codes included are 42px high. This can be any height you want with some simple editing
Strip all superfish menu css styling, anything sf- and your #access div style from your style.css and default.css files
add this import file command near the top of your style.css file -- @import URL('superfish-themed.css');
if you are going to use images you can start with these:
http://www.rradvice.com/wp-content/themes/RRadvice/images/access-blue-42.gif
http://www.rradvice.com/wp-content/themes/RRadvice/images/access-palelightblue-42.gif
http://www.rradvice.com/wp-content/themes/RRadvice/images/access-bblue-42.gif
create a folder named " images " in your child theme directory and save them there
create a new file called superfish-themed.css and save it to your child directory.
Change the border style between the menu items if you want to - see comments in css code
copy the following code to the superfish-themed.css file. Load them to your server and you should be good to go
/*
Theme Name:
Theme URI:
Description:
Author:
Template: thematic
Version:
*/
/*** Overall section ***/
#access { /* Sets the background for the menu division - called access in thematic */
height:42px; /* this sets the height of your menus */
font-size:16px;
overflow:visible;
z-index:100;
background:#CFFBFF URL(images/access-blue-42.gif) repeat scroll 0 0; /* sets the color outside of your menu items - if you do not want to use images, you can replace the background lines with something like -- background: blue; -- */
}
.skip-link { /* for accessibility */
display:none;
}
/*** ESSENTIAL STYLES positioning***/
/*coloring etc .. now handled by Theme section */
.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;
background:#CFFBFF URL(images/access-bblue-42.gif) repeat scroll 0 0; /* hover effect - might not be needed duplicates lower entry **/
}
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;
}
/******* Theme Specific SKIN *********/
.sf-menu {
float: left;
margin-bottom: 1em;
list-style: none; /* this keeps the dots from showing after each menu item */
}
.sf-menu a {
border-left: 1px solid #fff; /* change this to match your color or delete if you do not want dividers between menu selections */
border-top: 0px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none; /*so your menu items are not underlined */
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #0021BF; /*** main font color **/
}
/* - sets the background of the page you are on */
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
border-bottom-color:#fff;
background: #000000 url(images/access-lightblue-42.gif) repeat scroll 0 0;
}
.sf-menu li { /*this is the one that sets the top level background to blue */
background: #BDD2FF;
background:#CFFBFF url(images/access-blue-42.gif) repeat scroll 0 0;
list-style:none;
}
.sf-menu li li { /* this colors the 2nd level menus set to very light*/
background:#CFFBFF url(images/access-palelightblue-42.gif) repeat scroll 0 0;
}
.sf-menu li li li { /* this sets the grandchild menus to very light */
background:#CFFBFF url(images/access-palelightblue-42.gif) repeat scroll 0 0;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
outline: 0;
Color: #FF4B4B; /*** redish **/
background: #CFFBFF url(images/access-bblue-42.gif) repeat scroll 0 0; /* this is the one that makes the hover work */
}
/**** arrows and shadows not displaying in this version *****/
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
background:#CFFBFF url(images/access-bblue-42.gif) repeat scroll 0 0;
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
background:#CFFBFF url(images/access-bblue-42.gif) repeat scroll 0 0;
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
