ThemeShaper Forums » Thematic


Step by Step - style a horizontal superfish menu w sample code

(11 posts)
  • Started 13 years ago by jrobben
  • Latest reply from sotabound04
  • This topic is not resolved


  1. 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.

    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:

    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:
    Template: thematic
    /*** Overall section ***/
    #access {  /* Sets the background for the menu division - called access in thematic */
        height:42px; /* this sets the height of your menus */
    	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 */
    /*** 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 {
    	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;
    .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;
    Posted 13 years ago #
  2. This was a very helpful tutorial jrobben! Thanks for taking the time to share it. I have been beating myself up for days trying to get my sub-menus to show up and the overflow:visible; z-index:100; in #access was just what I was looking for! Thanks!

    I have a question that you or someone else might be able to answer for me. Some of my sub-menus are very long and wide and some have three grand-children. Is there anyway to make the sub-menus expand to the left as you go further to the right on the main menu? (I can't provide a link because I'm experimenting with my local copy right now.)

    We really need more Thematic/Superfish documentation.

    Posted 13 years ago #
  3. No idea on getting them to expand to the left as you move right... but you can get the titles in the boxes to wrap so they are not so wide .. ie set a fixed width to the children or grandchildren.

    Posted 13 years ago #
  4. Thanks for the reply jrobben but they go off screen when the browser is resized to smaller resolutions and I don't think the fixed width is going to solve that. I need something to tell it not to go past the wrapper.

    Posted 13 years ago #
  5. blueblue

    can u tell me how to expand the width of the menu? like in ur example, thanks

    Posted 13 years ago #
  6. fedude

    Another great post. Nice work jrobbin. I like the giving back I see with Thematic users.

    I'm only a newbie but wouldn't it be faster to include the new stylesheet with a link instead of an import?

    Especially if you have a lot of pages like I do

    Posted 13 years ago #
  7. theBlogButler

    Thanks for this!

    Posted 12 years ago #
  8. I'd like an answer on Legend's question as well. sf-menu css drives me nuts.

    Posted 12 years ago #
  9. think i have my answer...sort a default thematic or unmolested child-theme, the supersubs script is working as advertised and variable widths seem to work fine. I've got a couple child themes that don't do this. I think the wide-angle answer here is that we're messing with a css class within sf-menu that is prohibiting supersubs from doing it's job.

    Posted 12 years ago #
  10. marshcast

    Shame these links are broken - was the best script to work with too!!!

    Posted 12 years ago #
  11. I have been struggling as well to get my Superfish submenus to work, it is an absolute necessary for my new theme! I tried using the overflow:visible; z-index:100 for #access as well and whalla, that did the job. Much appreciated after hours of researching. Thematic rocks! Thanks you very much for the tutorial.

    Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.