[jQuery] Re: How Would You Use Superfish Drop Down Menus with CSS Sprites2?

Charlie Thu, 30 Jul 2009 07:55:01 -0700

Method I usaully use is to start with superfish CSS since it works very well cross browser and the scripted classes are built in. Then copy the styling from existing menu into the superfish rules and abandon all rules that don't fit into the .sf-menu structure. By proceeding in small steps and checking in browser regularily you can keep track of imported styles that break the menu, or don't do what was expected

Matt wrote:

I have a menu that I've already set up with ALA's CSS Sprites2 (http://
www.alistapart.com/articles/sprites2/) now I have to add a drop down
menu into the mix. What would be the best way to achieve this, or
rather what would I need to change in the Superfish scripts to get
this to work?


This is what I have for the HTML so far...

	<div id="header">
		<ul class="nav current-about">
			<li class="home"><a href="">Home</a></li>
			<li class="about"><a href="">About</a>
				<ul>
					<li><a href="">Contact Us</a></li>
				</ul>
			</li>
			<li class="menu"><a href="">Menu</a>
				<ul>
					<li><a href="">Appetizers</a></li>
				</ul>
			</li>
			<li class="private_dining"><a href="">Private Dining</a>
				<ul>
					<li><a href="">Private Dine Options</a>
						<ul>
							<li><a href="">Option 1</li>
						</ul>
					</li>
					<li><a href="">Event Menu</a></li>
				</ul>
			</li>
			<li class="events"><a href="">Events</a>
				<ul>
					<li><a href="">Events</li>
				</ul>
			</li>
			<li class="merchandise"><a href="">Merchandise</a>
				<ul>
					<li><a href="">Merchandise</a></li>
				</ul>
			</li>
		</ul>
	</div>

__________________________________________

And this is the CSS:

.nav {
	width: 960px;
	height: 149px;
	background: url(../images/primenav_rollovers.jpg) no-repeat green;
}

.nav li {
	display: inline;
}

.nav li a:link, .nav li a:visited {
	position: absolute;
	top: 0;
	height: 149px;
	text-indent: -9000px;
	z-index: 10;
}

	/*HOME*/
	.nav .home a:link, .nav .home a:visited {
		left: 0;
		width: 270px;
	}
	.nav .home a:hover, .nav .home a:focus {
		background: url(../images/primenav_rollovers.jpg) no-repeat 0px
-149px;
	}
	.nav .home a:active {
		background: url(../images/primenav_rollovers.jpg) no-repeat 0px
-298px;
	}
	.current-home .home a:link, .current-home .home a:visited {
		background: url(../images/primenav_rollovers.jpg) no-repeat 0px
0px;
		cursor: default;
	}
	.nav-home, .nav-home-click {
		position: absolute;
		top: 0;
		left: 0px;
		width: 270px;
		height: 149px;
		background: url(../images/primenav_rollovers.jpg) no-repeat 0px
149px;
	}
	.nav-home-click {
		background: url(../images/primenav_rollovers.jpg) no-repeat 0px
-298px;
	}


	/*ABOUT*/
	.nav .about a:link, .nav .about a:visited {
		left: 270px;
		width: 114px;
	}
	.nav .about a:hover, .nav .about a:focus {
		background: url(../images/primenav_rollovers.jpg) no-repeat -270px
-149px;
	}
	.nav .about a:active {
		background: url(../images/primenav_rollovers.jpg) no-repeat -270px
-298px;
	}
	.current-about .about a:link, .current-about .about a:visited {
		background: url(../images/primenav_rollovers.jpg) no-repeat -270px
-298px;
		cursor: default;
	}
	.nav-about, .nav-about-click {
		position: absolute;
		top: 0;
		left: 270px;
		width: 114px;
		height: 149px;
		background: url(../images/primenav_rollovers.jpg) no-repeat -100px
-149px;
	}
	.nav-about-click {
		background: url(../images/primenav_rollovers.jpg) no-repeat -100px
-298px;
	}

	/*MENU*/
	.nav .menu a:link, .nav .services a:visited {
		left: 384px;
		width: 108px;
	}
	.nav .menu a:hover, .nav .menu a:focus {
		background: url(../images/primenav_rollovers.jpg) no-repeat -384px
-149px;
	}
	.nav .menu a:active {
		background: url(../images/primenav_rollovers.jpg) no-repeat -384px
-298px;
	}
	.current-menu .menu a:link, .current-menu .menu a:visited {
		background: url(../images/primenav_rollovers.jpg) no-repeat -384px
-298px;
		cursor: default;
	}
	.nav-menu, .nav-menu-click {
		position: absolute;
		top: 0;
		left: 384px;
		width: 108px;
		height: 149px;
		background: url(../images/primenav_rollovers.jpg) no-repeat -384px
-149px;
	}
	.nav-menu-click {
		background: url(../images/primenav_rollovers.jpg) no-repeat -384px
-298px;
	}

	/*PRIVATE DINIG*/
	.nav .private_dining a:link, .nav .private_dining a:visited {
		left: 492px;
		width: 174px;
	}
	.nav .private_dining a:hover, .nav .private_dining a:focus {
		background: url(../images/primenav_rollovers.jpg) no-repeat -492px
-149px;
	}
	.nav .private_dining a:active {
		background: url(../images/primenav_rollovers.jpg) no-repeat -492px
-298px;
	}
	.current-private_dining .private_dining a:link, .current-
private_dining .private_dining a:visited {
		background: url(../images/primenav_rollovers.jpg) no-repeat -492px
-298px;
		cursor: default;
	}
	.nav-private_dining, .nav-private_dining-click {
		position: absolute;
		top: 0;
		left: 492px;
		width: 174px;
		height: 149px;
		background: url(../images/primenav_rollovers.jpg) no-repeat -492px
-149px;
	}
	.nav-private_dining-click {
		background: url(../images/primenav_rollovers.jpg) no-repeat -492px
-298px;
	}


	/*EVENTS*/
	.nav .events a:link, .nav .events a:visited {
		left: 666px;
		width: 117px;
	}
	.nav .events a:hover, .nav .events a:focus {
		background: url(../images/primenav_rollovers.jpg) no-repeat -666px
-149px;
	}
	.nav .events a:active {
		background: url(../images/primenav_rollovers.jpg) no-repeat -666px
-298px;
	}
	.current-events .events a:link, .current-events .events a:visited {
		background: url(../images/primenav_rollovers.jpg) no-repeat -666px
-298px;
		cursor: default;
	}
	.nav-events, .nav-events-click {
		position: absolute;
		top: 0;
		left: 666px;
		width: 117px;
		height: 149px;
		background: url(../images/primenav_rollovers.jpg) no-repeat -666px
-149px;
	}
	.nav-events-click {
		background: url(../images/primenav_rollovers.jpg) no-repeat -666px
-298px;
	}


	/*MERCHANDISE*/
	.nav .merchandise a:link, .nav .merchandise a:visited {
		left: 783px;
		width: 177px;
	}
	.nav .merchandise a:hover, .nav .merchandise a:focus {
		background: url(../images/primenav_rollovers.jpg) no-repeat -783px
-149px;
	}
	.nav .merchandise a:active {
		background: url(../images/primenav_rollovers.jpg) no-repeat -783px
-298px;
	}
	.current-merchandise .events a:link, .current-merchandise .events
a:visited {
		background: url(../images/primenav_rollovers.jpg) no-repeat -783px
-298px;
		cursor: default;
	}
	.nav-merchandise, .nav-merchandise-click {
		position: absolute;
		top: 0;
		left: 783px;
		width: 177px;
		height: 149px;
		background: url(../images/primenav_rollovers.jpg) no-repeat -783px
-149px;
	}
	.nav-merchandise-click {
		background: url(../images/primenav_rollovers.jpg) no-repeat -783px
-298px;
	}

_____________________________

Right now the hover effect works just fine, but the drop down menus
aren't visible—because of the -9000 text-indent on the css.

[jQuery] Re: How Would You Use Superfish Drop Down Menus with CSS Sprites2?

Reply via email to